Vue基础介绍

一、Vue基本介绍

1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。
2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

vue是用来构建用户界面的渐进式框架，可谓是后起之秀，生态完善。
特点：采用组件化模式，提高代码复用率，让代码更好的维护。
　　　声明式编码，让编码人员不需操作dom，提高开发效率。（心有灵犀）
　　　使用虚拟DOM（内存里的数据）+优秀的Diff算法，尽量复用DOM节点。

二、Vue下载和引入

下载 

　　下载Vue.js文件到本地

　　https://cdn.jsdelivr.net/npm/vue/dist/vue.js

安装引入

　　<script>引入vue.js文件后，Vue被注册为一个全局的变量，是一个构造函数

三、Vue数据驱动模型 

轻量级的以数据驱动的前端JS框架
   js通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。
虚拟的DOM
   核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
MVVM模式

 

  M：即Model，模型，包括数据和一些基本操作
  V：即View，视图，页面渲染结果
  VM：即View-Model，模型与视图问的双向操作（无需开发人员干涉）

Vue实例

  • 实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项
  • app.$el === document.getElementById(‘app’)
  •     <body>
        <!-- 将来的Vue实例会控制这个元素中所有内容 -->
        <!-- V（View），Vue实例所控制的这个元素区域 -->
        <div id="app">   
            <!-- 通过Vue提供的指令，很方便就能把data里的数据渲染到页面，不用手动操作dom了
           （前端Vue之类的框架，不提倡去手动操作dom） -->
            <p>{{ msg }}</p>
        </div>
        
        <script>
            //导入包,就有Vue的构造函数
            //VM,这个new出来的vm对象,就是调度者
            var vm = new Vue({   //{}配置对象
                el:'#app',   //element,这个Vue实例要控制页面上的哪个区域
                data:{   //M,data就是用来保存当前页面数据的
                    msg:'欢迎学习Vue'
                }
            })  
        </script>
    </body>

  • {undefined{}}插值表达式

  • 插值，不仅可以插变量，还可以进行运算

  • {{'helloworld'.split('').reverse().join('')}}

Vue指令

  1. v-model：用于双向绑定
  2. v-text：用于更新绑定元素中的内容
  3. v-html：用于更新绑定元素中的html内容
  4. v-show：用于根据表达式的值的真假条件显示隐藏元素，切换元素的display CSS属性
  5. v-if：用于根据表达式的值的真假条件渲染元素
  6. v-for：用于遍历数据渲染元素或模板
  7. v-on：用于在元素上绑定事件
  8. v-bind：用于在元素属性上绑定数据  v-bind：可以简写成 :

 

 

 

posted @ 2021-11-23 16:18  攻城狮-tester  阅读(148)  评论(0)    收藏  举报