一. 框架和库的区别
框架（framework) ：有着自己的语法特点，都有对应的各个模块。
库（library）：专注于一点
框架的好处：
提高代码的质量，开发速度
提高代码的复用率
降低模块之间的耦合度（高内聚低耦合）
二 . Vue的概述
1. what 是一个渐进式的构建用户界面的js框架
2. where 小道的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序
3. why
方便阅读的中文文档
容易上手（学习曲线比较缓和）
体积小
基于组件化的开发方式
代码的可读性、可维护性得到了提高
4.how 工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能
三. 环境的搭建
方式一：
全局安装：npm install --global vue-cli
创建一个基于webpack模板的新项目：
npm init webpack my-project
cd my-project
npm install
npm run dev
方式二：直接引入对应的js文件
四. vue中的基础知识
1. 双花括号（模板语法）
mustache/interpolation(插值表达式)
<any> {{表达式}} </any>
作用：将表达式执行的结果输出当前调用元素的innerHTML中，还可以将数据绑定到视图
注意：出现会出现双花括号闪烁问题。页面还没有加载到数据的时候就显示了原花括号
解决：
1. <any v-cloak>{{表达式}}</any> 结合css [v-cloak] {display:none}
2. <any v-text=‘变量’></any>
3. <any v-html='变量'></any>
2. 指令
2.1 循环指令
基本语法1： <any v-for='tmp in arr '></any>
基本语法2：<any v-for='(value,index) in array'></any>
作用：在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签，也可以遍历对象。
2.2 选择指令
语法：
<any v-if='表达式'></any>
<any v-else-if='表达式'></any>
<any v-else></any>
作用：根据表达式执行的结果的真假，来决定是否要将当前的这个元素挂载到DOM数上，还有v-show,v-if是重新渲染，v-show只控制显示和隐藏
2.3 事件绑定
基本语法：<any v-on:eventName='handleEvent'></any>
补充，支持简写：<any @eventName='handleEvent'></any>
作用：给指定的元素将handleEvent的方法绑定给指定的eventName事件上
2.4 属性绑定
基本语法：<any v-bind:myProp='表达式'></any>
补充，支持简写：<any :myProp='表达式'></any>
作用：将表达式执行的结果绑定到当前的元素myProp属性上
2.5 动态样式绑定
<any :style='{backgroudColor:myBGColor}'>动态样式绑定</any>
<any :class='{myRed:false}'></any>
2.6 双向数据绑定
方向1：数据绑定到视图
方向2: 将视图中（表单元素）用户操作的结果绑定到数据中
基本语法：<表单元素 v-model='变量'></表单元素>
原理：就是使用访问器属性的getter和setter方法
3. 组件化
组件：组件就是可被反复使用的，带有特定功能的视图。
所谓的组件化，就像玩积木一样，把封装的组件进行复用，把积木（组件）拼接在一起，构成一个复杂的页面应用程序。
组件数就是各个组件构成的一种数据结构，他存在的意义是为了帮梳理应用程序。
3.1 组件的创建
全局组件： Vue.component('my-com',{
template:`<div>我是全局组件</div>`
})
局部组件：new Vue({
components:{
'my-com'：{
template:''
}
}
})
3.2 组件使用
作为普通的标签使用<my-com></my-com>
3.3 注意事项
组件的id和使用方式:遵循烤串式命名方式：a-b-c
如果一个组件要渲染多个元素，将多个元素放在一个顶层标签中，比如div,form
全局组件可以用在id为example的范围内的任何一个组件内部，直接调用即可，但是局部组件只能在父模板中直接调用。
4. 自定义指令
创建：
Vue.directive('change',{
bind(el,binding){
首次调用
},
inserted(el,binding){
被绑元素插入父元素
},
update(el,binding){
只要是有数据变化，都会调用
},
unbind(el,binding){
解绑
}
})
使用：<any v-change></any>
5. 过滤器
过滤器是针对一些数据，进行筛选、过滤、格式化等相关的处理，变成我们想要的数据，过滤器的本质就是一个带有参数返回值的方法，vue1.*支持内置的过滤器，但是Vue2.*就不再内置过滤器，但是支持自定义过滤器。
5.1 创建
Vue.filter('myFilter',(myInput)=>{
//myInput是在调用过滤器时，管道前表达式的执行结果吗、
//针对myInput,按照业务需求做处理
//返回 return '处理后的结果'
})
5.2. 使用
<any>{{expression | myFilter}}</any>
5.3 如何在调用过滤器时，完成参数的发送和接受
发送：<any>{{expression | myFilter('参数1','参数2')}}</any>
接受：Vue.filter('myFilter',(myInput,参数1，参数2)=>{
return 处理后的结果
})
6. 生命周期
四个阶段：
create : 准备工作(数据的初始化）
mount : 挂载前后针对元素进行的操作
update : 数据发生变化
destroy : 清理工作（关闭定时器，集合清空）
beforeCreate / created
beforeMount / mounted
beforeUpdate / updated
beforeDestroy / destroyed
7. 常用属性
7.1 watch
表单元素的双向数据绑定 v-model='myValue'
监听：
watch:{
myValue(newVal,oldVal){ }
}
7.2 computed
计算属性是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存
指定计算属性：
computed:{
myHandle(){
return '返回的数据'
}
}
调用：<any> {{myHandle}} </any>
8. 组件间通信
8.1 父与子通信 （props down）
发送 <son myName='zhangsan'></son>
接受到son组件：
Vue.component('son',{
props:['myName'],
template:`<p>{{myName}}</p>`
})
8.2 子与父通信 (events up)
绑定
methods:{
handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>
触发
子组件内部 ： this.$emit(‘customEvent’,100);
8.3 ref(reference 引用/参考 外号)
帮助在父组件中得到子组件中的数据、方法。
1. 指定ref属性 <son ref="mySon"></son>
2.根据ref得到子组件实例 this.$refs.mySon
8.4 $parent
this.$parent得到父组件的实例
8.5 兄弟组件通信
var bus = new Vue();
接收方 bus.$on('eventName',function(msg){})
发送方 bus.$emit('eventName',123);
9. 补充组件的创建方式
9.1 全局组件
Vue.component
9.2 局部组件
components:{
'my-footer'：{template:``}
}
9.3 .vue结尾的文件
<template></template>
<script></script>
<style></style>
9.4 单独指定一个模板内容
<script type='text/x-template' id =''my-content'></script>
Vue.component( 'my-contnet',{
template:'#my-content'
})
五. 路由模块
路由模块的本质 就是建立起url和页面之间的映射关系。
5.1 SPA的工作原理
SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如Gmail、移动的webApp。
工作原理：
解析地址栏：完整的页面地址、路由地址
根据路由地址从路由词典中找到真正的要加载的页面
发起ajax请求：请求要加载的页面
指定的容器中插入加载来的页面
5.2 路由模块的基本功能
专业术语：
router路由器
route路由
routes 路由数组（路由词典）
5.3 基本使用
1. 引入vue-route.js 或者npm install vue-route
2. 指定路由出口：<router-view></router-view>
3. 创建业务所需要的组件类 Vue.component()，或者import进来
4. 配置路由词典
const routes=[
{path:'/login',component:myLogin}
] ;
const myRouter = new VueRouter({routes})
new Vue({
el:' #container',
router: myRouter
})
5. 测试：修改地址栏中的url，测试看加载的组件是否正确
6. 使用路由来进行页面跳转的方式
直接修改地址栏中的url
使用this.$touter.path('路由地址')
<router-link to='路由地址'></router-link>
7. 如何完成参数的传递
在页面之间跳转的时候，在有些场景下，需要同时指定参数
明确发送方和接收方：list --20--> detail
配置接收方的路由地址：/detail --》 /detail/:index this.$route.params.index
发送： routerLink to="/detail/20" this.$router.push('/detail/20')
8. 路由的嵌套
在一个路由中，path对应一个component，如果这个component需要根据不同的url再加载其他的component，称之为路由的嵌套
举例：比如A组件现在需要根据不同的url，加载B组件或者C组件
1. 给A组件指定一个容器
<router-view><router-view>
2. [
{
path: ' ',
component:myLogin,
children:[
path:'/child',
component:myChild
]
}
]
扫一扫
7451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
