前言
接触vue也有一年多的时间了，一直没有做记录。作为一个前端开发者，对我而言，vue是一个正确的选择。vue的易用性，渲染能力，开发文档等等，都比较友好。最近的一段时间也在做react。
个人看法：对于框架，自己觉得顺手就行，使用框架就要尽可能发挥出框架的全部能量，html、JavaScript、css基本功要做好，这样任何js框架对你来说上手都很快。
写这篇文章主要是巩固一些知识和记录开发中的一些经验，对于初学者也有一些帮助。
本篇为基础篇，如果这些内容掌握了，那基本的开发就没有问题了。但这还不够，如果你对组件、路由、还有状态管理有深入的理解，那你会是一个优秀的前端开发者。稍后我也会把我的理解记录下来，给大家分享。
本篇内容有两部分
- 指令的基本用法和注意事项
- 周期钩子的解释和注意事项
一.引入
第一部当然是引入了，两种方式
标签引入方式
配合npm 模块化引入
import Vue from 'vue'
二.实例化
var app = new Vue({
el: '#app',//.app||document.getElementById('app')
data: {
message: 'Hello Vue!'
}
})
表示提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
el：参数可以是css选择器，也可以是HTMLElement,但最好是id选择器，用class选择器vue会自动把class转化为id
你可能也见过这种写法,效果一样
new Vue({
data: {
message: 'Hello Vue!'
}
}).$mount('#app')
三.指令
v-text与v-html
v-text被编译成不同文本，v-html不被编译，直接输出标签
{{msg}}
testHtml:testHtml
输出:testHtml
输出 testHtml
v-show与v-if
都可以说是条件判断
v-show dom元素存在，根据表达式之真假值，切换元素的 display CSS 属性。
v-if true元素存在，false元素不存在，根据表达式的值的真假条件渲染元素。
v-else与v-else-if
条件渲染
A
B
C
Not A/B/C
v-for
列表渲染
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
开发中你会遇到的事情：绑定事件，获取索引
{{ item.text }}
new Vue({
el: '#app',
data: function() {
return {
items: [{
id:1,
content: '1 item',
}, {
id:2,
content: '2 item',
}, {
id:3,
content: '3 item',
}]
}
},
methods: {
toggle: function(index) {
alert(this.items[index].content)
}
}
})
一个对象的 v-for
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
{{ index }}. {{ key }}: {{ value }}
0. firstName: John
1. lastName: Doe
2. age: 30
v-on
事件指令
缩写 @
部分修饰符，开发中这两个基本就够了
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
v-bind
属性绑定
缩写 ：
![]()
![]()
v-model
表单控件双向绑定
限制