全局过滤器
Vue.filter('fn',function(v,s){
/* v就是管道符左边的数据 */
// console.log(v.indexOf('，'))
// return v.substring(0,v.indexOf('，'))
return v+s;
})
/* 利用过滤器 把 hello 变成 olleh */
new Vue({
el:"#app",
data:{
msg:'hello'
},
/* 局部过滤器 */
filters:{
str:function(v,s){
return v + s;
},
dao:function(v){
return v.split('').reverse().join('')
}
}
})
使用v-属性 style设置display:none 实现渲染优化
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" v-cloak>
<!-- | 过滤器的管道符 -->
<h1>{{'我真的是卷王，我24小时坐在电脑旁'|fn('宝贝')|fn('亲爱的')}}</h1>
<h1>{{'我爱张sir你是我的好老师'|str('金牌讲师')}}</h1>
<h1>{{msg|dao}}</h1>
</div>
元素身上使用驼峰命名的属性 fontSize 在浏览器编译元素身上的属性的时候会转化为小写fontsize 导致两者的名字不一致 从而作用不生效
全局自定义指令 简写方式 （不适用于focus()方法 ）
定义指令要方法实例化Vue对象的前面
回调的第一个参数就是元素本身
/* 全局自定义指令 全面的写法 */
Vue.directive('focus',{
/* 当绑定元素插入到 DOM 中 */
inserted:function(el,binding){
console.log(binding)
el.focus();
el.style.background = binding.value.background;
}
})
/* 全局定义一个自定义指令v-focus 让加上v-focus的input框可以 自动获取焦点 */
new Vue({
el:"#app",
/* 局部的自定义指令 */
directives:{
fontsize:{
inserted:function(el,binding){
console.log(binding)
el.style.fontSize = binding.value.fontSize;
}
},
sty(el,binding){
el.style.color = binding.value.color;
el.style.background = binding.value.background;
}
}
})
/* 使用局部自定义指令v-sty 实现 你传入的color background 加了自定义指令的元素能变成相对应的样式 */
组件（Component）的概念：组件即自定义控件
组件的用途：组件能够封装可重用代码，扩展HTML标签功能
组件的本质：自定义标签 组件的分类 全局组件
作用域：不同作用域内均可使用
局部组件
作用域：只在定义该组件的作用域内可以使用
注意： 组件和Vue实例类似，需要注册后才可以使用
<div id="app">
<!-- 组件名是大写 在浏览器编译的时候会转成小写 导致找不到相应的组件
可以全变成小写 中间加-来解决 -->
<div>
<child-a />
</div>
<!-- 所有的组件都需要使用一个div来包裹 -->
<div>
<child-b />
</div>
</div>
<!-- <template id="ChildA">
<div>
<h1>我是ChildA</h1>
</div>
</template> -->
<!-- 模板的第二种写法 使用template加id -->
<template id="ChildB">
<!-- template里面也需要使用div来包裹一下 -->
<div>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
<h1>我是ChildB</h1>
</div>
</template>
<script src="./vue.min.js"></script>
<script>
/* 一定要写在new Vue的前面 */
/* 全局组件 */
Vue.component('ChildA',{
/* 模板的第一种写法 直接写 */
template:'<h1>我是ChildA</h1>'
})
Vue.component('ChildB',{
template:'#ChildB'
})
new Vue({
el: "#app"
})
</script>
