VUE指令

vue实例

import Vue from 'vue'; // 引入vue构造函数
import App from './App';

// 实例化vue
new Vue({
    el: "#root",  // => 绑定指定标签后，其标签便由Vue对象接管,该标签即为该Vue实例的挂载点
    render: h => h(App) // 渲染函数，将指定的模板传入（可以说是vue的入口）
});

创建.vue文件

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据

插值语法

1. 文本插值
   1.1(双大括号) 的文本插值：

   无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
   2. v-text指令

<h1>{{msg}}</h1>
<h1 v-text="msg"></h1>

2. v-once指令

   使用 v-once 指令，只能执行一次性地插值，当数据改变时，插值处的内容不会更新

 <h2 v-once>{{msg}}</h2>

3. v-html指令

   识别HTML，更新元素的 innerHTML
   不识别vue组件

<h3 v-html="smHtml"></h3>

4. v-show

   根据表达式之真假值，切换元素的 display CSS 属性
   v-show 的元素始终会被渲染并保留在 DOM 中

5. v-if

   根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建
   如果元素是 <template> ，将提出它的内容作为条件块

6. v-else 与 v-else-if

   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面

7. v-for

   基于源数据多次渲染元素或模板块
   就地复用策略
   简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
   为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
   key属性的类型只能为 string或者number类型
   主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素
   有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

> 会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致

<li v-for="(item, key) in list" :key="key">{{item}}</li>
<li v-for="(item, key) of list" :key="key">{{item}}</li>
<li v-for="(name, age, index) in obj" :key="index">{{name}} {{age}} {{index}}</li>

8. v-on

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

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

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

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

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

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

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

组件上定义的事件

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

9. v-bind
   -缩写 :
   • .camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

10 v-model
1. 数据的双向绑定
它负责监听用户的输入事件以更新数据
> 会忽略所有表单元素的 value、checked、selected
> 特性的初始值而总是将 Vue 实例的数据作为数据来源

2. 修饰符：
    .lazy - 取代 input 监听 change 事件
    .number - 输入字符串转为有效的数字
    .trim - 输入首尾空格过滤

3. 表单控件及组件
    <input>
        在checkbox中： 多个复选框，会绑定到一个数组中
    <select>
    <textarea>
    components

4. v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
    text 和 textarea 元素使用 value 属性和 input 事件
    checkbox 和 radio 使用 checked 属性和 change 事件
    select 字段将 value 作为 prop 并将 change 作为事件

<div id='example-3'>
  <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>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>


<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

data() {
    return {
        checked: true,
        message: '',
        selected: 'A',
        options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
        ]
    }
}