一、vue实例

1.创建vue实例

一个vue实例应该通过new Vue来创建根实例,所有的 vue 组件其实都是 vue 实例

var vm = new Vue({
  ...
})

当一个实例被创建时,data对象中的 property 都被加入到vue的响应式系统中,当值发生改变时,试图也会改变

var data = {a: 1}

var vm = new Vue({
  data: data
})

此时在控制台输入vm.a == data.a会返回true,变量data已经被赋给vue实例中的data对象

同时,对两个对象的数据进行操作改变也会影响到另一个

vm.a = 2
// data.a = 2

data.a = 3
// vm.a = 3

当数据改变时,视图也会重新渲染,如果在vue实例被创建后,又添加了一个新的property,则不会被加入到响应式系统中

如果一开始就知道后面会添加一个property,但是一开始不存在或为空,需要设置一些初始值

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTods: fasle,
  todos: [],
  error: null
}

使用Object.freeze()方法的时候,无法修改数据引起视图变化

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

<div id="app">{{message}}</div>

<script>
  var data = {message: 'hello,wolrd'}
  Object.freeze(data)

  var vm = new Vue({
    el: '#app',
    data: data
  })
</script>

在控制台改变vm.message的值会直接报错,因为data对象已经被冻结了,不可改变

vue-learn-2.jpg

vm.$data

代表vue实例观察的数据对象

console.log(vm.$data)
// 返回数据对象的数组形式
var data = { a: 1 }
var vm = new Vue({
  el: '#app',
  data: data
})

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

2.生命周期函数

每个实例在被创建的时候,都要经历一些初始化过程,比如:设置数据监听,编译模板,将实例挂载到dom,更新dom等

在这个过程中会运行一些叫做生命周期的钩子函数,可以在不同阶段添加自己需要的代码

vue-learn-3.png

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

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})
// "a is: 1"

this用来指向vm实例

但是不要在property或者回调上使用箭头函数,created: () => console.log(this.a),因为箭头函数没有this的概念,他会把this当作变量一直向上级作用域查找,经常产生Uncaught TypeError: Cannot read property of undefinedUncaught TypeError: this.myMethod is not a function之类的报错

二、模板语法

1.插值

最简单的就是

<div id="app">{{message}}</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,world'
        }
    })
</script>
</script>

。。。

下面这段代码给input绑定了一个disabled属性,但是通过ok的真伪来控制属性是否渲染

okfasle,null,undefined值时,属性都不会被渲染,有点类似于v-if,但是这种写法只是针对属性

<div id="app">
    <input type="text" v-bind:disabled="ok">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd',
            ok: false
        }
    })
</script>

在模板语法中还可以使用javascript表达式

<div id="app">
    <div>{{number + 1}}</div>
    <div v-bind:id="'list-' + id"></div>
    <div>{{message.split('').reverse().join('')}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            number: 2,
            id: 'li',
            message: 'hello,wolrd'
        }
    })
</script>

每个模板只能包含一个javascript表达式,如果有多个,则不会生效

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

2.指令

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind指令可以用于响应式地更新 HTML attribute:

<div id="app">
    <a v-bind:href="url">百度</a>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

在这里href是参数,告知v-bind指令将该元素的hrefattribute 与表达式url的值绑定

另一个例子是v-on指令,它用于监听dom事件

<a v-on:click="doSomething">...</a>

动态参数

从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<!--注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。-->
<a v-bind:[attributeName]="url">...</a>

这里的attributeName会被作为一个javascript表达式进行动态求值,最终结果被作为参数来使用

比如:vue实例中有一个attributeName属性其值为href,则这个绑定将等价于v-bind:href

<a v-bind:href="url>...</a>

也可以使用动态的事件名绑定监听函数

<a v-on:[eventName]="doSomething"> ... </a>

如果eventName值为click,则该绑定等价于v-on:click="doSomething",一个鼠标点击事件

<green>对动态参数的值的约束</green>

动态参数预期会求出一个字符串,异常情况下值为null,这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

<green>对动态参数表达式的约束</green>

动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的,例如:

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

因此,尽量不要使用空格和引号的表达式,或者采用计算属性来替代这种复杂表达式

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写

修饰符

修饰符是以.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定,例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preentDefault()

<form v-on:submit.prevent="onSubmit">...</form>

3.缩写

v-前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v-前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v-前缀也变得没那么重要了。因此,Vue 为v-bindv-on这两个最常用的指令,提供了特定简写

v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同,但:@对于 attribute 名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。