vue中常见指令

逃离我推掉我的手 2022-01-10 06:53 218阅读 0赞

**一、视图输出指令    作用：把 model绑定到view**

**   v-text和v-html  **

*   1. 默认 v-text 是没有闪烁问题的，v-text可以简写为\{ \{\}\},并且支持逻辑运算
 *   2. v-text会覆盖元素中原本的内容，但是 插值表达式 1这种，只会替换自己的这个占位符，不会把 整个元素的内容清空 
 *   3. 默认 v-html 覆盖内部内容， 输出HTML

**   v-text  **实例

<span v-once>这个将不会随msg属性的改变而改变: {
       { msg }}</span>

**v-html  **实例

**二、属性绑定指令   作用：把model动态绑定view**

**  `v-bind` ：是 Vue中，提供的用于绑定属性(title)的指令**

*  1. 直接使用指令`v-bind`
 *  2. 使用简化指令  `:`
 *  3. 在绑定的时候，拼接绑定内容：
    
        :title="btnTitle + ', 这是追加的内容'"
    
    **实用实例**
 *  通常，我们会传给`v-bind`一个对象，这样我们可以动态地切换一些属性值，比如绑定Class或者Style，像这样：
    
        // isBlue是布尔值，blue类是否存在取决于isBlue是否为真
        <div :class="{ blue: isBlue }"></div> 
        
        // thisFont是变量，字体大小随thisFont而变化
        <div :style="{ fontSize: thisFont + 'px' }"></div> 
        
        // 当然如果属性多的话，可以这样写
        <div :style="styleBox"></div> 
        // JS
        data () {
            return {
                styleBox: {
                    fontSize: 20px,
                    color: #ccc,
                    ...
                }
            }
        }
    
    **三、事件绑定指令**   **作用：把model动态绑定onclick**
 *   事件绑定机制，除了可以绑定click还可以绑定其他事件
 *  简写：@ 
 *  绑定控件事件到vm
 *  \+ .stop       阻止冒泡     
    \+ .prevent    阻止默认事件  
    \+ .capture    添加事件侦听器时使用事件捕获模式  
    \+ .self       只当事件在该元素本身（比如不是子元素）触发时触发回调  
    \+ .once       事件只触发一次
 *  实例

<div class="inner" @click="div1Handler">
    	      <input type="button" value="戳他" @click.stop="btnHandler">
    	    </div> 
    	
    	    
    	    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
    	
    	    
    	    <div class="inner" @click.capture="div1Handler">
    	      <input type="button" value="戳他" @click="btnHandler">
    	    </div> 
    	
    	    
    	    <div class="inner" @click="div1Handler">
    	      <input type="button" value="戳他" @click="btnHandler">
    	    </div> 
    	
    	    
    	  	 <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

**四、v-model    作用：双向绑定，不再单纯 绑定到view,view的值改变同样会作用于model**

*          唯一双向绑定指令
 *          注意： v-model 只能运用在 表单元素中   input(radio, text, address, email....)   select    checkbox   textarea
    
        1. HTML 代码结构
        
        
        	      <div id="app">
            		<input type="text" v-model="n1">
            		<select v-model="opt">
            		  <option value="0">+</option>
            		  <option value="1">-</option>
            		  <option value="2">*</option>
            		  <option value="3">÷</option>
            		</select>
            		<input type="text" v-model="n2">
            		<input type="button" value="=" v-on:click="getResult">
            		<input type="text" v-model="result">
        		  </div>
        
        
        
        2. Vue实例代码：
        
        
        	// 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
              el: '#app',
              data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '0'
              },
        
              methods: {
                getResult() {
                  switch (this.opt) {
                    case '0':
                      this.result = parseInt(this.n1) + parseInt(this.n2);
                      break;
                    case '1':
                      this.result = parseInt(this.n1) - parseInt(this.n2);
                      break;
                    case '2':
                      this.result = parseInt(this.n1) * parseInt(this.n2);
                      break;
                    case '3':
                      this.result = parseInt(this.n1) / parseInt(this.n2);
                      break;
                  }
                }
              }
            });
    
    **五、v-for和key属性**
 *  迭代数组-**普通数组-对象数组**

*  迭代对象中的属性

<div v-for="(val, key, i) in userInfo">值是： {
       { val }} --- 键是： {
       {key}} -- 索引： {
       {i}}</ div>

*  迭代数字---count从1开始

*  2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。

**六、`v-if`和`v-show`**

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。