vue02——vue中v-XXX指令

v-bind

v-text 等价于 {{}}

v-bind 属性绑定指令

v-bind

属性绑定指令，可设置行内样式

格式：v-bind:style="{background:bg}"

{{bg}} == 

<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>

vue02——vue中v-XXX指令相关推荐

Vue中禁止输入表情符号指令
参考地址:vue el-input中禁止输入表情符号_笑到世界都狼狈的博客-CSDN博客_输入框禁止输入表情你知道compositionstart和compositionend吗 - 掘金 cons ...
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...
vue中自定义全局指令报错
我主要从三个方面来检查 1.首先检查是否拼写错误,尽量粘贴,不要手写 2.区分好变量和字符串的差别 全局指令 ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...
vue中如何自定义指令directive
一. 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...
vue中的v-text指令之Vue知识点归纳(二)
本文中将描述: v-text 的指令的基本使用 v-text 与差值表达式的区别 1 简述 v-text会将元素当成纯文本输出 <!DOCTYPE html> <html lang= ...
Vue中常见的指令及其含义？
v-text 只解析文本信息 v-html 可以解析超文本标签 v-if/v-else-if/v-else 与javaScript中的一样,用于判断DOM的显示与隐藏. v-show 通过控制元素的d ...
手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
【Vue】v-bind v-model指令的使用（实现计算器效果）
在Vue学习笔记(一)中,我们已经了解了Vue中的基本指令,比如 v-text,v-html,v-bind,v-on 等指令的使用,并且介绍了 MVVM 模式,那么怎么实现动态的在M和V之间数据传递呢 ...

vue02——vue中v-XXX指令

v-bind

v-bind

v-bind-Class

v-bind-style

vue_watch

案例做一个num*2+1的效果

vue_computed

vue02——vue中v-XXX指令相关推荐

最新文章

热门文章

vue02——vue中v-XXX指令

v-bind

v-bind

v-bind-Class

v-bind-style

vue_watch

案例 做一个num*2+1的效果

vue_computed

vue02——vue中v-XXX指令相关推荐

最新文章

热门文章

案例做一个num*2+1的效果