一、准备工作
-
在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>
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
