vue指令

 

指令	用法
v-if v-else-if v-else	<div id="app">                      <p v-if="show">显示这段文本</p>                      <p v-if="state==1">当state为1时显示该行</p>                      <p v-else-if="state==2">当state为2时显示该行</p> 判断多个元素时可以使用vue的内置元素<template>，最终渲染时不会包含该元素 切换时出现复用标签问题加key属性:input标签中的值不会被清空加上key，key的值是唯一的                      <p v-else>否则显示该行</p>                      <template v-if="type=='a'">                             <label name="a"></label>                             a:<input key="a-input">                       </template>                      <template v-if="type=='b'">                             <label name="b"></label>                             b:<input key="b-input">                       </template>                      <button @click="typeclick">切换</button>               </div>               <script>                      var app = new Vue({                             el: '#app',                             data: {                                    show: true,  //为false不显示                                    state: 1,                                    type:'a'                             },                             methods:{                                    typeclick:function(){                                           this.type=this.type=='a'?'b':'a';                                    }                             }                      })        </script>
v-show	与v-if用法相同，区别是这个是控制显示隐藏的，无法使用<template>

 

v-bind:href	<a v-bind:href="url">链接</a> <a :href="url">链接</a>  <!--缩写为-->
v-bind:src	<img v-bind:src="imgurl"> <img :src="imgurl">  <!--缩写为--> <img :src="'/images/' + imgurl">  <!-- 内联字符串拼接 --> data: {     url: "https://www.cnblogs.com/fanningwen/",     imgurl: https://www.cnblogs.com/fanningwen/img.png }
v-bind:class	<div id="app"> <div class="state" :class="{ active: isActive ,'error':isError}"></div> <div :class="[classA, classB]"></div>  <!--绑定数组,数组中也可以放三元运算--> <div :class="[classA, { active: isActive ,'error':isError}]"></div> <div :class="classes"></div> </div> <script>                      var app = new Vue({                             el: '#app',                             data: {                                    isActive: true,                                    isError: false,                                    classA: 'active',                                    classB: 'error'                             },                             computed: {                                    classes: function() {                                           return 'bin';                                    }                             }                      }) </script>
v-bind:style	<div :style="{ fontSize: size + 'px' }"></div> <div :style="styles"></div> data: {     size: 16,     styles: {color: 'red', fontSize: '16px'} }
其它对象	<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> data: {     someProp:'idActive',     otherProp:'otherProp' }

 

v-for

<ul id="app">                      <li v-for="item in item1s">{{ item }}</li>                      <template v-for="item in items">  <!--in可以替换为of-->                             <li>{{ item.name }}</li>                             <li>{{ item.text }}</li>                      </template>                      <li v-for="(item,index) in items">{{index}}{{ item.name }}</li>                      <li v-for="(item,key,index) in item1s">{{index}}{{key}}{{ item }}</li>                      <!--迭代整数-->                      <li v-for="n in 10">{{n}}</li>               </ul>               <script>                      var app = new Vue({                             el: '#app',                             data: {                                    item1s:{name: '名字',text: '内容'},                                    items: [                                    {name: '名字1',text: '内容1'},                                    {name: '名字2',text: '内容2'},                                    ]                             }                      })               </script>

 

v-on:click

<div id="app">                      <button v-on:click="counter++"></button>                      <button @click="counter++"></button>{{counter}} <!--缩写为-->                      <button @click="clickk('禁止点击',$event)"></button>               </div>               <script>                      var app = new Vue({                             el: '#app',                             data: {                                    counter: 0                             },                             methods: {                                    clickk: function(message, event) {                                           event.preventDefault()                                           alert(message)                                    }                             }                      })               </script>

事件修饰符（按键修饰符在教程中看）

<a @click.stop="doThis"></a>	阻止单击事件继续传播
<form @submit.prevent="onSubmit"></form>	提交事件不再重载页面
<a @click.stop.prevent="doThat"></a>	修饰符可以串联
<form @submit.prevent></form>	只有修饰符
<div @click.capture="doThis">...</div>	添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div @click.self="doThat">...</div>	在该元素本身时触发，不包括子元素
<a v-on:click.once="doThis"></a>	点击事件将只会触发一次

 

v-model	<input v-model="message" placeholder="请输入">   <!--textarea同样生效--> <p>输入的内容是: {{ message }}</p> data: {   message: ""  }
单选按钮	<label><input type="radio" value="One" v-model="picked">One</label> <label><input type="radio" value="Two" v-model="picked">Two</label> <span>选择的项是: {{ picked }}</span> data: {   picked: ""  }
复选框	<label><input type="checkbox" value="Jack" v-model="checkedN">Jack</label> <label><input type="checkbox" value="John" v-model="checkedN">John</label> <label><input type="checkbox" value="Mike" v-model="checkedN">Mike</label> <span>选择的项是: {{ checkedNames }}</span> <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"> <!--选中时toggle为yes，否则为no（定义的属性选中什么是什么）--> data: {   checkedNames: []  }
选择框	<select v-model="selected" multiple>   <!--不加multiple属性为单选-->        <option>A</option>        <option>B</option> </select> <span>选择的项是: {{ selected }}</span> data: {   selected: []   //单选时[]变为"" }
.lazy	<input v-model.lazy="msg" >  不会实时改变了，在失焦或按回车时才会改变
.number	<input v-model.number="age" type="number">   会转换为数字类型
.trim	<input v-model.trim="msg">   过滤首尾空白字符

 

v-html	<div v-html="html"></div>   插入HTML是使用
v-text	<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>
v-pre	<span v-pre>{{这里不会被编译}}</span>   想输出{{}}即可使用
v-once	只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。