Vue 的应用场景 (面试必备)
过滤器 (格式化日期)
自定义指令 (Vue.direactive获取表单焦点)
自定义组件 (Vue.component)
计算属性 (计算数量)
侦听器 (验证存在),一般异步操作和较大的性能开销
生命周期 (数据处理,拿数据接口做渲染)
Vue 的模板引擎包括 (插值表达式,指令,事件绑定,属性绑定,样式绑定,分支循环结构)
===================
// 全局过滤
vue.filter("过滤器名称" , function(value,fiterDate) {
// 过滤器业务逻辑
// 比如说字符串大小写的变化,拼接
// 商品id的过滤
// 日期格式的过滤
// 过滤器可以级联操作
// fiterDate可以传参(参数的传递)
return val charAt(0).toUpperCase() + value.slice(1);
})
// 局部过滤
var vm = new.Vue({
el: "#app",
data: {
msg: ''
},
fiters: {
upper: function(value) {
},
goodid: function(value){
}
}
})
-----------
<div>{{msg | upper | lower}}</div>
<div>{{ v-bind:id="id" | formatId}}</div>
// 全局定义自定义指令
vue.
事件的绑定
// 事件修饰符(stop阻止冒泡,prevent阻止默认行为)
<a v-on:click.stop="handle">跳转</a>
<a v-on:click.prevent="handle">跳转</a>
// 按键修饰符(enter回车键,delete删除键,space空格键)
<input v-on:keyup.enter="submit">
<input v-on:keyup.delete="handle">
// 自定义按键修饰符
<input type="text" v-on:keyup="handle" v-model="info">
var vm = new Vue({
el: "#app",
data: {
info: ""
},
methods: {
"handle": function() {
// 打印键盘的键值
console.log(event.keyCode)
}
}
})
属性的绑定
- vue动态处理属性
v-bind指令用法
<a v- bind:href="url">跳转</a>
简写<a :href="url">跳转</a>
样式的绑定
- class标准样式绑定
1.对象语法
<div v-bind:class="{active: isActive}"></div>
2.数组语法
<div v-bind:class="[activeclass,erroeClass]"></div>
*style
vue的生命周期
- 挂载 (初始化相关属性)
- beforeCreate : 在实例化初始化之后,数据观测和事件配置之前被调用
- created : 在实例创建完成后被立即调用
- beforeMount : 在挂载开始之前被调用
- mounted : el被新创建的VM.$el替换,并挂载到实例上去调用该钩子
- 更新 (元素或者组件的变更操作)
- beforeUpdate : 数据更新时调用, 发生在虚拟DOM打补丁之前
- updated : 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子
- 销毁 (销毁相关属性)
- beforeDestroy : 实例销毁之前调用
- destroyed : 实例销毁后调用
var vm = new Vue({
el: "#app",
data: {
msg: "生命周期"
},
// 计算属性
methods: {
// 更新
update: function() {
this.msg = ""
},
//销毁
destroy: function() {
// 做资源释放的操作
// 删除组件树
// 关闭定时器
// 关闭监听事件,移除属性(滚动事件)
this.$destroy()
}
},
// 数据初始化
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
// 创建template模板
console.log("created");
},
beforeMount: function() {
console.log("beforeMount");
},
Mounted: function() {
// 发送axios,调用数据接口
console.log("Mount");
},
})