Vue入门

Posted Dear_Mr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue入门相关的知识，希望对你有一定的参考价值。

Vue实例

构造器

每个Vue.js应用都是通过构造函数vue创建一个Vue的根实例启动的：

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

Vue.js没有完全遵循MVVM模式，Vue的设计无疑是收到了它的启发。因为在文档中经常会使用vm（viewModel的简称）这个变量名表示Vue实例

在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项

可以扩展 vue构造器，从而用预定义选项创建可复用的组件构造器：

var myComponent = Vue.extend({
  //扩展选项
});
//所有的MyComponent实例都将以预定义的扩展选项被创建
var myComponent = new myComponent();

尽管可以命令的创建扩展实例，不过在大多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中

属性和方法

每个Vue实例都会代理其data对象里面所有的属性：

var data = {a : 1};
var vm = new Vue({data : data});
vm.a === data.a;   //true

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

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

只有这些被代理的属性是响应的，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

除了data属性，Vue实例暴露了一些有用的实例属性和方法，这些属性和方法都有前缀$，以便与代理的data属性区分，例如

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() {
  //这个回掉将在"vm.a"改变后调用
});

注意：不要在实例属性或者回掉函数中（如vm.$watch(‘a’, newVal=>this.method())）使用箭头函数。因为箭头函数绑定父上下文，所以this不会像是预想的一样是Vue实例，而是this.myMethod未被定义

实例生命周期：

每个Vue实例在被创建之前都要经过一系列的初始化过程，例如需要配置数据观测、模板编译、挂载实例到DOM，然后在数据变化时更新DOM。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会，例如，created这个钩子在实例被创建之后调用

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

也有其他的一些钩子，比如mounted，update，destoryed，钩子的this指向的调用它的Vue的实例。钩子的this指向调用它的Vue的实例，Vue.js中是没有控制器的概念的，组件的自由逻辑可以分布在这些钩子中

生命周期图示

模板语法

Vue.js使用了基于html的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据，所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上

如果你熟悉虚拟DOM并且偏爱javascript的原始力量，也可以不用模板，直接写渲染函数，使用可选的JSX语法

插值

#文本

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值

<span>message: {{msg}}</span>

Mustache 标签将会被替代为对应数据上的msg的属性的值，无论何时，绑定的数据对象上msg属性发生了变化，插值处的内容都会更新

通过使用v-once指令，你也能一次性地插值，当数据改变时，插值处的内容不会更新，但请留心这会影响该结点上的所有的数据绑定

<span v-once>This will never change: {{msg}}</span>

#纯HTML

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v-html指令

<div v-html="rawHtml"></div>

被插入的内容都会被当成HTML——数据绑定会被忽略，注意，不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。组件更适合担任UI重用与复合的基本单元

在站点上使用动态渲染的任意HTML可能会非常危险，因为会很容易造成XSS攻击，所以只对可信内容进行使用HMTL插值，绝不要对用户提供的内容插值

#属性

Mustache不能再HTML属性中使用，应使用v-bind指令

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除：

<button v-bind:disabled="someDynamicCondition"></button>

#使用JavaScript表达式

在之前的例子中，都只是只绑定简单的属性键值，但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持

{{number + 1}}

{{ok ? ‘Yes’ : ‘No’}}

{{message.split(”).reverse().join(”)}}