Vue.js 是什么
Vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用。
安装
1. 直接用 <script> 引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. NPM
$ npm install vue
3. 命令行工具（CLI）
在不熟悉基于node.js的构建工具时，不建议新手直接使用 vue-cli
语法
vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
文本插值
-- html
<div id="app">
{{ message }}
</div>
-- js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
--view
Hello Vue!
现在数据和 DOM 已经被建立了关联，所有东西都是响应式的，
Vue 不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上（#app）然后对其进行完全控制
绑定元素 attribute
--html
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
--js
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
带有前缀 v- 的称为指令，表示它们是 Vue 提供的特殊 attribut，会在渲染的 DOM 上应用特殊的响应式行为
“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”
循环绑定数组
--html
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
--js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
--view
1. 学习JavaScript
2. 学习 Vue
3. 整个牛项目
在控制台输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目
处理用户输入
--html
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div>
--js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
v-on 指令：用于事件监控，通过它调用在 Vue实例中定义的方法 reverseMessage
组件化应用构建
定义名为 todo-item 的新组件:
--js
Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app = new Vue(...)
--html
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol>
生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
--js
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
created：用来在一个实例被创建之后执行代码
v-bind缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>