零．混沌
vue是什么
vue是一套构建用户界面的渐进式框架。
他的特点：
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：多种方式安装，很容易融入
所需要储备的技术
扎势的
html，css,JavaScript基础知识 火狐中文社区 https://developer.mozilla.org…
es6相关知识 ECMAScript 6 入门 http://es6.ruanyifeng.com/#RE…
nodejs相关知识 npm 基本用法和实用技巧 https://github.com/theicebear…
webpack相关知识 webpack中文社区 https://doc.webpack-china.org/可以简单的使用命令终端
使用
vue-cli创建项目
1.
node环境安装(更新到最新)
2.
vue-cli脚手架安装2.1
npm install vue-cli -g
3. 创建项目
3.1
vue init webpack项目名称
4. 进入该目录
4.1
cd 项目名称
5. 安装依赖包
5.1
npm install（或者简写 i ）
6. 启动项目
npm run dev
模板语法
数据绑定最常见的形式使用
“Mustache”语法（双大括号）的文本插值：{{msg}}使用
v-bind在 HTML 属性中使用:<div v-bind.id="msg"><div>
一．指令
1. 内置指令
1.1 v-text:更新元素的 textContent。
<span v-text="msg"></span> 等同于 <span>{{msg}}</span>
1.2 v-html:更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
<div v-html="msg"></div>
1.3 v-show:切换元素的 display CSS 属性。
1.4 v-if:在切换时元素及它的数据绑定 / 组件被销毁并重建。
1.5 v-else:配合v-if使用。
1.6 v-else-if:配合v-if使用
<div v-if></div>
<div v-else-if></div>
<div v-else-if></div>
<div v-else></div>`1.7 v-for：基于源数据多次渲染元素或模板块。
<div v-for="(val, key, index) in data"></div>
数组更新检测的方法有
push()
pop()
shift()
unshift()
splice()
sort()
reverse()重塑数组方法
filter()
concat()
slice()注意事项由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue解决办法Vue.set(example1.items, indexOfItem, newValue)当你修改数组的长度时，例如：
vm.items.length = newLength解决办法example1.items.splice(newLength)
1.8 v-on：绑定事件监听器。可以简写为：@
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$on('test', function(msg) { console.log(msg) }) vm.$emit('test', 'hi')修饰符：
.stop– 调用 event.stopPropagation()
.prevent– 调用 event.preventDefault()。
.capture– 添加事件侦听器时使用 capture 模式。
.self– 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}– 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native– 监听组件根元素的原生事件。
1.9 v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。可以简写为：:
<!-- 绑定一个属性 -->
<img v-bind:src="src">
<!-- 缩写 -->
<img :src="src">1.10 v-model：在表单控件或者组件上创建双向绑定。
限制使用在
<input>
<select>
<textarea>
components
可使用的修饰符
.lazy
.number
.trim
1.11 v-pre：跳过这个元素和它的子元素的编译过程。
1.12 v-cloak：保持在元素上直到关联实例结束编译。
配合 CSS 规则使用 如 [v-cloak] { display: none }
1.13 v-once：只渲染元素和组件一次。
2. 自定义指令
2.1 全局自定义指令
Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function(el) { // 聚焦元素 el.focus() } })2.2 局部自定义指令
二．组件
组件是可扩展 HTML 元素，封装可重用的代码。
1. 内置组件
1.1 component ：渲染一个“元组件”为动态组件
1.2 transition ：单个元素/组件的过渡效果
1.3 transition-group ：多个元素/组件的过渡效果。
1.4 keep-alive ：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
1.5 slot：元素作为组件模板之中的内容分发插槽。 <slot> 元素自身将被替换。
2.自定组件
注意：
要确保在初始化根实例 之前 注册了组件
2.1 全局组件
Vue.component('my-component', {
})2.2 局部组件
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})2.3 DOM 模版解析说明
这些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出现在其它元素内部。
2.4 data 必须是函数
2.5 组件之间的通信- 父传子
组件实例的作用域是孤立的。子组件要显式地用 props 选项声明它期待获得的数据： Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样，prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) 向父组件传入一个普通字符串： <child message="hello!"></child>当使用的
不是字符串模版，camelCased (驼峰式)命名的prop需要转换为相对应的kebab-case (短横线隔开式)命名：Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) <!-- kebab-case in HTML --> <child my-message="hello!"></child>
如果你使用字符串模版，则没有这些限制。
2.6 组件之间的通信- 子传父
使用
$on(eventName)监听事件使用
$emit(eventName)触发事件
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})2.7 组件之间的通信- 非父子
简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
复杂的情况下，我们应该考虑使用专门的 状态管理模式(vuex).
2.8 Slot 分发内容
无名 Slot
子组件 my-component 模板： <div> <h2>我是子组件的标题</h2> <slot></slot> </div> 父组件模版： <div> <h1>我是父组件的标题</h1> <my-component></my-component> </div> 渲染结果： <div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> </div> </div>有名
三．路由
安装使用
npm install vue-router
### main.js ### import router from './router' new Vue({ el: '#app', router, template: '<App/>', components: { App } }) ### router.js ### import VueRouter from 'vue-router' Vue.use(VueRouter) export default new Router({ routes: [ { path: '/', name: 'foo', component: foo } })
