课程名称：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值
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
