vue学习笔记---vue实例

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

var vm=new Vue({

});

虽然没有完全遵循MVVM模型,但是vue的设计也受到了它的启发。因此在文档中会经常使用vm(View Model的缩写)变量名表示vue的实例；

当创建一个vue实例时,你可以传入vue一个选项对象，那么我们如何用这些选项对象来创建你想要的行为呢！

一个vue应用由一个通过new view创建的根vue实例，以及可选的嵌套的，可复用的组件树组成。

所有vue组件都是vue实例，并且接受相同的选项对象(一些根实例特有的选项除外)。

只有在实例创建时data中存在的属性才是响应式的

实例生命周期钩子：

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

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

new Vue({

 data:{a:1},

created:function(){

 this指向vm实例

 console.log('a is:'+this.a)

}

})

还有一些其他的钩子，在实例生命周期的不同阶段被调用，如mounted、updated和destroyed

生命周期钩子的this上下文指向它调用它的实例

模板语法：

vue.js的模板都是合法的html，所以能被遵循规范的浏览器和HTML解析器解释，在底层实现上，Vue将模板编成虚拟DOM渲染函数，结合响应系统，在

应用状态改变时，vue能够只智能能地计算出重新渲染组件的最小代价并应用到DOM操作上

插值

#文本

数据绑定最常见的模式就是使用‘Mustache’语法（（双大括号的文本插值））：

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

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

通过使用v-once指令，你也能执行一次性的插值，当数据变化时插值处的内容不会更新！但是会影响该节点上所有数据的绑定

<span v-once>这个将不会改变: {{ msg }}</span>

#原始HTML

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

#使用javascript表达式：

{{number+1}}

{{ok？‘yes’，‘no’}}

这些表达式会在所属的vue实例的数据作用域下作为JavaScript下被解析。有个限制，每个绑定都只能包含单个表达式

指令

指令(Directives)是带有V-前缀的特殊属性，指令属性的值预期是单个JS表达式（v-for例外）。指令的职责是，当表达式的

值改变时，将其产生的连带影响响应式的作用于DOM

<p v-if="seen">现在你看到我了</p>

v-if指令将根据表达式seen的值的真假来插入和移除p元素

#参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。v-bind命令可以响应式的更新HTML属性

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

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

v-on指令，它用于监听DOM事件

<a v-on:click='dosomething'>...</a>

在这里参数监听的是事件名

#修饰符

修饰符(Modifiers)是以半角句号.指明的特殊后缀，用于指出一个指令应该已特殊方式绑定

.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDeaufault()

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

#缩写

v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性。当你在使用vue.js为现有的标签添加动态行为(dynamic behavior)

时，v-前缀有很大的帮助，然而对于一些频繁用到的一些指令来说，就会感觉很繁琐。同时，在构建由Vue.js管理所有模板的单页面应用

程序时，v-前缀也变得没那么重要了此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

#v-bind缩写

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

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

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