一、准备工作
-
在webstorm中配置serve
-
导入路由 Terminal输入 npm install vue-router@3 可在node_modules文件夹中导入
-
设置路由
-
在main.js中将router挂载到vue实例上
-
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router //将路由挂在到vue实例上 }).$mount('#app')
在src目录下创建router包,创建index.js,配置路由
-
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //引入组件 import Homework01 from './../components/Homework01.vue' import Homework02 from './../components/Homework02.vue' //创建路由匹配规则 //path和component是必须的属性 const routes = [ { path: '/homework01', name: 'Homework01', component: Homework01 }, { path: '/homework02', name: 'Homework02', component: Homework02 } ] //创建路由对象 const router = new VueRouter({ routes }) export default router
-
App.vue中将script内容删除,并在template中加入router-view标签node_modules查看加载的包
-
语法规定提示,可在vue.config.js文件中加入
-
lintOnSave: false
-
二、指令
-
指令中的值都是js表达式,插值表达式,
-
<template> <!-- template中必须包含唯一的一个根标签--> <div> <!-- 指令中的值都是js表达式--> <!-- 插值表达式:最基本的文本插值方法,在解析过程中{{}}标签会被相应数据的值替换, 每当这个数据变化时,它也会更新 注意:{{}}时实现部分替换--> <p>原本的内容{{msg}}</p> <!-- v-text:更新元素的文本内容 会覆盖掉标签中原有的内容--> <p v-text="msg">原本的内容</p> <p v-text="name"></p> <!-- v-html:html插值,设置元素的innerHTML,内容中的html结构会被解析为标签--> <!-- v-html和v-text的区别: v-html能够解析html标签 v-text不能识别标签,只能解析纯文本--> <p v-html="name"></p> </div> </template> <script> export default { name: "Test01", //组件中用到的数据都定义在data中,data是一个方法,里面返回一个对象 // data: function() {} data() { return { msg: "Hello World", name: "<h2>刘备</h2>" } } } </script> <style scoped> </style>
v-bind属性绑定
-
<template> <div> <!-- v-bind:属性绑定指令,简写可以直接省略v-bind,使用英文冒号--> <img v-bind:src="imgSrc" :title="imgName" width="200px"> <!-- v-bind:绑定元素的class属性,有以下两种方式--> <input type="text" :class="isActive? 'active' : ''" v-on:click="toggleClass"> <input type="text" :class="{active: isActive}" v-on:click="toggleClass"> <!-- v-bind绑定元素的style属性值--> <h1 v-bind:style="styles">一级标题</h1> </div> </template> <script> export default { name: "Test02", data() { return { imgSrc: require('./../assets/imgs/a.jpg'), imgName: '雪中对决', isActive: true, styles: { color: 'red', fontSize: '36px', } } }, methods: { toggleClass() { this.isActive = !this.isActive } } } </script> <style scoped> .active { border: 1px solid red; } </style>
v-on时间绑定指令
-
<template> <div> <!-- v-on:时间绑定指令,简写:省略v-on,使用@符号,后面直接跟事件名,注意:事件名不带on--> <!-- 不传参:调用方法不添加小括号--> <input type="button" value="按钮" v-on:click="show"> <input type="button" value="按钮2" @mouseover="show"> <!-- 传参:添加小括号--> <input type="button" value="按钮3" @click="showName('张三','18')"> </div> </template> <script> export default { name: "Test03", data() { return { msg: "hello " } }, //所有的方法定义在methods中 methods: { show(){ alert("Hello World") }, //在方法中想要访问data中的数据,需要通过this关键字去访问 showName(name, age) { alert(this.msg + name + ",今年" + age) } } } </script> <style scoped> </style>
v-model:只能用在表单元素中,并只有这一个指令可以实现双向数据绑定
-
<template> <div> <!-- v-model:只能用在表单元素中,并且只有这一个指令可以实现双向数据绑定 作用:便捷的设置或获取表单元素的值 双向数据绑定:当js中的值(M)改变时,页面上显示的值(V)也会改变, 当页面中的值(V)改变时,js中的值(M)也会改变 使用v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性值--> <input type="text" v-model="msg"> <input type="button" value="按钮" @click="showMsg"> <br> <!-- 单选按钮的数据绑定 单选按钮中v-model绑定的数据与哪个value相等,就会选中哪一项--> <input type="radio" name="sex" value="男" v-model="sex"> 男 <input type="radio" name="sex" value="女" v-model="sex"> 女 <br> <!-- 复选框的绑定 多个复选框绑定到同一个数组上,value的值在数组中,就会选中这一项,这一过程也是双向的--> <input type="checkbox" value="read" name="hobby" v-model="hobbys"> 读书 <input type="checkbox" value="music" name="hobby" v-model="hobbys"> 音乐 <input type="checkbox" value="swim" name="hobby" v-model="hobbys"> 游泳 <input type="checkbox" value="sport" name="hobby" v-model="hobbys"> 运动 <br> <!-- 下拉框的数据绑定 单选--> <select name="language" id="language" v-model="language"> <option value="html">html</option> <option value="oracle">oracle</option> <option value="java">java</option> </select> <!-- 多选:给select标签添加multiple属性可以实现下拉框多选,此时v-model绑定的是一个数组,与复选框用法类似 --> <select v-model="languages" multiple> <option value="html">html</option> <option value="oracle">oracle</option> <option value="java">java</option> </select> </div> </template> <script> export default { name: "Test04", data() { return { msg: "张三" , sex: "男", hobbys: ['read','swim'], language: 'oracle', languages: ['oracle','java'] } }, methods: { showMsg() { alert(this.msg) this.msg = "刘备" console.log(this.languages); } } } </script> <style scoped> </style>
v-show、v-if
-
<template> <div> <!-- v-show:根据数据的真假切换元素的显示状态--> <input type="button" value="点击我控制图片的显隐" @click="changeImg"> <!-- isShow为true图片显示,isShow为false,图片隐藏 原理:通过修改元素的display属性,实现显示隐藏--> <img src="./../assets/imgs/a.jpg" alt="" v-show="isShow" width="200px"> <br> <!-- v-if:根据数据的真假在DOM中渲染或销毁元素来实现元素显隐,当值为true就创建元素,值为false就销毁--> <img src="./../assets/imgs/a.jpg" alt="" v-if="isShow" width="200px"> <br> <button @click="changeNum">按钮</button> <!-- 多个判断条件可以使用v-else-if和v-else--> <div v-if="num==1">第一个</div> <div v-else-if="num==2">第二个</div> <div v-else>第三个</div> <div v-if="isShow">显示第一个</div> <div v-else>显示第二个</div> </div> </template> <script> export default { name: "Test05", data() { return { isShow: true, num: 1 } }, methods: { //想要改变图片的显隐状态,只需要改变isShow的值即可 changeImg() { this.isShow = !this.isShow }, changeNum() { this.num = 2 } } } </script> <style scoped> </style>
v-for:列表渲染指令
-
<template> <div> <!-- v-for:列表渲染指令 将数组list渲染到p标签中 数组中的每个元素都有一个索引值--> <p v-for="(item, i) in list">{{i}}---{{item}}</p> <!-- v-for循环对象数组--> <input type="button" value="添加" @click="add"> <input type="button" value="删除" @click="del"> <table width="400px" border="1px" cellspacing="0"> <tr><td><input type="checkbox"></td><td>序号</td><td>员工编号</td><td>姓名</td></tr> <!-- key属性 当vue使用v-for渲染元素列表时,默认使用“就地更新”的策略 为了给vue一个提示,以便它能跟踪每个节点的身份,我们需要为每一项添加一个key属性 以后在使用v-for时,记得添加key属性--> <tr v-for="(emp, index) in emps" :key="emp.empno"><td><input type="checkbox"></td><td>{{index + 1}}</td><td>{{emp.empno}}</td><td>{{emp.ename}}</td></tr> </table> </div> </template> <script> export default { name: "Test06", data() { return { list: [1, 2, 3, 4, 5], emps: [ { empno: 1001, ename: "张三" }, { empno: 1002, ename: "李四" }, { empno: 1003, ename: "王五" } ] } }, methods: { add() { //push:向数组末尾添加一个元素 //unshift:向数组第一个位置添加一个元素 this.emps.unshift({empno: 1004, ename: '马六'}) }, del() { //删除数组中第一个元素 this.emps.shift(); } } } </script> <style scoped> </style>
计算属性
-
<template> <div> <!--<input type="text" v-model="firstName" @keyup="getFullName"> + <input type="text" v-model="lastName" @keyup="getFullName"> = <input type="text" v-model="fullName">--> <input type="text" v-model="firstName" > + <input type="text" v-model="lastName" > = <!-- 在这个地方,模板不再是简单的声明式逻辑,对于任何复杂逻辑,都应当使用计算属性--> <input type="text" v-model="fullName"> <!-- 计算属性会进行缓存,如果多次使用,计算属性只会调用一次 计算属性的求值结果会被缓存起来,方便下次直接使用, 如果计算属性中所依赖的任何数据都没有发生过变化,则不会对计算属性重新求值 如果计算属性中所依赖的任何数据发生了改变,则会对计算属性重新求值--> </div> </template> <script> export default { name: "Test07", data() { return { firstName: '', lastName: '', //fullName: '' } }, methods: { /*getFullName() { this.fullName = this.firstName + this.lastName }*/ }, computed: { //计算属性在引用的时候, 一定不要加小括号,直接把它当作普通属性去使用 //只要计算属性funciton内部所用到的任何data中的数据发生了变化,就会立刻重新计算这个计算属性的值 fullName() { return this.firstName + this.lastName } } } </script> <style scoped> </style>
侦听器
-
<template> <div> <input type="text" v-model="firstName" > + <input type="text" v-model="lastName" > = <input type="text" v-model="fullName"> </div> </template> <script> export default { name: "Test08", data() { return { firstName: '', lastName: '', fullName: '' } }, //当需要在数据变化时执行异步或开销较大的操作时,使用侦听器 //watch属性可以监听data中指定数据的变化 watch: { //比如这里可以监听到data中firstName的变化,只要firstName发生变化,就会立刻触发这个函数 //这个方法提供两个参数,第一个参数是变化后的新值,第二个参数是变化前的旧值 firstName(newVal, oldVal) { console.log((newVal + "---" + oldVal)); this.fullName = newVal + this.lastName; }, lastName(newVal, oldVal) { console.log((newVal + "---" + oldVal)); this.fullName = this.firstName + newVal } } } </script> <style scoped> </style>