Vue学习笔记（三）
【书接上文】Vue学习笔记（一）
【书接上文】Vue学习笔记（二）
Vue的监听器
监听器 watch 会监听data中数据的变化 ，当data中的数据变化时，执行对应的逻辑。
监听的数据名在这里作为函数名，函数拥有两个参数，一个newVal（新值），一个oldVal（旧值）。
异步操作和无事件操作（比如输入框输入时搜索）时较多使用监听，能使用计算属性的时候尽量使用计算属性。
简单类型的监听
<div id="app">
姓:<input type="text" v-model="firstN">
名:<input type="text" v-model="lastN">
<h1>全名:{{ fullName }}</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstN:"",
lastN:"",
fullName:""
},
watch: {
firstN(newVal,oldVal) {
console.log(newVal,oldVal);
this.fullName = newVal + this.lastN;
},
//异步操作实例
lastN(newVal,oldVal) {
setTimeout(()=>{
this.fullName = this.firstN + newVal;
},1000)
}
}
})
</script>
深度监听
监听复杂数据类型时,不能使用普通的数据类型的监听方式，需要使用深度监听。
<div id="root">
<input type="text" v-model="user.name">
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
user:{name:"xxx",age:19}
},
watch: {
user:{
handler(newVal){
console.log(newVal);
},
//当前值立刻监听
immediate:true,
//开启深度监听
deep:true
}
},
})
</script>
$set和set
作用：向data中的list等添加属性（如：list:{name:zzz,age:18}，向list中添加sex属性）
$set是在newVue里写的，set是全局的。
vue-resource
vue-resourse它依赖于vue 必须在引入vue之后引入
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<div id="root"></div>
<script>
new Vue({
el:"#root",
data:{},
mounted() {
this.$http.get("http://www.liulongbin.top:3005/api/getprodlist").then(function (res) {
console.log(res.body.message);//返回是数组
})
},
})
</script>
Vue的自定义指令
创建格式：Vue.directive(指令名称,指令相关的配置函数)
focus:指令名称 名称可以自己定义 见名知意 使用时加前缀v-
放个例子感受一下：
<div id="root">
<input type="text" v-foucs>
<!-- 这里是个字符串 -->
<p v-color="'green'">xxxxxxxx</p>
<!-- 这里是data里面的值 -->
<p v-color="red">xxxxxxxx</p>
</div>
<script>
//这里就是自定义指令
Vue.directive("foucs", {
bind: function (el) {
console.log("bind");
console.log(el);
//dom操作不可用
el.focus();
},
//inserted：被绑定元素插入父节点时调用
inserted: function (el) {
console.log("inserted");
//此处el表示原生dom对象 可进行原生js操作
// console.log(el);
// el.focus();
},
update: function (el) {
console.log("update");
},
})
Vue.directive("color",{
inserted(el,binding){
console.log(binding);
el.style.color = binding.value;
}
})
new Vue({
el:"#root",
data:{
red:"red"
}
})
</script>
$nextTick
当页面上某些数据更新时，执行某些代码
<div id="root">
<p v-text="str" id="thep"></p>
<button @click="btnClick">更新数据</button>
</div>
<script>
new Vue({
el: "#root",
data: {
str: "孙俪"
},
methods: {
btnClick() {
//data中的数据更新 不会马上更新页面 更新页面是异步的
//需求:DOM更新之后 想做某些事情
//当页面上的数据更新时,执行某些代码
var op = document.getElementById("thep");
console.log(op.innerHTML);//孙俪
//当页面上数据更新时 执行某些代码
this.$nextTick(function () {
console.log(op.innerHTML);
})
}
},
})
</script>
