框架(framework):有着自己的语法特点、都有对应的各个模块。
库(library):专注于一点。
框架的好处:
UI:user interface
GUI:graphical user interface
CLI:command line interface
API:application interface
思维模式的转换:从操作DOM的思维模式 切换到以数据为主。
是一个渐进式的构建用户界面的js框架
小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序
工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能
方式1
全局安装 vue-cli
$ npm install --globalvue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpackmy-project
安装依赖,走你
$ cdmy-project
$ npm install
$ npm run dev
方式2
直接引入对应的js文件
mustache(胡子)/interpolation(插值表达式)
语法:
<any>{{表达式}}</any>
作用:将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图。
基本语法1:
<anyv-for="tmp in array"></any>
基本语法2:
<anyv-for="(value,index) in array"></any>
作用:在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签。
语法:
<anyv-if="表达式"></any>
<anyv-else-if="表达式"></any>
<anyv-else="表达式"></any>
作用:根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树
语法:
<anyv-on:eventName="handleEvent"></any>
作用:给指定的元素 将handleEvent的方法绑定给指定eventName事件。
基本语法:
<anyv-bind:myProp="表达式"></any>
补充,支持简写:
<any:myProp="表达式"></any>
作用:将表达式执行的结果绑定到当前元素的myProp属性。
<imgv-bind:src="'img/'+myImg"alt="">
动态样式绑定:
<p:style="{backgroundColor:myBGColor}">动态样式绑定</p>
动态样式类绑定:
<h1:class="{myRed:false}">动态样式类的绑定</h1>
方向1:数据绑定到视图
方向2:将视图中(表单元素)用户操作的结果绑定到数据
基本语法:
<表单元素 v-model="变量"></表单元素>
组件:组件就是可被反复使用的,带有特定功能的视图。
所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。
组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序。
全局组件:
Vue.component('my-com',{
template:`
<h2>it is a header</h2>
`
})
局部组件:
newVue({
components:{
'my-footer':{
template:''
}
}
})
作为普通的标签去使用
<my-com></my-com>
创建:
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化,都会调用
},
unbind:function(){
//解绑
}
})
使用:
<anyv-change="count"></any>
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据。
过滤器的本质 就是一个带有参数带有返回值的方法。
Vue1.* 支持内置的过滤器,但是Vue2.* 就不再内置过滤器,但是支持自定义过滤器。
1.创建
Vue.filter(
'myFilter',
function(myInput){
//myInput是在调用过滤器时,管道前表达式执行的结果
//针对myInput,按照业务需求做处理
//返回
return'处理后的结果'
})
2.使用
<any>{{expression | myFilter}}</any>
1.发送
<any>{{expression | myFilter(参数1,参数2)}}</any>
2.接受
Vue.filter('myFilter',function(myInput,参数1,参数2){
return'处理后的结果'
})
知识回顾:
Vue.component('my-header',{
template:`<div></div>`
});
<my-header></my-header>
复合组件:并不是新的概念,就是一个组件,只不过这个组件中 可以调用其他的组件。
注意事项:
1.组件要渲染的内容 取决于在定义组件时template
<my-list>
<my-item></my-item>
</my-list>
效果是出不来的。
2.允许在一个组件中,直接来调用另外一个组件。
四个阶段:
1.表单元素的双向数据绑定
v-model="myValue"
2.监听
watch:{
myValue:function(newValue,oldValue){
}
}
计算属于是用于在模板中,搞定复杂的业务逻辑,因为有依赖缓存。
1.指定计算属性
computed:{
myHandle:function(){
return数据
}
}
2.调用
<any>{{myHandle}}</any>
1.发送
<sonmyName='zhangsan'></son>
2.接受到son组件:
Vue.component('son',{
props:['myName'],
template:`
<p>{{myName}}</p>
`
})
1.绑定
methods:{
handleEvent:function(msg){}
}
<son@customEvent="handleEvent"></son>
2.触发
子组件内部:
this.$emit(‘customEvent’,100);
帮助在父组件中 得到子组件中的数据、方法。
1.指定ref属性
<sonref="mySon"></son>
2.根据ref得到子组件实例
this.$refs.mySon
this.$parent得到父组件的实例
1.
varbus =newVue();
2.接收方
bus.$on('eventName',function(msg){})
3.发送方
bus.$emit('eventName',123);
1.全局组件
Vue.component
2.局部组件
{
components:{
'my-footer':{template:``}
}
}
<template></template>
<script></script>
<style></style>
<script
id='myContent'
type='text/x-template'>
</script>
Vue.component('',{
template:'#myContent'
})
路由模块的本质 就是建立起url和页面之间的映射关系。
SPA:single page application 单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容,比如Gmail、移动的webApp。
工作原理:
专业术语:
1.引入 vue.js vue-router.js
2.指定一个容器
<router-view></router-view>
3.创建业务所需要用到的组件类
varMyLogin=Vue.component()
4.配置路由词典
constmyRoutes = [
{path:'',component:MyLogin},
{path:'/login',component:MyLogin}
];
constmyRouter =newVueRouter({
routes:myRoutes
})
newVue({
router:myRouter
})
5.测试
修改地址栏中的路由地址,测试看加载的组件是否正确
注意事项:
1.先引入vue,再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes:路由数组 []
router:路由器,按照指定的路由规则去访问对应的组件 new VueRouter
方式1:
直接修改地址栏
方式2:
this.$router.push(‘路由地址’);
方式3:
<router-link
to="路由地址"></router-link>
在页面之间跳转的时候,在有些场景下,需要同时指定参数
1.明确发送方和接收方
list --20--> detail
2.配置接收方的路由地址
/detail --》 /detail/:index
this.$route.params.index
3.发送
routerLink to="/detail/20"
this.$router.push('/detail/20')
在一个路由中,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
1.指定一个文件夹: C:xampphtdocsframeworkvueproject
2.将tpls.zip拷贝到project中
3.右键单击压缩包,解压缩到当前文件夹
4.进入到tpls
5.同时按下shift和鼠标右键,选择在此位置打开命令行串口
6.执行npm install
7.执行npm start