vue实例、模板语法

目标大纲
- 实例创建
- 实例生命周期
- 实例的数据与方法
- 模板中指令的方法（内部指令、自定义指令）

一、Vue实例

1. 创建实例

var vm = new Vue({
    //options
})

1. 挂载元素
   el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。

   例如想要在id为myapp的div上使用vue实例
   <div id="myapp"></div>
   则需要在刚才创建的vue实例上添加el选项配置
   el:"#myapp"
vm这个vue实例则会应用在这个div上

2. 数据
   绑定完元素之后，传入数据可以帮助我们改变视图的渲染，data同样作为一个配置项，写在刚创建的vue实例里

var vm = vue({
    el:"#myapp",
    data:{
        a:1,
        b:2
    }
})

data也可以提取出来用,是可以同步更新的

var myData={
    a:2,
    b:''
}
vm=new Vue({
    data:myData
})
vm.a===data.a;
//myData里的a 和vm 里 data 的a 是同步的
//但是如果是新添的属性，则不会同步和触发视图更新(？存疑)

• 生命周期

• created
• mouted
• updated
• destroyed

二、模板

在你绑定的元素上，创建了实例和有了数据以后，就可以使用模板来展现和更新渲染你的数据

模板使用mustache语法，为双大括号

<div id=“myApp”>
{{a}}
{{b}}
{{c}}
</div>

• 常见模板使用及分类
  1.普通

{{msg}}

2.使用JS表达式
只能使用单个表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

三、指令

• 常用指令

  • 模板指令

    v-html
    v-text

  • 事件指令

    v-bind

  • 属性指令

    v-on

  • 条件指令

    v-if、v-else、v-else-if
    v-show

  • 循环指令

    v-for

  • 双向绑定指令

    v-model
    在表单控件或者组件上创建双向绑定
    限制：input select textarea components
    修饰符：.lazy .number .trim

  • 其他

    v-pre 不编译 直接输出
    v-cloak 解决刷新或加载出现闪烁
    v-once 只渲染一次，被视为静态内容

• 指令修饰符

  .stop
  .prevent
  .capture
  .self

• 指令缩写
  v-bind :
  v-on @

• 自定义指令
  directive
  钩子函数

• 特殊特性

  key ref slot is

links
生命周期

PPT大纲

• 创建实例
  
  • 实例属性
  • 实例方法
  • 实例选项
    
    • DOM
      
      • el
        -数据
      • data
    • 生命周期钩子
      beforeCreate
      created
      beforeMount
      mounted
      beforeUpdate
      updated
      activated
      deactivated
      beforeDestroy
      destroyed
• 模板语法
  
  • 插值
  • 模板指令
    
    • 常用指令
    • 自定义指令

PPT

创建实例

实例具有实例选项、实例属性和实例方法
实例选项列表图（分类）

选项/DOM
主要讲el、data:el
选项/数据:data
选项/生命周期钩子

指令

指令表格
1. 指令构成
- 参数
-
- 修饰符
2. 常用指令（含指令缩写）
3. 自定义指令
简介
钩子函数
钩子函数参数
函数简写
对象字面量