Vue.js框架知识点总结——入门篇
Posted 学大前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js框架知识点总结——入门篇相关的知识，希望对你有一定的参考价值。
写一篇文章真的不容易，希望粉丝们多多分享！给我动力
写一篇文章真的不容易，希望粉丝们多多分享！给我动力
1.框架和库的区别
框架（framework）：有着自己的语法特点、都有对应的各个模块。
库（library）：专注于一点。
框架的好处：
提到代码的质量，开发速度
提高代码的复用率
降低模块之间的耦合度（高内聚低耦合）
UI：user interface
GUI：graphical user interface
CLI：command line interface
API：application interface
思维模式的转换：从操作DOM的思维模式 切换到以数据为主。
2.Vue概述
1、what
是一个渐进式的构建用户界面的js框架
2、where
小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序
3、why
方便阅读的中文文档
容易上手 （学习曲线比较缓和）
体积小
基于组件化的开发方式
代码的可读性、可维护性得到了提高
4、how
工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能
搭建环境
方式1
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
方式2
直接引入对应的js文件
3.Vue中基础知识
1、双花括号
mustache(胡子)/interpolation（插值表达式）
语法：
<any>{{表达式}}</any>
作用：将表达式执行的结果 输出当调用元素的innerhtml中；还可以将数据绑定到视图。
2、指令-循环指令
基本语法1：
<any v-for="tmp in array"></any>
基本语法2：
<any v-for="(value,index) in array"></any>
作用：在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签。
3、指令-选择指令
语法：
<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else="表达式"></any>
作用：根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到DOM树
4、指令-事件绑定
语法：
<any v-on:eventName="handleEvent"></any>
作用：给指定的元素 将handleEvent的方法绑定给指定eventName事件。
5、指令-属性绑定
基本语法：
<any v-bind:myProp="表达式"></any>
补充，支持简写：
<any :myProp="表达式"></any>
作用：将表达式执行的结果绑定到当前元素的myProp属性。
<img v-bind:src="'img/'+myImg" alt="">
动态样式绑定：
<p :style="{backgroundColor:myBGColor}">动态样式绑定</p>
动态样式类绑定：
<h1 :class="{myRed:false}">动态样式类的绑定</h1>
6、指令-双向数据绑定
方向1：数据绑定到视图
方向2：将视图中（表单元素）用户操作的结果绑定到数据
基本语法：
<表单元素 v-model="变量"></表单元素>
4.组件化
组件：组件就是可被反复使用的，带有特定功能的视图。
所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。
组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序。
1、组件的创建
全局组件：
Vue.component('my-com',{
template:`
<h2>it is a header</h2>
`
})
局部组件：
new Vue({
components:{
'my-footer':{
template:''
}
}
})
2、组件使用
作为普通的标签去使用
<my-com></my-com>
3、注意事项
组件的id和使用方式 遵循烤串式命名方式：a-b-c
如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用
5.自定义指令
创建：
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化，都会调用
},
unbind:function(){
//解绑
}
})
使用：
<any v-change="count"></any>
6.过滤器
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。
过滤器的本质 就是一个带有参数带有返回值的方法。
Vue1.* 支持内置的过滤器，但是Vue2.* 就不再内置过滤器，但是支持自定义过滤器。
1、过滤器的创建和使用
1.创建
Vue.filter(
'myFilter',
function(myInput){
//myInput是在调用过滤器时，管道前表达式执行的结果
//针对myInput，按照业务需求做处理
//返回
return '处理后的结果'
})
2.使用
<any>{{expression | myFilter}}</any>
2、如何在调用过滤器时，完成参数的发送和接受
1.发送
<any>{{expression | myFilter(参数1，参数2)}}</any>
2.接受
Vue.filter('myFilter',function(myInput，参数1，参数2){
return '处理后的结果'
})
7.复合组件
知识回顾：
Vue.component('my-header',{
template:`<div></div>`
});
<my-header></my-header>
复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件。
注意事项：
1.组件要渲染的内容 取决于在定义组件时template
<my-list>
<my-item></my-item>
</my-list>
效果是出不来的。
2.允许在一个组件中，直接来调用另外一个组件。
8.生命周期
四个阶段：
create 准备工作 （数据的初始化。。。）
mount 挂载前后针对元素进行操作
update 数据发生变化，
destroy 清理工作 (关闭定时器、集合清空..)
beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed
9.常用属性
1、watch
1.表单元素的双向数据绑定
v-model="myValue"
2.监听
watch:{
myValue:function(newValue,oldValue){
}
}
2、computed
计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。
1.指定计算属性
computed:{
myHandle:function(){
return 数据
}
}
2.调用
<any>{{myHandle}}</any>
10.组件间通信
1、父与子通信 （props down）
1.发送
<son myName='zhangsan'></son>
2.接受到son组件：
Vue.component('son',{
props:['myName'],
template:`
<p>{{myName}}</p>
`
})
2、子与父通信 (events up)
1.绑定
methods:{
handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>
2.触发
子组件内部：
this.$emit(‘customEvent’,100);
3、ref(reference 引用/参考 外号)
帮助在父组件中 得到子组件中的数据、方法。
1.指定ref属性
<son ref="mySon"></son>
2.根据ref得到子组件实例
this.$refs.mySon
4、$parent
this.$parent得到父组件的实例
5、兄弟组件通信
1.
var bus = new Vue();
2.接收方
bus.$on('eventName',function(msg){})
3.发送方
bus.$emit('eventName',123);
11.补充组件创建的方式
1、直接在template属性中指定模板内容
1.全局组件
Vue.component
2.局部组件
{
components:{
'my-footer'：{template:``}
}
}
2、.vue结尾的文件
<template></template>
<script></script>
<style></style>
3、单独指定一个模板内容
<script
id='myContent'
type='text/x-template'>
</script>
Vue.component('',{
template:'#myContent'
})
12.路由模块
路由模块的本质 就是建立起url和页面之间的映射关系。
1、SPA的基本概念和工作原理
SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如Gmail、移动的webApp。
工作原理：
发起ajax请求：请求要加载的页面
像指定的容器中插入加载来的页面
2、路由模块的基本使用
专业术语：
router路由器
route路由
routes 路由数组（路由词典）
1.引入 vue.js vue-router.js
2.指定一个容器
<router-view></router-view>
3.创建业务所需要用到的组件类
var MyLogin = Vue.component()
4.配置路由词典
const myRoutes = [
{path:'',component:MyLogin},
{path:'/login',component:MyLogin}
];
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter
})
5.测试
注意事项：
1.先引入vue，再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes：路由数组 []
router：路由器，按照指定的路由规则去访问对应的组件 new VueRouter
3、使用路由模块来实现页面跳转的方式
方式1：
方式2：
方式3：
<router-link
4、完成参数的传递
在页面之间跳转的时候，在有些场景下，需要同时指定参数
1.明确发送方和接收方
list --20--> detail
/detail --》 /detail/:index
this.$route.params.index
3.发送
routerLink to="/detail/20"
this.$router.push('/detail/20')
5、路由嵌套
在一个路由中，path对应一个component，如果这个component需要根据
不同的url再加载其他的component，称之为路由的嵌套
举例：比如A组件现在需要根据不同的url，加载B组件或者C组件
1.给A组件指定一个容器
<router-view></router-view>
2.配置路由词典
{
path:'/a',
component:A,
children:[
{path:'/b',component:B}
]
}
需求：现在有两个组件，分别是login/mail,建立SPA。
在此基础上，希望mail组件 嵌套inbox/outbox/draft
/mail /mail/draft
13.搭建基于CLI开发环境的方式
1.指定一个文件夹： C:\xampp\htdocs\framework\vue\project
2.将tpls.zip拷贝到project中
3.右键单击压缩包，解压缩到当前文件夹
4.进入到tpls
5.同时按下shift和鼠标右键，选择在此位置打开命令行串口
6.执行npm install
7.执行npm start
- END -
往期精选
围观
热文
关注我吧
每天下班时间六点问候给你
前端开发知识干货总结给你
独家录制学习视频教程给你
月薪3万的面试题目总结给你
前端插件dome H5模板给你
最新技术动态 开发文档给你
沙发给你 热门评论给你 10万+给你
未来更多有趣有料的全部都给你
以上是关于Vue.js框架知识点总结——入门篇的主要内容，如果未能解决你的问题，请参考以下文章
vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）