Vue.js 入门

Vue.js 入门

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、MVVM架构

	- M -Model:数据
	- V -View  ：视图
	- VM -ViewModel： 实现Model 与 View 的关联 ，当 Model 数据实现更新，能自动响应式渲染 View 视图，当试图中对界面进行操作时能够自动将操作响应到 Model 中实现数据更新。-- 双向数据绑定（Object.defineProperty() 数据劫持)

2、Vue的安装

注意：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性（Object.defineProperty()）。
- 开发版：包含所有警告及调试信息，一般在开发时使用到
- 生产版：删除了警告调试信息，一般在项目发布部署时生产环境中使用到

	<--引入vue.js-->
	<script src="./js/vue.js"> </script>

3、Vue实例

实例

// ViewModel
const vm = new Vue({
    el: '#app', // View：element，指明在页面中需要渲染的 View
    data: { // Model：模型，在页面渲染时使用到的数据
        message: 'Hello vue.js'
    }
})

模板语法

<--文本插值语法，在 `{{ }}` 标记内部写的是 JS 表达式的内容-->
{{ express }}

指令

<--使用 v-html 指令会将指定表达式内容以 html 文本的方式渲染，不建议将接收到的用户输入使用 `v-html` 渲染，因为极易导致 `XSS` 跨站脚本攻击-->
<!-- v-html/v-text 指令 -->
<span v-html="html"></span>
<span v-text="text"></span>

<!-- v-bind 指令 -->
<a v-bind:href="href">超级链接</a> <br/>
<!-- v-bind 指令可简写为如下格式： -->
<a :href="href">超级链接</a>

<--为元素动态绑定属性值时，不能使用 `{{ exp }}` 的语法，而是需要使用 `v-bind` 指令，该指令可简写为 `:`-->
<a :href="href">链接</a>