零．浑沌
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 } })
