vue.js自学随笔（初始理解+常用指令）_dom listenner是vue中的方法-CSDN博客

本文链接：https://blog.csdn.net/weixin_42618492/article/details/84375444

Vue算是近两年最火的框架之一了，从学习了解的过程中，我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架，它和jQuery的不同点就在于jQuery是通过操作DOM来改变页面的显示，而Vue则是通过操作数据才实现页面的更新与展示。

下面这个图就是方便大家对于Vue数据驱动的概念理解：

（数据模型）

Vue.js主要负责的是上图中绿色方块区域 ViewModel的部分，它在View层（即DOM层）和Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listenners与Data Bindings两个相当于监听的东西。

当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据；当Model层的数据发生改变时，它也会通过Data Bindings来监听并改变View层的显示。这样就实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

Vue实例

在一个html文件中，我们可以直接通过script标签引入Vue.js，然后就可以再页面中写Vue.js代码。

引入Vue.js

<script src="路径/vue.js"></script>

在html文件中写Vue.js代码

var new Vue({          //构建一个新的Vue实例
    el:'#box',         //这里我们需要操作的区域是id为box的元素下的区域
    data:{             //实例中的数据对象，这里的data属性能够响应数据的变化
         a:1,
         b:2
   },
   created:function(){ //表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。
           console.log('a is:'+this.a)
   }
})

上图中我们通过new Vue()构建了一个Vue的实例，在实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

（1）el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。
（2）data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
（3）created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

Vue常用指令

v-text：用于更新绑定元素中的内容，类似于jQuery的text()方法
v-html:用于更新绑定元素中的html内容，类似于jQuery的html方法
v-model 接收用户输入的一些数据，直接就可以将这些数据挂载到data属性里面
v-bind 给页面中html属性进行绑定
v-if：用于根据表达式的值的真假条件（true或false），来决定是否渲染元素
v-show：用于根据表达式的值的真假条件（true或false），来决定是否显示或隐藏元素。元素会始终渲染并保持在dom中，切换元素的display CSS属性，v-show将元素display设置成none，并不是将元素直接移除。
v-for：用于遍历数据渲染元素或模板，控制html元素的循环，实现数据列表的生成
v-on：用于在元素上绑定一个监听事件，用于调用我们Vue实例中定义的方法
v-else 元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别
v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。