1.vue指令剩余
注意
methods中函数书写必须是普通函数，只有普通函数，this才指向vue实例，箭头函数会指向window
注意
表单下拉框输入项可以不写value，写了value则value值和表单输入值需要一样
methods:{
/* es6写法
fn(){
this.count++ //一定要加上this,代表获取data中定义的变量
} */
/* es5写法 */
fn:function(){
this.count++
}
/* 箭头函数写法，不能这么写，this会丢失指向
fn:()=>{
console.log(this) // this为window
this.count++
} */
}
从前方插入项
操作：选中id=2的元素，从前面插入3号，发现被选中的元素下移，被选中的元素改变但选择的位置没有改变
原因：没有设置唯一的key，vue无法标记每一个元素，如果从末尾添加，则不会有这个问题
如果从前面添加，新加入的元素会替代后面元素的位置
解决：给要遍历的元素添加唯一的key
key的作用：是为了给vue一个提示，以便跟踪每一个节点的身份
从而重用和排序现在的元素，需要为每一个元素提供一个唯一key的属性
key的取值
必须是number或者string，不能是对象，而且使用v-fo循环的每一项得值，都要保证唯一
尽量不要使用数组的index索引，可以使用时间戳等，如果id唯一，则尽量使用id
v-if,v-else-if,v-else
作用
模板中的选择结构
语法
if-else结构
<标签 v-if='条件'>
<标签 v-else>
if-else-if结构
<标签 v-if='条件1'>
<标签 v-else-if='条件2'>
<标签 v-else-if='条件3'>
<标签 v-else-if='条件4'>
<标签 v-else>
注意点
v-else指令是v-if指令的附属指令，它在v-if指令条件不满足的时候，才渲染
v-else指令必须跟在v-if指令后面，没有任何参数，也不能单独使用
<!-- 根据输入的内容是否包含k，显示或隐藏我没k -->
<div id="app">
<input type="text" v-model="value" placeholder="请输入">
<h1 v-if="value.includes('k')">我有k</h1>
<h1 v-else>我没k</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
value:'',
},
methods: {
}
})
</script>
v-model修饰符
<input type="text" v-model.number="msg1" @change="fn1">
<input type="text" v-model.trim="msg2" @blur="fn2">
<input type="text" v-model.lazy="msg3">
以parseFloat方式转成数值类型，只会转输入的数字，不会转数字后的字母
.trim：去掉首尾空白字符
.lazy：输入结束后再渲染
lazy：默认情况下，vue对输入框默认采用@input事件进行输入替换和渲染，这样会造成性能损耗
可以使用lazy修饰符将@input事件转成@change事件，在用户输入完毕释放焦点后触发同步
v-model注意点
对于文本框和文本域，v-model绑定的是一个字符串
对于单选框，v-model绑定的是单选框的value值
对于单个复选框，v-model绑定的是布尔值
对于多个复选框，v-model绑定的是一个数组
对于下拉选择框，v-model绑定的是value值
v-on修饰符-键盘对象
<div id="app">
<input type="text" @keydown.enter="enterFn()"/>
<input type="text" @keydown.esc ="escFn()"/>
</div>
<script>
new Vue({
el: '#app',
data: {},
methods: {
enterFn(){
console.log('Enter被按下')
},
escFn(){
console.log('ESC被按下')
}
}
})
v-on修饰符-鼠标对象
.stop也可以阻止事件冒泡，等同于e.stopPropagation()
.prevent可以阻止默认行为
.once 可以只调用一次事件处理函数
.self 点击的元素必须是绑定事件本身的元素，不能通过事件冒泡去触发
v-text/v-heml指令
作用
都可以用插值，可以实现插值表达式同样的效果
语法
<标签 v-text='vue变量'>
<标签 v-html='vue变量'>
注意点
v-text是把值当做普通字符串显示。相当于使用innerText填充
v-html是把值当做html显示。相当于使用innerHtml填充
插值表达式可以更新标签体的部分内容，但v-html更新的是标签体的全部内容
v-once指令
作用
定义它的元素或者组件只渲染一次，包括元素或者组件的所有子节点
语法
<标签 v-once>
注意
v-once不需要写表达式
2.computed计算属性
概念
用于存放定义计算属性的选项
提供了一种类似属性，但是又可以添加逻辑的操作数据的方式
语法
跟methods属性是并列的
computed:{
方法名(){
return 每一个计算属性中的方法都必须要有一个return
}
}
<!-- 将msg标签翻转一下显示在h1标签上 hello ==> olleh -->
<div id="app">
<!-- <div>{{msg}}</div>
<button @click="fn()">翻转</button> -->
<div>{{fn()}}</div><!-- 表示调用这个方法，拿到方法的返回值 -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg:'hello'
},
methods: {
fn(){
return this.msg.split('').reverse().join('')
// 切割成字符串数组，翻转，再拼接字符串
}
}
})
<div id="app">
<div>{{newMsg}}</div><!-- newMsg是一个属性，不用加括号 -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg:'hello'
},
computed:{
/* newMsg在计算属性中其实是一个属性而不是方法，所以不能直接调用 */
newMsg(){
return this.msg.split('').reverse().join("")// 将操作结果返回给newMsg这个计算属性
}
}
})
计算属性特点
计算属性是由data中的原始数据计算而来，原始数据改变了，计算属性也会跟着改变，视图也会更新
计算属性的应用场景
如果某个属性是由原始数据计算而来的，可以考虑使用计算属性
计算属性与普通方法的区别
使用普通方法表面上可以实现和计算属性相同的效果
methods是没有缓存的，只要调用就会执行
computed具有缓存性，只有计算属性依赖的原始数据发生改变，计算属性才会重新计算
所以计算属性的性能更高
3.watch监听属性
watch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。
watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。
<div id="app">
<input type="text" v-model="firstName"><br>
<input type="text" v-model="lastName"><br>
<h1>{{fullName}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
firstName:'张',
lastName:'三',
fullName:'张三'
},
watch:{
/* watch里面的属性需要监听，
因为fullName依赖于firstName和lastName，所以对后两者进行监听 */
/* 第一种写法：完整写法 */
/* firstName:function(){
this.fullName = this.firstName + this.lastName
},
lastName:function(){
this.fullName = this.firstName + this.lastName
} */
/* 第2种写法：简写 此处firstName和lastName都是属性 */
firstName(){
this.fullName = this.firstName + this.lastName
},
lastName(){
this.fullName = this.firstName + this.lastName
}
}
})
