坚持日更的路上
坚持日更的路上

d6-d7-d8vue基础知识学习【官网】

vue 学习

CDN

一. Vue 实例

1.1 创建一个 Vue 实例

每一个Vue应用都是通过Vue函数创建一个新的 Vue 实例开始的

    var vm = new Vue({
     //选项
    })

vm ViewModel 之缩写
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

    根实例
    └─ TodoList
       ├─ TodoItem
       │  ├─ DeleteTodoButton
       │  └─ EditTodoButton
       └─ TodoListFooter
          ├─ ClearTodosButton
          └─ TodoListStatistics

1.2 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值

    // 我们的数据对象
    var data = { a: 1 }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      data: data
    })
    
    // 获得这个实例上的属性
    // 返回源数据中对应的字段
    vm.a == data.a // => true
    
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // => 2
    
    // ……反之亦然
    data.a = 3
    vm.a // => 3

当这些数据改变时，视图会进行重渲染
==值得注意的是 只有当实例被创建时就已经存在于 data 中 的属性才是响应式的==
比如

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，==但是一开始它为空或不存在，那么你仅需要设置一些初始值---先占位==比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

这里唯一的例外是使用 Object.freeze()，==这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。==

    var obj = {
      foo: 'bar'
    }
    
    Object.freeze(obj)
    
    new Vue({
      el: '#app',
      data: obj
    })
    

      
{{ foo }}

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

1.3 生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

生命周期图示:

graph TD
A[new_Vue/新建Vue实例] --> B[初始化-事件&生命周期]
B-->|beforeCreate|C[初始化-注入&校验]
C -->|created|D{是否指定-el-选项?}
D -->|否|E[当调用vm.$mount函数时使用]
D-->|是|F{是否指定-template-选项?}  
E-->F
F-->|是|G[将template编译到render函数中<即渲染>]
F-->|否|H[将el外部的HTML作为template编译]
G-->|beforeMount|I[创建vm.$el 并用其替换]
H-->|beforeMount|I
I-->|mounted|J((挂载完毕))
J-->|当data被修改时|N[虚拟DMO重新渲染并应用更新]
N-->|当data被修改时|J
J-->|当调用vm.$destroy|K[解除绑定,销毁子组件以及时间监听器]
K-->L((销毁完毕))
L-->M[destroyed]

二.模板语法

2.1 插入值

2.1.1 文本

Mustache 语法(双大括号)

Message : {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
若果不想被多次修改,可以使用 指令 ==v-once==

这个将不会改变: {{ msg }}

2.1.2 原始HTML

双大括号传入的数据会被解释成为普通文本,而非HTML代码,为了输出纯正的 HTML ,需要使用 v-html指令.

Using mustaches: {{ rawHtml }}


Using v-html directive:

当传参数 (This should be red. ) 给{{ rawHtml }}后,渲染为:

Using mustaches: This should be red. ## Mustache 插入值 接受输出为文本
Using v-html directive: This should be red. ## v-html 接受的是html代码,并编译渲染

这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。

==注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。==

2.1.3 Attribute(特性)

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

==v-bind== 是将

标签中的某些属性与Vue实例中的数据相关联,比如:

1.  #id标签==固定为head==,后续在css中或者js中调用
2.
#id标签 为动态变化,

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的