Vue2的基本内容（一）

目录

一、插值语法

二、数据绑定

1.单向数据绑定

2.双向数据绑定

三、事件处理

1.绑定监听

2.事件修饰符

四、计算属性computed和监视属性watch

1.计算属性-computed

 2.监视属性-watch

（1）通过  watch  监听  msg 数据的变化 

 （2）通过  watch  监听  obj 数据的变化（深度监听 deep）

五、class 与 style 绑定

1. class 绑定

2. style 绑定 

六、 条件渲染

1.v-if

2.v-show

七、 列表渲染

1.v-for指令

八、指令总结

一、插值语法

（1）用于解析标签体内容

（2）语法：{{}}，xxx会作为js表达式解析

二、数据绑定

1.单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面

2.双向数据绑定

语法：v-model:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

三、事件处理

1.绑定监听

语法：

•  v-on:xxx="fun"
• @xxx="fun"
• @xxx="fun(参数)"

2.事件修饰符

prevent : 阻止事件的默认行为 event.preventDefault()
stop : 停止事件冒泡 event.stopPropagation()

四、计算属性computed和监视属性watch

1.计算属性-computed

• 要显示的数据不存在,要通过计算得来
• 在 computed 对象中定义计算属性
• 在页面中使用{{方法名}}来显示计算的结果

	<div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div>data:{firstName:'张',lastName:'三',},computed:{//简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}

 2.监视属性-watch

• watch 配置来监视指定的属性
• 当属性变化时, 回调函数自动调用, 在函数内部进行计算

（1）通过  watch  监听  msg 数据的变化 

watch: {msg(oldValue, newValue) {console.log(oldValue)console.log(newValue)}
}

 （2）通过  watch  监听  obj 数据的变化（深度监听 deep）

data（） {return {obj: {'name': "赵",'age': 18},}
},
watch: {obj: {handler(oldValue,newVal) {console.log(oldValue)console.log(newValue)},deep: true  // 深度监听}
}

五、class 与 style 绑定

1. class 绑定

• :class='xxx'
• 表达式是字符串: 'classA'
• 表达式是对象: {classA:isA, classB: isB}

2. style 绑定 

• :style="{ color: activeColor, fontSize: fontSize + 'px' }"
• 其中 activeColor/fontSize 是 data 属性

六、 条件渲染

1.v-if

写法：

v-if="表达式

"v-else-if="表达式

"v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

七、 列表渲染

1.v-for指令

• 用于展示列表数据
• 语法：v-for="(item, index) in xxx" :key="yyy"
• 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

八、指令总结

• v-bind  : 单向绑定解析表达式, 可简写为 :xxx
• v-model : 双向数据绑定
• v-for   : 遍历数组/对象/字符串
• v-on    : 绑定事件监听, 可简写为@
• v-if    : 条件渲染（动态控制节点是否存存在）
• v-else  : 条件渲染（动态控制节点是否存存在）
• v-show  : 条件渲染 (动态控制节点是否展示)
• v-text指令：1.作用：向其所在的节点中渲染文本内容。         

                           2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div v-text="str"></div>data:{str:'<h3>你好啊！</h3>'}

 

•  v-html指令：

            1.作用：向指定节点中渲染包含html结构的内容。

            2.与插值语法的区别：

                  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

                  (2).v-html可以识别html结构。

 

	<div v-html="str"></div>data:{str:'<h3>你好啊！</h3>',}

•  v-once指令：

            1.v-once所在节点在初次动态渲染后，就视为静态内容了。

            2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。