课程名称:vue2.5入门
课程章节:
第2章 Vue基础语法
主讲老师:Dell
课程内容:
Vue的基础语法,计算属性,侦听器,基础模版指令
课程收获:
1、vue.js库的引入一定要放到<head></head>中,会避免页面出现抖屏的一个情况。
2、vue编写着重于数据,语法:
语法:
el:绑定标签,
data:数据
methods:定义方法;
template:模板
v-text: 会转译
v-html: 不会转译
v-on: 事件绑定v-on:的简写为@符号
v-text 会进行转译
v-html 不会进行转译
绑定dom属性:v-bind:property='data',简写:property='data'如:title='data',data对应为data属性的key;
<div id="root">//挂载点
{{msg}} //挂载点里的内容都叫做模板内容,也可以直接将模板内容放到实例的template里面去
</div>
<script>
new vue({ //vue实例
el:"#root",
data:{
msg:"hello wold"
}
})
</script>
标签绑定事件
v-on:click="handleclick"=>绑定一个click事件 handleclick为函数
在methods 输入 handleclick: function(){
.......
}
3、计算属性:(高效率,当计算的值发生改变的时候,就会重新计算)
语法:
computed:{
c:function(){
return this.a+this.b
}
}
4、侦听器:(当某个值发生改变的时候,就进行对应的操作)
语法:
wacth:{
a:function(){
//业务逻辑
}
}
5、v-if控制DOM的存在与否
v-show控件DOM的显示与否
v-for控制一组数据,来循环显示数据
v-if 当值为false时,直接将该标签f元素从DOM元素中移除
v-show 当值为false时,将该标签元素隐藏 display:none
如果显示隐藏的频率较高的话,用v-show更好,性能高一些
<li v-for="(item,index) of list" :key="index">{{item}}</li>
使用v-for时加一个key属性,提升渲染效率,key值要求每一项都不相同
如果频繁对列表进行变更时不建议使用index作为key值