这是我参与「第四届青训营 」笔记创作活动的的第5天
Vue指令
v-text
<p v-text='username'></p>
缺点 v-text会覆盖元素的原有内容
可以用插值表达式{{}}在标签的内容节点中， 如
<p>{{username}}</p>
注意点 插值表达式"{{}}"实际开发中运用最多，只能用在元素内容节点中，不能用在属性节点中
v-html
可以把包含HTML标签的字符串渲染为页面的HTML元素
<p v-html="testHTML"> </p>
data:{
testHTML:'<h1>This is a HTML</h1>'
}
v-bind
属性绑定指令，为元素动态绑定值。简写为冒号:
v-on
事件绑定指令，可以为DOM元素绑定事件监听
- v-on:click 等同于 @click
- v-on:input 等同于 @input
- v-on:keyup 等同于 @keyup
事件修饰符
.prevent和.stop
e.preventDefault()相当于@click.prevent 阻止默认行为
e.stopPropagation()相当于@click.stop 阻止冒泡
v-model
双向数据绑定
v-bind为单向绑定，数据渲染到页面，页面v-bind改变不能同步到数据源中
表单双向绑定原理
分两步骤
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体
<input type="text" :value="username" @input="username = $event.target.value" />
v-model指令可以使用的场景
1.input输入框
- type='radio'
- type='checkbox'
- type='xxx'
2.textarea
3.select v-model.number 转为数字
v-model.trim 去除首尾空白
v-model.lazy change时更新
条件渲染指令
v-if和v-show
- v-show原理：为元素添加或移出display:none样式，频繁切换性能更好
- v-if 原理：每次动态创建或移出元素，实现元素的显示和隐藏，如果刚进入页面某些元素不需要被展示，而且后期很可能不需要被展示，此时v-if性能更好
实际开发中,大多数情况下，可以不需要考虑性能问题，直接使用v-if
.vue先编译整个页面，再去决定是否渲染标签
