Vue基本指令

带特殊前缀的HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：<div v-text="message"></div>；这里的 div 元素有一个 v-text 指令，其值为message；Vue.js会让该div的文本内容与 Vue实例中的 message 属性值保持一致。
Directives可以封装任何DOM 操作。比如v-attr 会操作一个元素的特性；v-repeat会基于数组来复制一个元素；v-on会绑定事件等。

Vue.js提供了不少常用的内置指令，接下来我们快速搞定它们，这对我们接下来的开发帮助很大。主要有：

  • v-once指令
  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-model指令
  • v-on指令
  • v-bind指令

如果需要了解其它指令，可以进入 官网

v-if：

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：

<div id="example-2">
  <p v-if="greeting"></p>
</div>

<script type="text/javascript">
  var exampleVM2 = new Vue({
    el:'#example-2',
    data:{
      greeting:true
    }
  })
</script>

由于v-if是一个指令，需要将它添加到一个元素上。但是如果想要切换多个元素，则可以把<template>元素当做包装元素，并在其上使用v-if，最终的渲染结果不会包含它。代码如下：

<div id="example-2">
  <template v-if="greeting">
    <h1>Title</h1>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </template >
</div>

<script type="text/javascript">
  var exampleVM2 = new Vue({
    el:'#example-2',
    data:{
      greeting:true
    }
  })
</script>

v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"如图所示：

v-show和v-if的区别：

  • v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。

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

v-else

v-else就是JavaScript中的else的意思，它必须跟着v-if或者v-show使用。如下代码：

<div id="example">
  <p v-if="ok">我是对的</p>
  <p v-else="ok">我是错的</p>
</div>
<script type="text/javascript">
  var exampleVM2 = new Vue({
    el:'#example',
    data:{
      ok:false
    }
  })
</script>

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下:

<div id="example">
  <form>
    <input type="text" v-model="data.name" placeholder="姓名"/>
    <br/>
    <input type="radio" id="one" value="One" v-model="data.sex"/>
    <label for="man">男</label>
    <input type="radio" id="two" value="Two" v-model="data.sex"/>
    <label for="male">女</label>
    <br/>
    <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
    <label for="jack">阅读</label>
    <input type="checkbox" id="john" value="awim" v-model="data.interest"/>
    <label for="john">游泳</label>
    <input type="checkbox" id="move" value="game" v-model="data.interest"/>
    <label for="move">游戏</label>
    <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
    <label for="mike">唱歌</label>
    <br/>
    身份：
    <selecrt v-model="data.identity">
      <option value="teacher" selected>教师</option>
      <option value="doctor" selected>医生</option>
      <option value="lawyer" selected>律师</option>
    </select>
  </form>
</div>
<script type="text/javascript">
  new Vue({
    el:'#example',
    data:{
      data:{
        name:'',
        sex:'',
        interest:[],
        identity:''
      }
    }
  })
</script>
  • 除了以上用法，在v-model指令后面还可以添加多个参数（number、lazy、debounce）。

1.number

如果想要用户的输入自动转换为Number类型（如果原值的转换结果为NAN，则返回原值），则可以添加一个number特性。

2.lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。代码如下：

<div id="example">
  <input v-model="msg" lazy style="width:500px">
  <br/>
  {{msg}}
</div>
<script type="text/javascript">
  new Vue({
    el:'#example',
    data:{
      msg:'内容是在change事件后才改变的~'
    },
    watch:{}
  })
</script>

3.debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送ajax请求），那么它较为有用。

<input v-model="msg" debounce="5000"/>

v-for

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。
该指令之值，必须使用特定的语法(item,index) in items, 为当前遍历元素提供别名。v-for的优先级别高于v-if之类的其他指令

<div id="example">
  <ul>
    <li v-for="item of items" class="item-{{$index}}">
      {{$index}} - {{parentMessage}} - {{item.msg}}
    </li>
  </ul>
</div>
<script type="text/javascript">
  new Vue({
    el:'#example',
    data:{
      parentMessage:'滴滴',
      items:{
        {mag:'顺风车'},
        {mag:'专车'},
      }
    },
  })
</script>

v-for也支持整数

<div>
  <span v-for="n in 10">{{n}}</span>
</div>

或者

<div>
  <span v-for="n in 10">{{$index}}</span>
</div>

v-once

执行一次性地插值，当数据改变时，插值处的内容不会更新

<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
  <p>可以改变：{{msg}}</p>
  <p v-once>不可以改变：{{msg1}}</p>
</div>
<script type="text/javascript">
  var app = new Vue({
    el:'#app',  // element
    data:{
      msg:'Hello Vue!',
      msg1:'Hello Vue!'
    },
  })
</script>
</body>
</html>

v-on

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

  • .stop - 调用 event.stopPropagation()；停止冒泡。
  • .prevent - 调用 event.preventDefault();停止监听原生事件。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .once - 触发一次。

使用手法：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
  el:'#example',
  data:{
    name:'vue.js',
  },
  //在methods对象中定义方法
  methods:{
    greet:function(event){
      // 方法内this指向vm
      alert('Hello' + this.name + '!')
      //event是原生DOM事件
      alert(event.target.tagName)
    }
  }
})
// 也可以在JavaScript代码中调试方法
vm.greet(); // ->'Hello Vue.js!'

v-bind

动态地绑定一个或多个特性，或一个组件prop到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

  • v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"

  • :class="{ red: isRed }" 或 :class="[classA, classB]"

  • :style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]"

  • 绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

  • 语法结构：v-bind:argument="expression"

因为Mustache不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl等多种编程语言中。

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写-->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disablad="someDynamicCondition">Button</button>

<!-- 完整语法 -->
<button :disablad="someDynamicCondition">Button</button>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。