初次看Vue的对象实例官网文档说明,第一感觉就是这就好比后端的Spring容器框架
只是后端的Spring容器接管的对象是Bean,并提供可插拔式的插件管理机制,可以很方便的和第三方框架进行整合
而Vue则差不多,一个Vue对象实例接管的Dom对象,创建Vue对象实例后,所有的计算属性、事件、数据绑定等复杂操作都可以在Vue对象实例中事先定义好，然后再DOM模板中绑定相应的事件、已经属性值即可
Vue将复杂的DOM操作、属性、事件等都通过封装处理掉了,开发者只需要实现相应的业务逻辑即可,大大提升了开发效率.
基础结构
Vue对象通过new来初始化一个Vue对象实例,这和任何面向对象语言的操作都是类似的
var vue=new Vue({
el:"#vue-app",
data:{
title:"我是Vue对象的Title"
}
})
el、data等都是Vue中的相关属性.更多的属性可参考API列表
属性
目前看前面的章节,我们学到三个重要的属性
el:页面元素,提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例
data:Vue对象的数据对象,我们所有在模板中绑定的属性信息都需要事先在data中定义,然后才可以使用.
method:顾名思义,这是一个方法属性,我们在该DOM的元素中的所有事件处理方法,可以在method属性中定义,然后再模板中绑定事件名称,即可完成相应的事件调用触发操作.
目前对这三个属性的掌握,能让我们对Vue有一个初步的了解,为我们接下来学习Vue,深入Vue有了一个好的开头,最主要的是我们通过使用这三个属性,让我们对声明式渲染、对象定义等思想上加深了理解.
至少让我产生了对Vue的好奇之心,这也是我继续学习下去的动力之一.
生命周期
在new Vue()创建Vue对象时,整个Vue的初始化过程我理解为一个完整的Vue生命周期,这就好比Servlet、Spring容器等生命周期一样,需要经历几个重要的过程,而在Vue初始化过程中,我们经历了那些操作呢?
图样图森破.如下图：
模板
当我们在data属性中声明一个自定义属性后,如何实现属性的渲染呢?
属性绑定
此时,使用“Mustache”语法 (双大括号) 来对属性值进行数据渲染，特别的是,Vue的属性是双向绑定的,只要我们在方法函数中改变了该属性的值,我们的DOM中会立刻将改变后的值渲染出来,这一特性大大简化了DOM操作以及程序逻辑操作
例如：绑定data中的title属性
<h2>
{{ title }}
</h2>
有时候,我们想让我们的属性值使用一次即可,后面不管属性值是否改变,都不需要DOM重新渲染,则可以使用v-once进行绑定,如下：
<h2 v-once>
{{ title }}
</h2>
原始HTML
有时候在数据中定义了HTML结构的属性,此时我们如果继续使用上面的属性绑定语法,会发现Vue不能将HTML内容解析成DOM插入浏览器中,而是将HTML标签及数据都显示,这时我们想真正输出HTML应该怎么做呢?
可以使用v-html指令进行操作:
<div>
html结构：<div v-html="rawHtml"></div>
</div>
HTML属性值绑定
上面我们讨论的都是属性值的绑定,有时候我们想绑定到HTML元素的属性值呢？因为HTML的属性原始值绑定是不能使用上面的规则的，例如：
<div title="{{title}}">
</div>
这种方法是错误的,Vue并不会帮助我们把title的属性值个绑定,那怎么做呢？
通过使用v-bind指令可以完成
<div v-bind:title="title">
</div>
当然，如果你觉得v-bind很麻烦,可以使用它的简写方式
<div :title="title">
</div>