Vue常用指令

Posted 2021-12-06 ProChick

常用指令

• • • 1.v-text
    • 2.v-html
    • 3.v-show
    • 4.v-if
    • 5.v-else
    • 6.v-else-if
    • 7.v-for
    • 8.v-on
    • 9.v-bind
    • 10.v-model
    • 11.v-slot
    • 12.v-pre
    • 13.v-cloak
    • 14.v-once

1.v-text

设置元素的 textContent。

<span id="app" v-text="msg"></span>

var vm=new Vue({
    el:"#app",
    data:{
    	msg:"文本内容"
    }
})

2.v-html

设置元素的 innerHTML，会被HTML所解析

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

<div id="app" v-html="myHtml"></div>

var vm=new Vue({
    el:"#app",
    data:{
    	myHtml:"<p>xxx</p>"
    }
})

3.v-show

根据表达式真假，切换标签元素的 display 属性来改变元素的显示状态。

<div id="app" v-show="sex == '男'"></div>

var vm=new Vue({
    el:"#app",
    data:{
    	sex: "女"
    }
})

4.v-if

根据表达式真假，操纵DOM元素来改变元素的显示状态

<div id="app" v-if="role == 'admin'"></div>

var vm=new Vue({
    el:"#app",
    data:{
    	role: "admin"
    }
})

5.v-else

不需要表达式，和v-if搭配使用

<div v-if="isOdd == true">是奇数</div>
<div v-else>是偶数</div>

6.v-else-if

需要表达式，和v-if搭配使用

<div v-if="socre >= 80">优秀</div>
<div v-else-if="socre >= 60">及格</div>
<div v-else>不及格</div>

7.v-for

循环遍历数组元素、对象，进行列表渲染

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

<div v-for="(item,index) in objects">
  {{index}}-{{ item.name }}-{{ item.age }}
</div>

var vm=new Vue({
    el:"#app",
    data:{
    	objects: [
    		{ name:'zhangsan',age:18 },
    		{ name:'lisi',age:20 }
    	]
    }
})

8.v-on

为元素绑定事件。

用在普通元素上时，只能监听原生 DOM 事件。

用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

缩写形式：@

• 无参函数

<button id="app" v-on:click="example"></button>
<button id="app" @click="example"></button>

var vm=new Vue({
    el:"#app",
    methods:{
        example:function(){
        	alert('点击事件')
        }
    }
})

• 有参函数

  <button id="app" v-on:click="example('hello')"></button>
  <button id="app" @click="example('hello')"></button>
  
  var vm=new Vue({
      el:"#app",
      methods:{
          example:function(arg){
          	alert(arg)
          }
      }
  })
  

• 参数和Dom对象

  <button id="app" v-on:click="example('hello',$event)"></button>
  <button id="app" @click="example('hello',$event)"></button>
  
  var vm=new Vue({
      el:"#app",
      methods:{
          example:function(arg,event){
          	alert(arg);
              if (event) {
                  alert(event.target.tagName);
              }
          }
      }
  })
  

• 事件修饰符

  • .stop（阻止事件冒泡）

    <div @click="myMethod1">
        #先触发myMethod2，再触发myMethod1
        <button type="button" @click="myMethod2">点击1</button>
    	#只触发myMethod2
    	<button type="button" @click.stop="myMethod2">点击2</button>
    </div>
    
    let vm=new Vue({
        methods:{
            myMethod1:function(){
                console.log('方法1');
            },
            myMethod2(){
                console.log('方法2');
            }
        }
    })
    

  • .prevent（阻止默认事件行为）

    #不发生跳转
    <a href="#" @click.prevent></a>
    #发生跳转
    <a href="#"></a>
    

  • .capture（事件捕获）

    #先触发myMethod1，再触发myMethod2
    <div @click.capture="myMethod1">
        <button type="button" @click="myMethod2">点击</button>
    </div>
    

  • .self（将事件绑定到自身,只有自身才能触发）

    #点击div只触发myMethod1
    <div @click.self="myMethod1">
        <button type="button" @click="myMethod2"></button>
    </div>
    

  • .once（事件只会被触发一次）

    <div>
        <button type="button" @click.once="myMethod1">点击</button>
    </div>
    

9.v-bind

动态地为元素绑定属性

缩写形式：:

• src 属性

  <img v-bind:src="imageSrc">
  <img :src="imageSrc">
  

• class 属性

  <div :class="{ red == true ? red : '' }"></div>
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
  

• style 属性

  <div :style="{ fontSize: fontsize}"></div>
  <div :style="[style1, style2]"></div>
  

• 属性组

  <div v-bind="{ id: myId, title: myTitle }"></div>
  

10.v-model

在表单控件或者组件上创建数据的双向绑定，获取或设置表单元素的值

• input文本标签

  <input type="text" v-model="message">
  <p>{{ message }}</p>
  

• textarea文本域标签

  注意：{{ text }}不会生效

  <textarea v-model="message"></textarea>
  <p>{{ message }}</p>
  

• input单选框

  <div id="app">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>{{ picked }}</span>
  </div>
  

• input复选框

  <div id="app">
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      
      <span>{{ checkedNames }}</span>
  </div>
  
  <!-- 如果不给value值，则toggle为true或false -->
  <input type="checkbox" v-model="toggle">
  

• select选择框

  <div id="app">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>{{ selected }}</span>
  </div>
  

• 修饰符

  • .lazy

    <!-- 在发生回车或失去焦点等事件之后，再进行数据同步 -->
    <input v-model.lazy="msg" type="text">
    

  • .number

    <!-- 将输入值转为数值类型 -->
    <input v-model.number="age" type="number">
    

  • .trim

    <!-- 去除首尾空白字符 -->
    <input v-model.trim="message" type="text">
    

11.v-slot

vue插槽指令

12.v-pre

跳过元素和它的子元素的编译过程

<span id="app" v-pre>{{ msg }}</span>

13.v-cloak

等待元素和它的子元素的编译过程

<span id="app" v-cloak>{{ msg }}</span>

14.v-once

元素只会被渲染一次，不会被更改

<span id="app" v-once>{{ msg }}</span>