Vue常用系统指令

Posted 2021-03-06 mycblog

插值表达式

数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式

例如：<span>Message: {{ msg }}</span>

注意：1.必须是一句话，必须是合法的js表达式(if else for switch都不能写)

         2.必须有返回值

 常用指令

v-cloak

解决插值表达式的闪烁问题，要和css样式结合使用 <style> [v-cloak] { display: none } </style> <!-- 在span上加上 v-cloak和css样式控制以后，浏览器在加载的时候会先把span隐藏起来，知道 Vue实例化完毕以后，才会将v-cloak从span上移除，那么css就会失去作用而将span中的内容呈现给用户 --> <span v-cloak>{{msg}}</span> new Vue({ data:{ msg:‘hello ivan‘ } })

 

v-text

用来替换标签的文本内容(会把原标签的内容完全替换，不识别html) <!-- v-text可以将一段文本渲染到指定的元素中,例如： --> <div v-text="msg"></div> new Vue({ data:{ msg:‘hello world‘ } }); <!-- 输出结果：--> <div>hello world</div>

 

v-html：

用来替换标签的网页内容(会把原标签的内容完全替换) <div v-html="rawHtml"></div> new Vue({ data:{ rawHtml:‘<h1>hello world</h1>‘ } })

 

 

v-bind：

可以给标签绑定属性，属性的值需要是一个变量/值类型，默认情况下，v-bind可以省略 1、img的src从imageSrc变量中取得 <img v-bind:src="imageSrc" > 2、从classA, classB两个变量的值作为class的值， 结果是：<div class="A B">classA, classB</div> <div v-bind:class="[classA, classB]">classA, classB</div> 3、isRed变量如果为true，则class的值为red，否则没有 <div v-bind:class="{ red: isRed }">isred</div> 4、div的class属性值一定有classA变量的值，而是否有classB和classC变量的值取决于isB和isC是否为true，二者一一对应 <div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div> 5、变量加常量 <div v-bind:style="{ fontSize: size + ‘px‘ }">size22</div> 6、变量加常量的另一种写法 <img v-bind="{src:imageSrc+‘?v=1.0‘}" > 7、对象数组 <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

缩写形式 <img :src="imageSrc"> <div :class="[classA, classB]">classA, classB</div> <div v-bind:class="{ red: isRed }">isred</div> <div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div> <div v-bind:style="{ fontSize: size + ‘px‘ }">size22</div> <img v-bind="{src:imageSrc+‘?v=1.0‘}" > <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div> vue对象初始化 <script> // 实例化vue对象（MVVM中的View Model） new Vue({ // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析 el:‘#app‘, data:{ // 数据 （MVVM中的Model） imageSrc:‘http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png‘, isRed:true, classA:‘A‘, classB:‘B‘, isB:true, isC:true, size:22, styleObjectA:{color:‘red‘}, styleObjectB:{fontSize:‘30px‘} }, methods:{ } }) </script>

v-on

1、作用：可以给标签绑定事件我们可以给事件入参$event对象，然后在事件中就可以获取到当前绑定事件的元素了v-on和v-bind一样，v-on默认也可以省略 2、常用事件： v-on:click v-on:keydown v-on:keyup v-on:mousedown v-on:mouseover v-on:submit .... 3、示例： <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat(‘hello‘, $event)"></button> <!-- 阻止默认行为，没有表达式 --> <form v-on:submit.prevent></form> 5、v-on的缩写形式：可以使用@替代 v-on: <button @click="doThis"></button> 6、按键修饰符 触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件 写法： <input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件 由于回车键对应的keyCode是13，也可以使用如下替代 <input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件 但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法： 1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为： Vue.config.keyCodes.a = 65 <input type="text" @keydown.a="kd1"> 这样即可触发 2、也可以之间加上a对应的数字65作为按键修饰符 <input type="text" @keydown.65="kd1"> 这样即可触发 键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

 

v-on按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right

 

v-for

item in Array (item, index) in Array value in Object (value, key, index) in Object :key属性具有唯一性，不能重复，它能够唯一标识数组的每一项 将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考https://www.zhihu.com/question/61064119/answer/183717717 注意：以下变动不会触发视图更新 1. 通过索引给数组设置新值 2. 通过length改变数组 解决： 1. Vue.set(arr, index, newValue) 2. arr.splice(index, 1, newValue) <ul> <li v-for="item in user">{{item.name}}</li> <li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li> <li>---------------华丽的分割线---------------</li> <li v-for="value in boss">{{value}}</li> <li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li> </ul> <script> var vm = new Vue({ el: ‘#app‘, data: { user: [ {name: ‘jack‘}, {name: ‘neil‘}, {name: ‘rose‘} ], boss: { name: ‘马云‘, age: 50, money: 1000000002030 } } }) </script>

v-if

1、作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建 2、示例： <!-- Handlebars 模板 --> {{#if isShow}} <h1>Yes</h1> {{/if}} 通常我们使用写法居多： <h1 v-if="isShow">Yes</h1> 也可以用 v-else 添加一个 “else” 块： <h1 v-if="isShow">Yes</h1> <h1 v-else>No</h1> 注意：v-else 元素必须紧跟在 v-if 元素否则它不能被识别。 new Vue({ data:{ isShow:true } });

v-show

1、根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素 2、示例： <h1 v-show="isShow">Yes</h1> new Vue({ data:{ isShow:true } }); 3、v-if和v-show的总结： v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中，而v-show 是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-model

1、在表单控件或者组件上创建双向绑定 2、v-model仅能在如下元素中使用： input select textarea components（Vue中的组件） 3、举例： <input type="text" v-model="uname" /> new Vue({ data:{ uname:‘‘ //这个属性值和input元素的值相互一一对应，二者任何一个的改变都会联动的改变对方 } })