vue.js 之对vue.js基础理解

Vue构造器

1 . Vue.js是一个构造函数，编程中称之为构造器

2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫做实例化

3 . 构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})

4 . Vue构造器要求实例化时需要传入一个选项对象


    
             {
   {msg}}

如：{
{msg}}

1）{
{msg}}会在视图中显示

2）{
{msg}}在实例化后仍然保持数据响应

3）{
{msg}}尽管在console.log(data)中存在，但视图却找不到，且会报错

4）因此请不要试图在实例化后添加任何属性

实例属性方法以及生命周期

1 . data会代理其对象里的所有属性.

2 . 只有data里的属性是响应式的，即通信是双向的.

3 . Vue被实例化后，再创建的属性，将不会触发视图更新.

4 . 在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

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

2 . Vue实例暴露了一些有用的实例属性与方法

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

1 . 为与代理属性区分，方前添加了前缀$

2 . app.$data===data //->true

app.$el===document.getElementById("app") //->true

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 ( newVal, oldVal ) {      // 这个回调将在`vm.a` 改变后调用})

实例生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。

created（创建后）mounted（载入后）updated（更新后）d（销毁后） estroyed（销毁后）

模板语法插值

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

{
{}}数据绑定最常见的就是Mustache（双括号）的文本插值，使用v-once指令，可以执行一次插值，后面如果有改变，将不会更新。

<p v-once>{
{message}}</p>

HTML

还可以插入HTML使用指令v-html

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


            
     这里的数据只会执行一次更新：{
   {me    ssage}}
        
     
      自定义html

var app2 = new Vue({    el:'#app-2',    data:{        message:'第一次更新',        rawHtml:'
    
     这里是自定义html
     这里是自定义html
    
'    }})app2.message = '第二次更新没有赋值';

指令

v-if、v-on、v-bind

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

过滤器

是通过后面的函数对前面这个值做一个变化，得出需要的内容

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

过滤器可以串联而且还可以接收参数

{
{ message | capitalize }}

new Vue({ // 将message的值首字母变为大写，其它不变 filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }})