文章目录
Vue特点
Vue.js 使用了基于 HTML 的模板语法
允许开发者声明式地将 DOM 绑定至Vue 实例数据
Vue 将模板编译成虚拟 DOM 渲染函数。可以不用模板,直接写render函数
Vue过滤器
作用:常见文本的格式化
位置:插值表达式,v-bind表达式
私有过滤器:只有当前vm能够使用
methods: {
filters:{
},
}
全局过滤器:所有vm实例都共享
全局过滤器:Vue.filter(‘filterName’,function(){ })
- 声明全局过滤器
data是管道符传递过来的数据
Vue.filter('dataFormat',function(dataStr,pattern=""){
var dt=new Date(dataStr);
var y=dt.getFullYear();
var m=dt.getMonth();
var d=dt.getDate();
if(pattern.toLowerCase() === "yyyy-mm-dd"){
return y+"-"+m+"-"+d;
}else{
var hh=dt.getHours();
var mm=dt.getMinutes();
var ss=dt.getSeconds();
return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
}
});
调用方法:通过管道符调用
## 采用就近原则,优先调用私有过滤器
<td>{{ item.name | dataFormat('yyyy-mm-dd') }}</td>
Vue自定义指令
特点:定义时不加v-,但是调用时需要加v-
不带参数vue指令
- 声明全局自定义指令
Vue.directive('focus',{
//指令刚绑定到元素上时,只执行一次
bind:function(){
},
//指令刚插入到dom中,只执行一次
inserted:function(el){
el.focus(); //el表示原生js对象
},
//VNode更新一次时,可执行多次
updated() {
},
});
- 调用无参vue指令
<label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords" id="search" v-focus>
</label>
带参vue指令
- 声明带参vue指令
Vue.directive('color',{
bind:function(el,binding){
el.style.color = binding.value;
}
});
- 调用带参数vue指令
<label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords" id="search" v-color="'blue'">
</label>
Vue生命周期函数
- 第一个生命周期函数:实例创建之前,data和methods中的数据还没有初始化
beforeCreate() {
},
- 第二个生命周期函数:data和methods方法已经初始化好了
操作Vue属性最早钩子
created() {
this.show();
},
- 第三个生命周期函数:通过模板编译,执行vue指令,字符串模板在内存已经生成,但是没有渲染到页面中
beforeMount() {//旧页面
},
- 第四个生命周期函数:将编译好的模板 挂载到页面中去。创建阶段——>运行阶段
操作页面DOM最早钩子
mounted() {
},
- 第五个周期函数(运行时):某事件修改data中的数据,页面尚未更新data中的数据
beforeUpdate() {
},
- 第六个生命周期函数:某事件修改data中的数据,页面更新了data中的数据
VM将model中的数据生成新得dom,然后渲染到页面中去
updated() {
},