VUE学习笔记（1）：基础语法

目录：

相关概念：

实例的基本属性：

属性绑定和双向数据绑定：

VUE中的计算属性和侦听器：

v-if,v-show与v-for指令：

---

相关概念：

挂载点： el属性对应的dom元素。

模版：挂载点内部的所有内容。可以把模版放在Vue实例中定义，作为template属性值

实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中。

v-text=''data'' 转义，原始字符串。 v-html="data" 解析成html。

 

实例的基本属性：

el:绑定对应的挂载点。

data:定义挂载点中的数据。

tempalte:挂载点中模板的值。（挂载点的模板内容优先选择tempalte）

methods:定义方法，与v-on（v-on:简写@）配合使用绑定到dom上。

 

属性绑定和双向数据绑定：

属性绑定：

v-bind:(简写:)指令，后面跟html属性。

示例：（title=的内容是js表达式）

效果：

双向数据绑定：

v-model指令。后跟示例里面自定义的数据。

示例：

效果：

修改input的值，显示content的div里面的内容随之改变。

 

VUE中的计算属性和侦听器：

计算属性：

computed属性，里面的某个属性通过其它属性计算而来，调用这个属性时会使用上次的缓存值，如果计算它的其它实现改变，则它的内容从新计算。

示例：

效果：

侦听器：

watch属性，监听某个数据（计算属性也可）的变化，数据一旦发生变化，可在侦听器里实现自己的业务逻辑。

示例：

效果：

 

v-if,v-show与v-for指令：

v-if和v-show指令：

v-if后面跟数据项，数据项内容为false时指令绑定的dom直接被删除。而v-show指令后跟的数据项为false时在dom节点上添加display：none属性。频繁显示和隐藏dom推荐使用v-show,性能提升。

示例：

效果：

v-for指令：

用来循环显示dom结构，在data中声明数组，用v-for循环显示。配合key使用提升渲染速度。

示例：

效果：