基础语法2 - vue路由介绍
目录
1.基础语法2 - vue路由介绍
1.样式绑定
2. 事件修饰符
3. 按键修饰符
4. 常用控件
4.1 常用控件示例
4.2 修饰符
5. 自定义指令
5.1 局部
5.2 全局
6. vue组件（重点）
6.1 组件介绍
6.2 局部组件
6.3 全局组件
案例代码 组件
7. 自定义事件
7.1 子 -> 父
7.2 父 -> 子
2.vue路由介绍与基本使用
2. SPA
2.1 SPA简介
2.2 SPA技术点
3. 使用路由建立多视图单页应用
3.1 引入依赖库
3.2 创建自定义组件
3.3 创建路由
3.3.1 什么是路由
3.3.2 定义路由
3.4 创建和挂载根实例
3.5 使用RouterLink和RouterView组件导航与显示
4. router-link相关属性
4.1 to
4.2 replace
4.3 append
4.4 tag
4.5 active-class
4.6 exact-active-class
4.7 event
4.8路由转参
4.8.1 query传参
4.8.2 params 方式传参 类似post 网页隐藏数据
4.8.3 props方式传参
1.基础语法2 - vue路由介绍
1.样式绑定
-
class绑定 使用方式：v-bind:，expression的类型：字符串、数组、对象
-
style绑定 v-bind:style="expression"， expression的类型：字符串、数组、对象
示例：
<--定义示例样式-->
fafa
fafa
aaa
bbb
test
2. 事件修饰符
几个常用的事件修饰符：
接收消息：{{receverMsg}}
var vm = new Vue({
el: "#app",
data: {
receverMsg: null,
sendMsg: null
},
methods: {
sender: function() {
this.receverMsg = this.sendMsg;
},
doSubmit: function() {
alert('ok');
}
}
});
3. 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符。 示例：
| keyCode | 实际键值 |
|---|---|
| 48到57 | 0到9 |
| 65到90 | a到z（A到Z） |
| a到z（A到Z） | F1到F24 |
| 8 | BackSpace（退格） |
| 9 | Tab |
| 13 | Enter（回车） |
| 20 | Caps_Lock（大写锁定） |
| 32 | Space（空格键） |
| 37 | Left（左箭头） |
| 38 | Up（上箭头） |
| 39 | Right（右箭头） |
| 40 | Down（下箭头） |
方案
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。
| 按键别名 | 含义 |
|---|---|
| .enter | 回车确认键 |
| .tab | TAB键 |
| .delete | 捕获 "删除" 和 "退格" 键 |
| .esc | 键盘左上角的Esc键，取消键 |
| .space | 空格键 |
| .up | 上 |
| .down | 下 |
| .left | 左 |
| .right | 右 |
| .ctrl | ctrl键 |
| .shift | shift键 |
| .alt | Alt |
| .meta | (window系统下是window键，mac下是command键) |
另外，Vue中还支持组合写法：
| 组合写法 | 按键组合 |
|---|---|
| @keyup.alt.67=”function” | Alt + C |
| @click.ctrl=”function” | Ctrl + Click |
示例：响应enter键事件
var vm = new Vue({
el: "#app",
data: function() {
return {
name: 'hello vue'
}
},
methods: {
doSubmit: function() {
alert("响应enter，" + this.name);
}
}
});4. 常用控件
4.1 常用控件示例
通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表
男
女
{{h.name}}
是否已阅读并同意协议
var vm = new Vue({
el: "#app",
data: {
uname: '',
upwd:'',
age:'',
sex: 1,
//用于通过v-for指令输出多选框列表
hobbies:[
{id: '1', name:'打游戏'},
{id: '2', name:'编程'},
{id: '3', name:'旅游'}
],
/*
* 用于通过v-model双向绑定,保存用户的选择。
* 此处为多选，需要通过数组接收，否则无法
* 正常接收复选框的值，且复选框的行为也不正常，
* 可能出现要么全部被选择，要么全部被取消的情况
*/
hobby:[],
remark: null,
//用于生成地区选择列表
city:[
{id:"1", name:"长沙"},
{id:"1", name:"株洲"},
{id:"1", name:"湘潭"}
],
//用于保存用户选择的地区
selectedCity: '',
//是否同意协议,默认值为false
flag:false,
//提交按钮是否禁用,默认为true
disabled: true
},
//监控flag属性,如果同意协议则将提交按钮
//设置为可用,否则提交按钮为禁用状态
watch: {
flag: function(val) {
if(val) {
this.disabled = false;
}else{
this.disabled = true;
}
}
},
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age:this.age,
sex: this.sex,
hobby: this.hobby,
city: this.selectedCity,
remark: this.remark
}
console.log(data);
}
}
});不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改 使用表达式
4.2 修饰符
| 修饰符 | 作用 |
|---|---|
| .lazy | 默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步 |
| .number | 将用户的输入值转为 Number 类型 |
| .trim | 自动过滤用户输入的首尾空格 |
以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型
5. 自定义指令
Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种
钩子函数：
| 名称 | 作用 |
|---|---|
| bind | 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 |
| inserted | 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) |
| update | 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下) |
| componentUpdated | 指令所在组件的 VNode 及其子 VNode 全部更新后调用 |
| unbind | 只调用一次，指令与元素解绑时调用 |
指令钩子函数会被传入以下参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM 。
-
binding：一个对象，包含以下属性： 1） name：指令名，不包括 v- 前缀。 2） value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 3） oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 4） expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 5） arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 6） modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
-
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
-
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5.1 局部
通过自定义标签设置文字颜色
我是自定义指令
var vm = new Vue({
el: '#app',
data: {
red:'red'
},
//自定义指令，局部
directives:{
color: {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
}
}
});5.2 全局
我是自定义指令
//自定义标签,全局
Vue.directive('color', {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
red:'red'
}
});6. vue组件（重点）
6.1 组件介绍
-
组件(Component)是Vue最强大的功能之一，
-
组件可以扩展HTML元素，封装可重用的代码
-
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
-
组件可以分为全局组件和局部组件
组件命名规则
-
短横线命名，如: my-component，vue推荐使用这种方式的命名规则
-
首字母大写命名规则，如：MyComponent
props
-
props是父组件用来传递数据的一个自定义属性。
-
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
6.2 局部组件
定义语法：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，这样每个实例可以维护一份被返回对象的独立的拷贝，在定义自定义组件时，一定要注意这一点。
6.3 全局组件
将上面的局部组件修改为全局组件。 全局组件定义语法：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()
}
});使用方式
案例代码 组件
7. 自定义事件
Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
-
父Vue实例->子Vue实例，通过prop传递数据
-
子Vue实例->父Vue实例，通过事件传递数据
7.1 子 -> 父
触发事件：$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");
}
}
}
}
});7.2 父 -> 子
注意：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': {
//用来传值的自定义属性
//注意此处使用驼峰命名法 !!!
//上面定义 title-desc
props:['titleDesc'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
//注意事件名使用短横线命名方式
this.count ++;
console.log(this.titleDesc);
}
}
}
}
});演示效果
2.vue路由介绍与基本使用
-
命名法 驼峰式命名法(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最最最最最最简单实例：使用@符号来定义变量
2. SPA
2.1 SPA简介
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序
-
单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
-
传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
-
优势 减少了请求体积，加快页面响应速度，降低了对服务器的压力 更好的用户体验，让用户在web app感受native app的流畅
2.2 SPA技术点
-
ajax
-
锚点的使用（window.location.hash #）（页面内定位的技术）
-
hashchange 事件 window.addEventListener("hashchange",function () {}) hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。当URL的片段标识符更改时，将触发hashchange事件
3. 使用路由建立多视图单页应用
3.1 引入依赖库
建立一个基本html项目，创建一个demo页面并引入一下js库文件
js包下载与实例代码
vue4.zip - 蓝奏云
3.2 创建自定义组件
创建vue组件有两种方式：
-
var MyComonent = Vue.component("button-counter", {...}); 创建一个vue组件并赋给MyComponent变量
-
const Home = Vue.extend({}); extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用
相关知识点： js中const,var,let区别？分别写一个例子
创建一个Home组件和About组件
//组件名用PPascalCase风格
const Home = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'Home组件
Home组件内容区'
});
const About = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'About组件
About组件内容区'
});3.3 创建路由
3.3.1 什么是路由
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。 路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
route和router的区别
-
route：路线
-
router：路由器
-
路由器中包含了多个路线
3.3.2 定义路由
//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
{path: '/home',component: Home},
{path: '/about',component: About}
];
//创建路由器实例
const router = new VueRouter({
routes: routes
});3.4 创建和挂载根实例
使用路由后，Vue实例的创建于以前会有一定的区别，原来使用el属性指定边界，使用路由后需要使用Vue实例$mount方法挂载根实例
//创建和挂载根实例
var vm = new Vue({
//el: '#app',
//将路由放入vue实例
router: router,
data: {
ts: new Date().getTime()
}
}).$mount("#app");3.5 使用RouterLink和RouterView组件导航与显示
go to Home
go to aboue
4. router-link相关属性
4.1 to
表示目标路由的链接
上面的示例已经使用，to既可以使用字符串，也可以使用js表达式
4.2 replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。 样例：
如果配置了replace，则在点击该链接，将会导致history记录被清空，不能再执行回退。
vue中导航中的后退-前进-编程式导航
-
this.$router.go(-1) ：代表着后退
-
this.$router.go(1)：代表着前进
-
切换到path为/home的路由
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记录被清空。所以一般不用。
4.3 append
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b （路径追加）
4.4 tag
foo
4.5 active-class
设置链接激活时使用的 CSS 类名
4.6 exact-active-class
配置当链接被精确匹配的时候应该激活的class
4.7 event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
Router Link 1 4.8路由转参
4.8.1 query传参
go to Home 接受参数
//组件名用PPascalCase风格
const Home = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'Home组件
Home组件内容区:参数：{{name}}',
data: function() {
return {
name: this.$route.query.name
}
}
});
4.8.2 params 方式传参 类似post 网页隐藏数据
go to aboue 注意：需要注意路由需要添加name 属性 与上方跳转要一致
{
path: '/about',
component: About,
name: 'aboutname'
}获取参数
const About = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'About组件
About组件内容区 参数：{{name}}',
data: function() {
return {
name: this.$route.params.name
}
}
});4.8.3 props方式传参
test 时跳转组件 后面跟着的是参数 ！如多有多个 / 隔开
go to Home 注意路由配置
// 后面 name 是参数名 必须写 如果name后面还有参数那么 /test/:name/:参数名
{
path: '/test/:name',
component: Test,
props: true
}组件中获取参数
const Test = Vue.extend({
props: ['name'],
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'Test组件
Test组件内容区 参数：{{name}}',
});-
props 第二种方式传参
go to Home 路由注意获取参数
{
path: '/test1',
component: Test1,
props(route) {
return {
name: route.query.name,
age: route.query.age
}
}
}获取参数
const Test1 = Vue.extend({
props: ['name', 'age'],
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: 'Test组件
Test组件内容区 参数：{{name}}---{{age}}',
});5.全部实例代码 ！
go to Home
go to aboue
go to Home
go to Home