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

Vue构造器

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

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

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

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

<div class="app">{{msg}}
</div>

<script>//vue.js  组件其实都是被扩展的 vue实例。var vm=new Vue({           //vue 实例   el:".app",data:{msg:"hello vue.js"}});//  响应式    //vm(构造器) 是 Vue  的实例//vue 是 vm  的构造器  ( 构造函数)</script>

如：{{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 = 2data.a // -> 2// ... 反之亦然data.a = 3vm.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 // -> truevm.$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 指令

    <div id="app-2"><p v-once>这里的数据只会执行一次更新：{{me    ssage}}</p><div v-html="rawHtml">自定义html</div></div>

var app2 = new Vue({el:'#app-2',data:{message:'第一次更新',rawHtml:'<ol><li>这里是自定义html</li><li>这里是自定义html</li></ol>'}
})
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)}}
})

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

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

v-on 缩写

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

计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

计算属性 vs watched

当你有一些数据需要随着其它数据变动而变动时可以用 vs method计算属性 也可以用 vswatched ；

    <div id="app">{{fullName}}<input v-model="firstName"/><input v-model="lastName"/>
</div><script>var vm = new Vue({el:'#app',data:{firstName:"chao",lastName:"qiu",fullName:"qiuchao"},computed:{fullName:{get:function(){return this.lastName+this.firstName;}}},methods:{},filters:{},watch:{firstName:function(){this.fullName=this.lastName+this.firstName;//return this.lastName+this.firstName;},lastName:function(){// return this.lastName+this.firstName;this.fullName=this.lastName+this.firstName;},}});</script>

与method对比

　　　　计算属性基于自己的依赖进行缓存，只要message没发生变化，多次访问该计算属性就会立即返回之前的计算结果，而不必再次执行函数；

　　　　而method调用总会执行该函数。

与vs watched对比

　　　　都是用来处理某些数据随其他数据的变动而变动的，但尽量不要滥用watch，如果代码是命令式和重复的，先考虑下计算属性computed，可使代码更简洁。

观察Wactchers

提供一个watch选项，当想要在数据变化响应时，执行异步操作或开销较大的操作时使用。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

<div id="app">{{msg}}<input v-model="msg"/>
</div>
<script>var app = new Vue({el:"#app",data:{msg:""},watch:{msg:function(newValue){localStorage.getItem("msg",newValue);}},mounted:function(){this.msg = localStorage.getItem("msg");}});
</script>