目录
一.vue组件(重点)
1.1 组件介绍
1.2 局部组件
1.3 全局组件
二.自定义事件
2.1 子 -> 父
2.2 父 -> 子
三.vue中文件及文件夹命名规范
四.SPA
4.1 SPA简介
4.2 SPA技术点
五.使用路由建立多视图单页应用
5.1 引入依赖库
5.2 创建自定义组件
六.创建路由
6.1 什么是路由
6.2 定义路由
6.3 创建和挂载根实例
6.4 使用RouterLink和RouterView组件导航与显示
七.router-link相关属性
7.1 to
7.2 replace
7.3 append
7.4 tag
7.5 active-class
7.6 exact-active-class
7.7 event
组件命名规则
props
定义语法:new Vue({el:'#d1',components:{组件名:{配置选项}}})
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '',
//注意:在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明
//的vue实例.
this.count++;
}
}
}
}
});
注:为什么在自定义组件中必须使用函数方式来什么data?
每个自定义组件使用函数方式来声明data,这样每个实例可以维护一份被返回对象的独立的拷贝,在定义自定义组件时,一定要注意这一点。
将上面的局部组件修改为全局组件。
全局组件定义语法:Vue.component(组件名, 配置选项)
//全局组件
Vue.component('button-counter', {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '',
//注意:在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明
//的vue实例.
this.count++;
}
}
});
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
}
});
Vue自定义事件是为组件间通信设计, vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定
触发事件:$emit(eventName, 参数...)
注意:事件名必须用短横线命名方式。
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//对于自定义的button-counter组件, Vue实例为父组件
//在父组件中定义一个test方法,子组件调用该方法
methods: {
clickTest: function(msg) {
console.log("test: "+ msg);
}
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '',
//注意:在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
//注意事件名使用短横线命名方式
this.$emit("click-test","hello vue");
}
}
}
}
});
注意:props定义属性时采用的是驼峰命名法,而在html中使用时需要对应的变为短横线命名法!!
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//对于自定义的button-counter组件, Vue实例为父组件
//在父组件中定义一个test方法,子组件调用该方法
methods: {
clickTest: function(msg) {
console.log("test: "+ msg);
}
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
//注意此处使用驼峰命名法 !!!
props:['titleDesc'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '',
//注意:在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
//注意事件名使用短横线命名方式
this.count ++;
console.log(this.titleDesc);
}
}
}
}
});
命名法
驼峰式命名法(camelCase)
短横线命名(kebab-case)全小写
帕斯卡命名法(PascalCase)
文件夹命名
kebab-case
尽量使用名词,尽量使用一个单词
*.js文件命名规范
3.1 所有模块的主文件index.js全小写
3.2 属于组件的.js文件,使用PascalBase风格
3.3 其他类型的.js文件,使用kebab-case风格
*.vue文件命名规范
除index.vue之外,其他.vue文件统一用PascalBase风格
*.less文件命名规范
统一使用kebab-case命名风格
前三点比较重要,需要记住
附录一:.less为后缀的文件是什么
1、less是什么:LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),
运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
2、为什么有less:CSS 是一门非程序式语言,CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用
3、less最最最最最最简单实例:使用@符号来定义变量
单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序
单页面应用程序:
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序:
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积,加快页面响应速度,降低了对服务器的压力
更好的用户体验,让用户在web app感受native app的流畅
建立一个基本html项目,创建一个demo页面并引入一下js库文件
创建vue组件有两种方式:
相关知识点:
js中const,var,let区别?分别写一个例子
创建一个Home组件和About组件
//组件名用PPascalCase风格
const Home = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'Home组件
Home组件内容区'
});
const About = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'About组件
About组件内容区'
});
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。
路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
route和router的区别
//定义路由,"/"代表根路径,路由中可以使用name属性,一遍情况不建议使用
var routes = [
{path: '/home',component: Home},
{path: '/about',component: About}
];
//创建路由器实例
const router = new VueRouter({
routes: routes
});
使用路由后,Vue实例的创建于以前会有一定的区别,原来使用el属性指定边界,使用路由后需要使用Vue实例$mount方法挂载根实例
//创建和挂载根实例
var vm = new Vue({
//el: '#app',
//将路由放入vue实例
router: router,
data: {
ts: new Date().getTime()
}
}).$mount("#app");
go to Home
go to aboue
表示目标路由的链接
上面的示例已经使用,to既可以使用字符串,也可以使用js表达式
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。
样例:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
vue中导航中的后退-前进-编程式导航
this.$router.push({
path:'/home'
});
//或者使用path,推荐path
this.$router.push({
path:'/home'
});
示例一:编程式前进后退按键
1)在页面上加入前进和后退按钮,
2)添加事件处理程序
methods: {
//前进
previous: function() {
this.$router.go(1);
},
//后退
next: function() {
this.$router.go(-1);
}
}
vue的 $
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开
示例二:切换到指定路由:
添加一个“回家”按钮。
gotohome: function() {
console.log("go to home");
this.$router.push({
path: '/home'
});
}
示例三,设置默认显示的组件
这个很简单,只要将需要默认显示的组件对应的路由的path设置为"/"即可
//定义路由表
var routes = [
//默认显示home
{path:'/', component:Home},
{path:'/home', component:Home},
{path:'/about', component:About}
];
示例四:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
例如: 将
Home
加入replace属性,修改为:
Home
通过测试可以看到,点击home后,history记录被清空。所以一般不用。
设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b (路径追加)
foo
设置链接激活时使用的 CSS 类名
配置当链接被精确匹配的时候应该激活的class
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
Router Link 1