本文针对自己学习官方文档时,总结一些易容易混淆的知识点做一下记录。欢迎指正或学习交流。
(一)常用基础知识点
v-on:click=''
、@click=''
、:click=''
三种写法;
注意函数调用:直接使用双花括号调用函数是要使用函数名+括号,其他直接使用函数名即可,或使用函数名+括号(click事件中)注意传参的函数必须带括号,可以不带参数,不然会报错对象空值;v-if=''
条件渲染与v-show=''
的区别:v-if 条件:不存在不会占位空间不会被渲染挂载;v-show为真时,去掉display:none,为假时显示display:none。默认会占用空间,会被渲染挂载。v-for=''
可以通过两组方式遍历数组(也可以遍历对象):一种是通过数组下标;另一种是循环遍历;
v-for='user in users' 或 v-for='(user,index) in users'
第二个参数是数组索引值;<p>v-for还可以渲染div</p> <div v-for='(user,index) in users'> <h3>{{index+1}}</h3> <span>{{user.name}}---{{user.age}}</span> </div> <p>v-for使用template标签,这个标签不像div一样会被渲染出来,只渲染template里面的标签</p> <template v-for='(user,index) in users'> <h3>{{index+1}}</h3> <span>{{user.name}}---{{user.age}}</span> </template> <p>遍历数组里面的对象,遍历两次</p> <template v-for='(user,index) in users'> <div v-for="(item,key) in user" > <h5>{{item}}---{{key}}</h5> </div> </template>
数据双向绑定的两种方法:
<p>双向数据绑定ref/$refs示例:input/select/textarea</p> <label for="">姓名</label> <!-- ref属性标记值,可获取 --> <input type="text" v-on:keyup="logName" ref='refName'> <span>您输入的名字为:{{name}}</span><br> <label for="age">年龄</label> <input type="text" v-on:keyup='logAge' id="age" ref="refAge"> <span>您输入的年龄为:{{age}}</span> <p>双向数据绑定v-model示例:input/select/textarea</p> <label for="">姓名</label> <!-- ref属性标记值,可获取 --> <input type="text" v-model='name'> <span>您输入的名字为:{{name}}</span><br> <label for="age">年龄</label> <input type="text" v-model="age"> <span>您输入的年龄为:{{age}}</span>
js部分:
new Vue({ el:'#vue-app', data:{ name:'', age:'' }, methods:{ logName:function(){ // console.log("您正在输入名字~"); // $refs获取标记的值,后面接命名值+value // console.log(this.$refs.refName.value); this.name=this.$refs.refName.value; }, logAge:function(){ // console.log("您正在输入年龄~"); this.age=this.$refs.refAge.value; } } })
computed
和methods
方法:只要methods方法之一被调用,其他所有方法都会被渲染执行,很耗费性能;计算属性,只会调用相应的方法体,是应用于搜索,调用比较多的方法体。