Vue学习(1)Vue实例和模板语法

前言
开始Vue的学习,主要内容大概仅仅是官方手册的部分内容。主要是作为学习过程中的备忘录,以后可以翻翻快速回忆起Vue的内容。

一、 起步

基础内容

指令

v-bind
v-on:event
v-model
v-for
v-if

组件化构建

a. 简单的创建一个模板

JS代码

Vue.component('todo-item', {
  tempalte:'
  • 这个是例子
  • ' })

    模板

    b. 带传入参数的自定义模板

    JS代码

    Vue.component('todo-item', {
      // todo-item 组件现在接受一个
      prop: ['todo'],
      tempalte: '
  • 这个是例子
  • ' })

    模板

    二、Vue实例

    Vue实例

    每个Vue应用从Vue函数创建一个Vue实例开始

    var vm = new Vue({
       // 选项
       // data: data  传入的数据
    })
    

    Vue实例生命周期钩子

    生命周期钩子:即Vue实例创建过程中,不同阶段被调用的函数。

    如:
    mounted、updated和destroyed。

    生命周期钩子的this上下文指向调用它的Vue实例。

    注意:
    不要再选项属性或者回调上使用箭头函数,如:
    created:() => console.log(this.a)
    vm.$watch('a', newValue => this.myMethod())
    因为箭头函数和父级上下文绑定在一起,this不会指向所预期的Vue实例,导致报错。

    三、模板语言

    插值

    #文本

    "Mustache"语法, {{ 变量名 }}
    html内容会随着变量动态改变。

    指令:v-once,只一次性插值,后续不会随变量动态改变

    #原始HTML

    指令:v-html

    将变量name解析为html内容并替代span的内容。

    #特性

    指令:v-bind
    给html特性绑定变量。

    注意,当变量为假时,id属性不会出现在html元素中(不会被渲染)。

    #使用javascript表达式

    在"Mustache"语法中,可以使用单条avascript语句。

    指令

    #参数

    v-command:arg
    command: 指令
    arg: 参数

    #修饰符

    ...

    缩写

    v-bind:

    
    ...
    
    
    ...
    

    v-for:

    
    ...
    
    
    ...
    

    你可能感兴趣的:(Vue学习(1)Vue实例和模板语法)