Vue 指令入门学习

Vue 指令

v-text(string)

防止 {{}} 出现在页面上

<div v-text="aaa"></div>

let vm= new Vue({
  el:'#app',
    data:{
      aaa:'hello'
    }
})

v-html(string)

双大括号方式会将数据解释为纯文本，而非 HTML 。使用v-html 可以输出真正的 HTML ,等于 js 中的 innerHTML 属性。

<div v-html="html"></div>

这个 div 中的内容会替换成属性值 html，直接作为 HTML 渲染。

v-show(any)

显示与隐藏，条件渲染指令。
v-show 只是简单的切换元素的 CSS 属性 display

<div id="box">
  <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>

new Vue({
  el: "#box",
    data(){
      return {
        show: true
      }
    }
})

v-if(any)

<h1 v-if="ok">ok</h1>
<h1 v-else>no</h1>

在想切换多个元素时，使用 <template> 包裹，并且最终渲染结果不包含 <template>

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

前面要有 v-if 或 v-else-if ,为他们添加 “else 块”

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if(any)

前面要有 v-if 或 v-else-if ,表示 v-if 的 “else if 块” ，可链式调用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for（ Array | Object | number |）

v-for 循环与 for..in 循环相似
基于源数据多次渲染元素或模版块，语法 item in items 特殊语法

• 用 v-for 把一个数组对应为一组元素

<p id="wantuizhijia">
  <ol>
    <li v-for="site in sites">
    {{ site.name }}
    </li>
  </ol>
</p>

new Vue({
  el: '#wantuizhijia',
    data: {
      sites: [
        { name: '网推之家' },
        { name: '谷歌' },
        { name: '淘宝' }
      ]
    }
})

运行结果：

• 网推之家
• 谷歌
• 淘宝

• 一个对象的 v-for

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
    data: {
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    }
})

运行结果：
0.firstName：John
1.lastName：Doe
2.age: 30

• 一段取值范围的 v-for

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

结果：12345678910

v-on(Function | Inline Statement | Object)

• 缩写：@
• 参数：event
• 修饰符：
  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • native - 监听组件根元素的原生事件。
  • once - 只触发一次回调。
  • left - (2.2.0) 只当点击鼠标左键时触发。
  • right - (2.2.0) 只当点击鼠标右键时触发。
  • middle - (2.2.0) 只当点击鼠标中键时触发。
  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-on 指令监听 DOM 事件，并再触发时运行一些 JavaScript 代码

v-bind(any (with argument) | Object (without argument))

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
语法：v-bind:title="msg"

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

    // 2 创建 Vue 的实例对象
var vm = new Vue({
  // el 用来指定vue挂载到页面中的元素，值是：选择器
  // 理解：用来指定vue管理的HTML区域
  el: '#app',
    // 数据对象，用来给视图中提供数据的
    data: {
      url: 'http://www.baidu.com'
    }
})

• 修饰符：
  • .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
  • .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model

v-model 指令会将 message 的值赋予输入框，实现数据双向绑定
输入框改变了会影响数据（Object.defineProperty）

let obj={};
  object.defineProperty(obj,'name',{
  get(){
  return temp["name"]
}
})

get() 取 obj 的 name 属性会触发
set() 给 obj 赋值会触发 get 方法

• 限制：

  • <input>
  • <select>
  • <textarea>
  • components

• 修饰符：

  • .lazy 取代 input 监听 change 事件
  • .number 输入字符串转为有效数字
  • .trim 输入首位空格过滤

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-clock

这个指令保持在元素上直到关联结束编译。和 CSS 规则如 [v-cloak]{display:none} 共用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-clock]{
  display:none;
}

<div v-cloak>
{{message}}
</div>

v-once

值渲染/绑定 一次，当数据再次发生变化，也不会导致页面刷新

<!-- 单个元素 -->
<span v-once>this will never change:{{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>