Vue.js学习笔记
介绍：Vue.js是一个构建数据驱动的web界面的渐进式框架，vue.js的目标是通过尽可能简单的api实现数据绑定和组合的视图组件，Vue 的核心库只关注视图层，它不仅易于上手，还 便于与第三方库或既有项目整合，另一方面，当与[现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
MVVM模式
MVVM是Model-View-ViewModel的简写，它本质上就是MVC的改进版，MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型(Model)
Vue.js是一个提供MVVM风格的双向数据绑定的js库，专注于view层，核心就是MVVM中的vm，也就是view model，view model负责连接view 和model，保证视图和数据的一致性，这种轻量级的框架让前端开发更加高效，便捷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app",
data:{
message:"hello world ,welcome come to my world"
}
})
</script>
</html>
在使用vue.js就需要安装，其实它就是一个js，所以直接丢到js文件下里面就行，下载地址
在使用的页面内导入
或者是自己本地js项目下的静态文件，就是那个自己下载的js包
Vue实例
创建一个vue实例
var vm=new vue({
//选项
})
vm这个变量名表示vue实例
当创建一个vue实例时，可以传入一个选项对象，更加具体要看api，一个vue应用由一个通过new vue创建的根vue实例，也可以是嵌套组件，重复的组件组成，类似于树结构，所有的 Vue 组件都是 Vue 实例
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
数据对象就是一旦被拉进vue的实例的property时，就是形成相应，所谓相应就是你可以对vue实例中的property进行赋值时，相应的数据对象也会发生赋值，有点控制傀儡的意思，也有一个例外就是Object.freeze（）一旦对象被放进里面的话就无法被vue实例给控制了
实例生命周期钩子
每个vue实例在被创建时要经过一系列初始化过程，例如数据监听，编译模板，将实例挂载到dom并在数据发生变化时更新dom等，这一个过程叫做生命周期，这一过程也会运行一些生命周期钩子的函数，这就给用户在不同阶段添加自己代码的机会
比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
Vue.js模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
插值
文本
数据绑定最常见的形式就是使用Mustache语法，就双大括号的文本插值，当property中的message改变时，标签里面的也会发生改变
<div id="app"> {{ message }} </div>
上面这个在html中的
模板语句就是如下
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
原始的html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
这个行为是很危险的
属性
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
使用javascript表达式
可以使用javascript表达式{{ number + 1 }}
表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
动态参数
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus
修饰词
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。
1220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
