v-bind
v-text 等价于 {{}}
v-bind 属性绑定指令v-bind
- 属性绑定指令,可设置行内样式
- 格式:v-bind:style="{background:bg}"
<p>{{bg}}</p> == <p v-text="bg"></p>
<body>
<div id="app">
<p>{{bg}}</p>
<p v-text="bg"></p>
<p style="background: red">{{bg}}</p>
<p v-bind:style="{background:bg,fontSize:'30px'}">{{bg}}</p>
</div>
<script src="/base/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
bg:"red"
}
})
</script>
</body>
v-bind-Class
v-bind:class=[‘class1’, ‘class2’]
v-bind:class=[‘class1’,(三目运算)]
v-bind:class={class1:true,class2:获取数据} //数据为bool类型
<body>
<div id="app">
<p class="red small">p1</p>
<p v-bind:class=['red','small']>p2</p>
<p v-bind:class=['red',(isBig?'big':'')]>p3</p>
<p v-bind:class={red:true,big:isBig}>p3</p>
</div>
<script src="/base/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isBig:true
}
})
</script>
</body>
v-bind-style
- v-bind 可以简写成 : 冒号
- img :src = “imgSrc” 前面不加冒号无效,会原样输出“imgSrc”
- 绑定常用的属性 id/class/style img:src属性
<body>
<div id="app">
<p v-bind:id="2*3" :style="{background:bg}">p标签</p>
<p><img src="imgSrc" alt=""></p><!-- 无效 -->
<p><img :src="imgSrc" alt=""></p><!-- 有效 -->
<p>{{imgSrc}}</p><!-- imgSrc原样输出 -->
</div>
<script src="/base/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
bg:"pink",
imgSrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560837330028&di=3662628ed614ceeae33cb4c3a8c8e98f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F10%2F20161110182723_4m3jT.thumb.700_0.jpeg"
}
})
</script>
</body>
vue_watch
案例 做一个num*2+1的效果
- 1.{{num*2+1}} 可以实现效果,但是不方便维护管理
- 2.直接封装成一个函数,然后函数内部返回 this.num*2+1
优点:好处就是方便维护与管理了
缺点:缺点就是无关数据变化的时候,doubleNum这个方法也会被调用了。- 3.可以通过设置watch监听器实现这个功能。
watch可以监听现有数据的变化,然后一旦现有数据发生变化了,就会让一个新的数据改变
逻辑上比较复杂点。
<body>
<div id="app">
<p>num: {{num}}</p>
<p>{{num*2+1}}</p>
<p>{{doubleNum()}}</p>
<p>watchNum: {{watchNum}}</p>
<p><input type="text" v-model="msg"></p>
<p><button @click="++num">点击num++</button></p>
</div>
<script src="./base/vue.min.js"></script>
<script>
/*
做一个效果: num*2+1 效果
1.{{num*2+1}} 可以实现效果,但是不方便维护管理
2. 直接封装成一个函数,然后函数内部返回 this.num*2+1
好处就是方便维护与管理了
缺点就是无关数据变化的时候,doubleNum这个方法也会被调用了。
无关数据变化的时候,就会引发视图渲染,doubleNum方法就会被执行了!
3. 可以通过设置watch监听器实现这个功能。
watch可以监听现有数据的变化,然后一旦现有数据发生变化了,就会让一个新的数据改变。
逻辑上比较复杂点。
*/
// var num =1000;
new Vue({
el:"#app",
data:{
num:1,
msg:"hello world",
watchNum:"" ,//声明一条新的数据
},
methods:{
doubleNum(){
return this.num*2+1
}
},
watch:{
// num:function(newValue,oldValue){
// this.watchNum = newValue*2+1
// }
num:{
immediate:true,//第一次就会监听
handler(newValue,oldValue){
this.watchNum = newValue*2+1
}
}
}
})
</script>
</body>
vue_computed
computed:计算属性
- 会根据现有数据生成一个新的数据,并且两者会产生关联,建立永久性的缓存。
- 当无关数据变化的时候,他不会重新计算,直接从缓存里面取之前的值。
和watch的区别:watch监听是单个的 每次监听只能监听一个变量的改变
<body>
<div id="app">
<p>num: {{num}}</p>
<p>{{num*2+1}}</p>
<p>{{doubleNum()}}</p>
<p>watchNum: {{watchNum}}</p>
<p>computedNum: {{computedNum}}</p>
<p><input type="text" v-model="msg"></p>
<p><button @click="++num">点击num++</button></p>
</div>
<script src="./base/vue.min.js"></script>
<script>
/*
做一个效果: num*2+1 效果
1.{{num*2+1}} 可以实现效果,但是不方便维护管理
2. 直接封装成一个函数,然后函数内部返回 this.num*2+1
好处就是方便维护与管理了
缺点就是无关数据变化的时候,doubleNum这个方法也会被调用了。
无关数据变化的时候,就会引发视图渲染,doubleNum方法就会被执行了!
3. 可以通过设置watch监听器实现这个功能。
watch可以监听现有数据的变化,然后一旦现有数据发生变化了,就会让一个新的数据改变。
逻辑上比较复杂点。
4. computed 计算属性
会根据现有数据生成一个新的数据,并且两者会产生关联,建立永久性的缓存。
当无关数据变化的时候,他不会重新计算,直接从缓存里面取之前的值。
跟watch的区别是什么?
watch监听是单个的 每次监听只能监听一个变量的改变
*/
// var num =1000;
new Vue({
el:"#app",
data:{
num:1,
msg:"hello world",
watchNum:"" ,//声明一条新的数据
},
methods:{
doubleNum(){
return this.num*2+1
}
},
computed:{ //计算属性 {{computedNum}}
computedNum(){
return this.num*2+1
}
}
})
</script>
</body>