Vue实例

• 注意 1：推荐在创建实例之前，就声明所有的根级响应式属性
• 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg
  • vm.$data.msg === vm.msg

var vm = new Vue({  data: {    msg: '大家好，...'  }})vm.$data.msg === vm.msg // true复制代码

数据绑定

• 最常用的方式：Mustache，也就是 {
  {}} 语法
• 解释：{
  {}}从数据对象data中获取属性
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{
  {}}中允许使用JavaScript支持的所有表达式
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

Hello, {
   { msg }}.
{
   { 1 + 2 }}
{
   { isOk ? 'yes': 'no' }}
    
复制代码

指令

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用指令

• v-text
• v-html
• v-bind

v-text

• 解释：更新元素的 textContent

复制代码

v-html

• 解释：更新元素的 innerHTML

复制代码

v-bind

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

    
    复制代码

v-on

• 作用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 简写：@click="say"
• 说明：绑定的事件从methods中获取
• 案例：跑马灯

    
    复制代码

    
    
     浪起来    
     安静    
     
  
    
    复制代码

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认事件，调用 event.preventDefault()
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

v-model

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 案例：计算器

Message is: {
   { message }}
复制代码

    
    
         
           +      -      *      /        
         
     =    
       
    
    复制代码

v-for

• 作用：基于源数据多次渲染元素或模板块

    
    
       {
   { item.text }}
    
    
{
   {item}} -- {
   {index}}
    
{
   {item}} -- {
   {key}}
{
   {item}}
复制代码

key属性

• 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
• 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

    
  
     
    
复制代码

样式处理 -class和style

• 说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可
• 表达式的类型：字符串、数组、对象
• 语法：

    
    
 ===>
    
    
    
 ===>
    
    
    
 ===>
    
--- style ---
    
    
    
    
复制代码

v-if 和 v-show

• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

提升性能：v-pre

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

{
   { this will not be compiled }}复制代码

提升性能：v-once

• 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

This will never change: {
   {msg}}复制代码