学习Vue之旅：Day6——各种常用指令
目录
一、模板语法常用指令：
二、计算属性computed:{}，只要变量没变，结果会缓存起来。所以性能比较好
三、watch监听数据的变化，会得到新值和老值两个参数
四、 当v-bind与class或者style一起连用时，除了字符串外，表达式还可以为对象或者数组。
五、v-if v-else-if v-else 条件渲染
六、v-show 切换显示
七、列表渲染 v-for
查缺补漏
js中常用的字符串的方法
一、模板语法常用指令：
v-bind：如果一个属性的属性值是动态变化的，则属性名前加一个“v-bind:”，缩写为“：”
eg：
v-bind:id="myId" 缩写----> :id="myId"
v-bind:class="red" 缩写----> :class="red" 不仅可以动态绑定属性值，也可以动态绑定属性
也可以动态绑定事件名称
v-once：则只会渲染一次
v-html：使得可以插入html代码，即输出为“标题1”，而不是“
标题1
"{{content}}
content："标题1
"
输出---->标题1
content："标题1
"
输出---->标题1二、计算属性computed:{}，只要变量没变，结果会缓存起来。所以性能比较好
如果computed中要用到data(){ }中的数据，就要多加一个this。
computed:{
……this.msg…………
}三、watch监听数据的变化
watch:{
msg:function(newValue,oldValue){
……………………
}
}四、 当v-bind与class或者style一起连用时，除了字符串外，表达式还可以为对象或者数组。
//第一种方法
hello
isActive:false
----->则h1 没有active类
//此处class的值就是 对象
//第二种方法
hello
arr:['swiper','active']
----->则h1 被赋上 swiper和active 类名
//此处class的值就是 数组
//也可以删除 数组中的item
this.arr.pop（）
//第三种方法,此处class的值是 数组和对象的结合
hello
//方法一：style的值里 放置字符串
hello
return{
msg:"background:yellow;"
}
//方法二：style的值里 放置对象
hello
//方法三：style的值里 放置对象
hello
return{
styleObj:{
background:'yellow',
border:'1px solid blue'
}
}
//属性名不能有横杠，一定要有的话，比如 background-color，要用引号引起来，eg： 'background-color':'yellow'
//有横杠的属性名也可以用 驼峰命名法 eg：backgroundColor
//方法四：style的值里 放置数组
hello
五、v-if v-else-if v-else 条件渲染
应用场景：vip用户不显示广告，非vip用户则显示广告
是否要购买会员？今日购买会员只需9.9
欢迎金主爸爸！
v-if 如果不满足条件的，直接在html中消失，与六的v-show的 display ：none 不一样
直接消失，消耗性能大
六、v-show 切换显示
应用场景：点击 “显示/隐藏”，在显示和隐藏之间来回切换
显示/隐藏
isShow:true
method:{
toggleShow:funtion(){this.isShow = !this.isShow },
}之所以会隐藏，是因为v-show:false 时为h1标签设置了 display ：none
只是加了style样式，没有直接消失，所以开销其实是比较小的。
七、列表渲染 v-for
不仅可以渲染数组，还可以渲染对象。
查缺补漏
{{ }}中，也可以写三元运算符
如果computed中要用到data(){ }中的数据，就要多加一个this。
js中常用的字符串的方法
https://www.cnblogs.com/zl-light/p/11608722.html
str.slice()， 截取字符串中的一部分
str.split(' ')，把字符串分离成数组
str.concat() ，拼接字符串
str.indexOf()，找下标
str.charAt()，找字母 eg：str.charAt(5) ----->即：下标为5的字符
str.charcodeAt()，找字母的Unicode码
str.toUpperCase(), 字符全部转换为大写
str.toLowerCase(), 字符全部转换为小写