v-if&v-show
v-show如果值为true 相应的节点就会显示，就算值是flase，在dom中依然存在，只是把display的值改成none
我爱你
v-if是直接将dom删除了，在dom文档中已经找不到对应的dom，变成了注释
我爱你
如果频繁使用 就使用v-show 可以节约性能开销
如果短暂使用，例如页面一开始加载的时候进行判断显示 优先使用v-if
实际开发中，使用v-if比较多
v-for比v-if优先级高，不推荐同时使用
解决v-if和v-for同时使用的方法是 使用computed计算属性来过滤，之后再渲染计算属性的数据
new Vue({
el: '.app',
data: {
msg: 123,
list: [1, 2, 3]
},
computed: {
arr: function () {
return this.list.filter(r => r > 1)
}
},
methods: {
}
})
组件
组件名是大写 在浏览器编译的时候会转成小写，导致找不到想应的组件，可以全变成小写，中间加-来解决
所有的组件都需要使用一个div来包裹
模板的第二种写法，使用template加id
全局组件
模板的第一种写法
Vue.component('child1',{
template:<h1>我是child1</h1>
})
Vue.component('childA',{
template:<h1>我是childA</h1>
})
Vue.component('childB',{
template:'#childB'
})
new Vue({
el:'.app'
})
过滤器
|过滤器的管道符
{{'我是李云龙:山本我日你先人'|fn('宝贝')|fn('sad')}}
{{'我爱张sir'|str('金牌厨师')}}
{{'hello'|he}}
/* 全局过滤器 */
Vue.filter('fn',function(v,s){
/* v就是管道符左边的数据 */
console.log(v);
return v/* .substring(0,v.indexOf(':')) */+s
})
new Vue({
el:'.app',
/* 局部过滤器 */
filters:{
str(v,s){
return v+s
},
he(v){
return v.split('').reverse().join('')
}
}
})
消除渲染时的过渡
当页面刷新的时候data中的数据还没有渲染出来，页面中就会显示原本写的插值语法，这时候就需要消除这个bug
在绑定的实例化对象的元素上上添加v-cloak 并在style样式中添加（只要前面加上v-都可以实现，随意命名，通常使用clock）
[v-cloak]{
display: none;
}
自定义指令
元素身上使用驼峰命名的属性，fontSize在元素身上会转化为fontsize导致两者的名字不一致，从而作用不生效
我是程序员
/* 全局自定义指令 简写方式 不适用于DOM操作 */
/* 定义指令要方法实例化Vue对象前面 */
Vue.directive('bg', function (el) {
/* 回调的第一个参数就是元素本身 */
console.log(el);
el.style.background = 'red'
})
/* 全局自定义指令 写全方式 */
Vue.directive('focus', {
/* 当绑定元素插入到DOM中 */
inserted: function (el, bind) {
el.focus();
console.log(bind);
el.style.background = bind.value.background
}
})
new Vue({
el: '.app',
/* 局部的自定义指令 要加s */
directives: {
sty: {
inserted (el, bind) {
el.style.background = bind.value.background;
el.style.color = bind.value.color
}
}
}
})
