模版

模版语法

<div id="app">
  <!-- 这里就会展示data.msg的内容 加载的时候会出现闪烁问题(v-cloak能够解决) -->
  <div>{{msg}}</div>
  <!--元素中间的内容不展示 没有数据加载闪烁问题-->
  <div v-text="msg">这里将会被覆盖掉</div>
  <!--可以进行简单的计算-->
  <div v-text="msg+msg"></div>
  <!-- HTML 插值  将rawHtml插入到div的子元素  容易导致 XSS 攻击绝不要对用户提供的内容使用插值-->
  <div v-html="rawHtml"></div>
  <!-- v-html 和 v-text 谁在后面将会展示谁的指令内容 -->
  <div v-html="rawHtml" v-text="msg">这里将会展示msg的内容</div>
  <!-- 使用 JavaScript 表达式 -->
  <div>{{ number + 1 }}</div>
  <div>{{ ok ? 'YES' : 'NO' }}</div>
  <div>{{ msg.split('').reverse().join('') }}</div>
</div>

 <script>
   var vm = new Vue({
     el: '#app',
     data: {
       msg: 'message',
       ok: true
       rawHtml: '<h1>hello world<h1>',
     },
   });
 </script>

指令

v-bind

与v-text和v-html不同它俩是针对标签中的内容，v-bind 是针对标签中的属性

  <!-- 完整语法 -->
  <a v-bind:href="url" v-bind:title="title">链接</a>
  <!-- 缩写 -->
  <a :href="url" :title="title">链接</a>
  <!--使用v-bind绑定一组,这样写的时候不能用缩写-->
  <a v-bind='{title:"跳转到百度",href:"www.baidu.com"}'>链接</a>
  <!--延伸1 -->
  <a v-bind="{title,href:aHref}">延伸1</a>
  <!--延伸2-->
  <a v-bind="attrObj">延伸2</a>
  <!-- 动态参数的缩写 (2.6.0+)  注意编译过程中浏览器会把attribute名全部强制转为小写，因此动态参数命名建议都用小写-->
  <a :[key]="title"> 链接 </a>
  
  <script>
   var vm = new Vue({
     el: '#app',
     data: {
       attrObj: {
         title: "跳转到百度",
         href: "http://www.baidu.com",
       },
       aHref: "http://www.baidu.com",
       title: '点击跳转到百度',
       key: 'title'
     }
   });
 </script>

v-on

用于监听 DOM 事件

<!-- 完整语法 -->
<a v-on:click="doSomething">方法</a>

<!-- 缩写 -->
<!-- 方法处理器:没有括号不支持自定义传参，默认参数为event -->
<a @click="doSomething">方法处理</a>
<!-- 内联处理器中的方法:有括号支持自定义传参，需要传$event作为参数方法才可以获取到访问原始的DOM事件参数event -->
<a @click="doSomething('doSomething',$event)">内联处理</a>

<!-- 动态参数的缩写 (2.6.0+) 和动态属性参数一样，编译过程中浏览器会把attribute名全部强制转为小写，因此动态参数命名建议都用小写 -->
<a @[event]="doSomething"> 动态参数方法 </a>

<a @mouseenter="handleEnter" @mouseleave="handleLeave">鼠标移进移出</a>
<!-- 对象处理 -->
<a v-on="{mouseenter:handleEnter,mouseleave:handleLeave}">对象处理鼠标移进移出</a>
<!-- 多事件处理 先处理完doSomething再处理handleEnter -->
<a @click="doSomething($event),handleEnter($event)">多事件处理</a>

<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      doSomething(e,message) {
        console.log(e);
        console.log(message);
      },
      handleEnter(event) {
        event.target.style.color = 'blue'
      },
      handleLeave(event) {
        event.target.style.color = 'unset'
      },
    }
  });
</script>

事件修饰符

事件修饰符可以解决到点击事件自身带的一些事件效果

• .stop 阻止事件冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 事件只作用本身，如阻止自己身上冒泡行为

• .once 事件只触发一次

• .left 只当点击鼠标左键时触发。

• .right 只当点击鼠标右键时触发。

• .middle 只当点击鼠标中键时触发。

• .passive passive表示listener{ passive: true }永远不会调用preventDefault()`，能够改善滚动性能

<!-- 点击inner只打印 我是内层div -->
<div class="outer" @click="outerClick">
  <div class="inner" @click.stop="innerClick"></div>
</div>
<!-- 点击inner只打印 我是内层div -->
<div class="outer" @click.self="outerClick">
  <div class="inner" @click="innerClick"></div>
</div>
<!-- 点击inner先打印 我是外层div 再打印我是内层div -->
<div class="outer" @click.capture="outerClick">
  <div class="inner" @click="innerClick"></div>
</div>
<!-- 第一次阻止了新窗口打开百度的页面打印 阻止跳转到百度 第二次点击跳转到百度 -->
<a href="http://www.baidu.com"  target="_blank" @click.prevent.once="handleClick">百度</a>
<!-- 也可以不写表达式 -->
<a href="http://www.baidu.com"  target="_blank" @click.prevent>百度</a>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      innerClick() {
        console.log('我是内层div')
      },
      outerClick() {
        console.log('我是外层div');
      },
      handleClick() {
        console.log('阻止跳转到百度');
      }
    }
  });
</script>

按键修饰符

<!-- Ctrl + C -->
<input v-on:keyup.ctrl.67="doSomething">
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="doSomething">Do something</button>
<!-- 鼠标点击+有且只有 ctrl  被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">onCtrlClick</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="doSomething">Do something</button>
<!-- 只有点击鼠标左键才触发事件，类似的还有.right右键.middle中键 -->
<button v-on:click.left="doSomething">

v-text

类型：string

  <!--元素中间的内容不展示 没有数据加载闪烁问题-->
  <div v-text="msg">这里将会被覆盖掉</div>

v-html

类型：string

  <!-- HTML 插值  将rawHtml插入到div的子元素  容易导致 XSS 攻击绝不要对用户提供的内容使用插值-->
  <div v-html="rawHtml"></div>

v-show

类型：boolean

 <!-- v-show 不管初始条件是什么，元素总是会被渲染只是简单地切换元素的CSS property display 适合涉及到频繁的切换 -->
 <div v-show="msg"></div>

v-if

类型：boolean

 <!-- v-if 是决定是否渲染元素元素，可配合v-else-if、v-else使用，可用在<template>作为条件块-->
 <div v-show="msg"></div>

v-for

类型：Array | Object | number | string | Iterable (2.6 新增)

<div  v-for="item in items"></div>
<div  v-for="(item, index) in items">{{val}}-{{index}}</div>
<div  v-for="(val, key) in object"></div>
<div  v-for="(val, name, index) in object">{{val}}-{{key}}-{{index}}</div>
<div  v-for="item  in 10"></div>
<!-- for...of循环，是作为遍历所有数据结构的统一的方法 可以遍历数组、Set 和 Map 结构类似数组的对象 Generator 对象，以及字符串。不过 Vue 2.x 目前并不支持可响应的 Map 和 Set 值-->
<div v-for="item of iterable" :key="item">{{item}}</div>

v-model

用户表单元素的双向绑定

修饰符

• .lazy 失去焦点同步一次，相当于change 事件之后进行同步

• .number 输入字符串转为有效的数字

• .trim 去除首尾空格

<input type="text" v-model="msg" />
<!-- 在change事件时更新 -->
<input v-model.lazy="msg">

原理

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；

• checkbox 和 radio 使用 checked property 和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 构造一个伪v-model -->
<div id="app">
  <input type="text" v-on:input="handleInput" :value="msg" />
  {{msg}}
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "",
    },
    methods: {
      inputHandle(event) {
        this.msg = event.target.value;
      },
    },
  });
</script>

v-pre

<!-- {{}}不编译，输出字符串{{msg}} -->
<div v-pre>{{msg}}</div>

v-cloak

<!-- 解决{{}}语法闪烁问题 -->
<style>
  [v-cloak] {
     display: none;
  }
</style>
<div v-cloak>{{msg}}</div>

Class与Style样式绑定

对象语法

<!-- class -->
<!-- 内联写法 -->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 非内联写法 -->
<div class="static" :class="classObject1"></div>
<!-- 结果都是 <div class="static active"></div> -->

<!-- 计算属性绑定方式 常用且强大的模式 -->
<div :class="classObject2"></div>
<!-- 结果<div class="active"></div> -->

<!-- 内联样式 -->
<div :style="{ color: color, fontSize: fontSize + 'px', backgroundColor: '#fff' }"></div>
<!-- 结果<div style="color: red, font-size: 16px; background-color: #fff"></div> -->
<!-- 绑定样式对象 -->
<div :style="styleObject"></div>

数组语法

<div :class="[activeClass, errorClass]"></div>
<!-- 结果<div class="active text-danger"></div> -->
<!-- 三元表达式 -->
<div :class="[isActive ? 'active' : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>
<!-- 结果都是<div class="active text-danger"></div> -->

<div :style="[styleObject, {backgroundColor: '#fff'}]"></div>
<!-- 结果<div style="color: red, font-size: 16px; background-color: #fff"></div> -->
<!-- 多重值2.3.0+ -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', '-webkit-flex', 'flex'] }"></div>
<!-- div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
} -->

data: {
  // class绑定属性
  isActive: true,
  hasError: false,
  classObject1: {
   active: true,
   'text-danger': false
  },
  isActive: true,
  error: null,
  activeClass: 'active',
  errorClass: 'text-danger',
  // 绑定样式属性
  color: 'red',
  fontSize: 30,
  styleObject: {
   color: 'red',
   fontSize: '16px'
  }
}
computed: {
  classObject2: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error
    }
  }
}