Vue的应用
v-once指令
v-once: 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改)
<div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值,只可主动更改 --> <input type="text" v-model="msg" v-once> <p>{{ msg }}</p> <!-- 一旦赋值,便不可更改 --> <p v-once>{{ msg }}</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '初始值' } }) </script>
v-cloak指令(了解)
v-cloak:防止页面闪烁
<style> [v-cloak] { display: none; } </style> <!-- 不处理的情况下,每次新加载该页面,都会先渲染{{}},当vue环境加载成功,{{}}有会被解析消失 --> <!-- 处理后,vue环境没加载好时,#app是被隐藏的,vue环境加载成功,会依次#app的v-cloak属性,就不会出现{{}}渲染闪烁问题 --> <div id="app" v-cloak> {{ }} {{ }} {{ }} </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', }) </script>
条件指令
<!-- 1) 两种都可以控制标签的显隐,绑定的值是布尔类型值,当都隐藏标签时 v-if是不渲染标签 v-show以 display:none 方式渲染 --> <div id="app"> <p v-if="isShow">if条件指令</p> <p v-show="isShow">show条件指令</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: false, } }) </script>
<!-- 2) v-if="变量" v-else-if="变量" v-else 一组分支,上成立分支会屏蔽下方所有分支,else分支没有条件,在所有分支不成立后才显示 --> <style> .box { width: 400px; height: 300px; } .r { background-color: red; } .y { background-color: yellow } .b { background-color: blue; } .active { background-color: pink; } </style> <div id="app"> <div class="em"> <p> <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button> <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button> <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button> </p> <p> <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button> <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button> <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button> </p> <div class="box r" v-if="showName == 'rBox'"></div> <div class="box y" v-else-if="showName == 'yBox'"></div> <div class="box b" v-else></div> </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { showName: 'rBox' }, methods: { changeBox(name) { this.showName = name; } } }) </script>
v-pre指令(了解)
v-pre指令可以在vue控制范围内,形成局部vue不控制区域(局部不解析vue语法)
<div id="app"> <p>{{ msg }}</p> <!-- v-pre 指令可以在vue控制范围内,形成局部vue不控制区域 {{ }} 和 v-if 都会原样输出,不会被解析 --> <p v-pre> {{ }} <span v-if="hehe"></span> </p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'message' } }) </script>
循环指令
1) 遍历字符串:可以只逐一遍历字符,也可以连同遍历索引
<p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>
2) 遍历数组:可以只逐一遍历成员元素,也可以连同遍历索引
<p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>
3) 遍历对象:可以只逐一遍历成员元素,也可以连同遍历成员键(key),还可以遍历成员key索引
<p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
<div id="app"> <p>{{ str }}</p> <p>{{ str[0] }}</p> <div> <span v-for="ch in str">{{ ch }}</span> </div> <div> <!--针对循环遍历的标签,通过会提供key属性来优化渲染速度,但key的值必须唯一(key可以不用提供) --> <span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span> </div> <div> <p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p> </div> <div> <p v-for="ele in dic">{{ ele }}</p> </div> <div> <p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p> </div> <div> <p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p> </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { str: 'abc123呵呵', arr: [3, 4, 1, 2, 5], dic: { name: 'Tank', age: 80, gender: '哇塞', } } }) </script>
todolist留言板案例
1) 留言就是往留言数组中添加数据,删除留言就是从留言数组中移除数据
2) 前台数据库: localStrong 和 sessionStrong
localStrong永久保存数据
sessionStrong临时保存数据(当所属页面标签被关闭,数据被清空)
3) 前台 localStrong 和 sessionStrong数据库存储的值是字符串类型,所以要存放arr,dic等复杂数据需要JSON参与
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> li:hover { color: red; cursor: pointer; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button type="button" @click="sendMsg">留言</button> </p> <ul> <li v-for="(msg, index) in msgs" @click="deleteMsg(index)"> {{ msg }} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 所有留言 userMsg: '', // 用户留言 }, methods: { sendMsg() { // 留言事件 // 尾增 // this.msgs.push(this.userMsg); // 首增 // this.msgs.unshift(this.userMsg); let userMsg = this.userMsg; if (userMsg) { this.msgs.unshift(userMsg); // 渲染给页面 localStorage.msgs = JSON.stringify(this.msgs); // 同步到数据库 this.userMsg = ''; // 清空留言框 } }, deleteMsg(index) { // 开始索引 操作长度 操作的结果们 this.msgs.splice(index, 1) } } }) </script> <script> // localStorage['num'] = 10; // sessionStorage.num = 888; // console.log(localStorage.num); // localStorage.msgs = JSON.stringify(['1111', '2222']); // console.log(JSON.parse(localStorage.msgs)); // console.log(JSON.parse(localStorage.msgs)[0]); </script> </html>
实例成员 - 插值表达式符号(了解)
div id="app"> {{ msg }} {[ msg ]} </div> <script> new Vue({ el: '#app', data: { msg: '12345' }, // delimiters: ['{{', '}}'], delimiters: ['{[', ']}'], }) </script>
实例成员 -- 计算属性
1) 一个变量的值依赖多个变量,且依赖的任意一个变量发生改变,该变量都会改变
computed
1) computed是用来声明 方法属性 的
2) 声明的方法属性不能再data中重复定义
3) 方法属性必须在页面中渲染使用,才会对内部出现的所有变量进行监听
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p @click="fn">{{ num }}</p> <p>十位:{{ parseInt(num / 10) }}</p> <p>个位:{{ num % 10 }}</p> <!-- 一个变量的值依赖多个变量,且依赖的任意一个变量发生改变,该变量都会改变 --> 十位:<input type="number" v-model="shi" min="0" max="9"> 个位:<input type="number" v-model="ge" min="0" max="9"> 结果:<b>{{ shi * 10 + +ge }}</b> 结果:<b>{{ result }}</b> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 99, shi: '', ge: '', // result: 0, }, methods: { fn() { this.num -= 3; } }, // 1) computed是用来声明 方法属性 的 // 2) 声明的方法属性不能在data中重复定义 // 3) 方法属性必须在页面中渲染使用,才会对内部出现的所有变量进行监听 computed: { result() { // console.log('该方法被调用了'); // this.shi; // this.ge; return this.shi * 10 + +this.ge } } }) </script> </html>
实例成员 -- 属性监听
1) 多个变量的值依赖一个变量,该变量发生改变,所有依赖变量都会改变
watch
1) watch为data中已存在的属性设置监听事件
2) 监听的属性值发生改变,就会触发监听事件
3) 监听事件的方法返回值没有任何意义
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- 多个变量的值依赖一个变量,该变量发生改变,所有依赖变量都会改变 --> <p @click="fn">{{ num }}</p> <p>十位:{{ shi }}</p> <p>个位:{{ ge }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 99, shi: 0, ge: 0, }, methods: { fn() { this.num -= 3; } }, // 1) watch为data中已存在的属性设置监听事件 // 2) 监听的属性值发送改变,就会触发监听事件 // 3) 监听事件的方法返回值没有任何意义 watch: { num () { // console.log('num改变了') this.shi = parseInt(this.num / 10); this.ge = this.num % 10; // return '12345' } } }) </script> </html>
监听案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> 姓:<input type="text" v-model="fName"> 名:<input type="text" v-model="lName"> 姓名:<b>{{ flName }}</b> <hr> 姓名:<input type="text" v-model="fullName"> 姓:<b>{{ firstName }}</b> 名:<b>{{ lastName }}</b> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { fName: '', lName: '', fullName: '', firstName: '', lastName: '', }, computed: { flName(){ return this.fName + this.lName; } }, watch: { fullName() { nameArr = this.fullName.split(''); this.firstName = nameArr[0]; this.lastName = nameArr[1]; } } }) </script> </html>
组件
1) 组件: 一个包含HTML,CSS,JS独立的集合体,这样的集合体可以完成页面结构的代码复用
2) 分组分为根组件,全局组件与局部组件
根组件: 所有被new Vue() 产生的组件,在项目开发阶段,一个项目只会出现一个根组件
全局组件:不用注册,就可以成为任何一个组件的子组件
局部组件:必须注册,才可以成为注册该局部组件的子组件
3) 每一个组件都有自身的html结构,css样式,js逻辑
每一个组件其实都有自己的template,就是用来标识自己的html结构的
template模板中有且只有一个根标签
根组件一般不提供template,就由挂载点的真实DOM提供html结构
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p>{{ msg }}</p> </div> <div id="main"> </div> </body> <script src="js/vue.js"></script> <script> // 1) 组件:一个包含html、css、js独立的集合体,这样的集合体可以完成页面解构的代码复用 // 2) 分组分为根组件、全局组件与局部组件 // 根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件 // 全局组件:不用注册,就可以成为任何一个组件的子组件 // 局部组件:必须注册,才可以成为注册该局部组件的子组件 // 3) 每一个组件都有自身的html结构,css样式,js逻辑 // 每一个组件其实都有自己的template,就是用来标识自己html结构的 // template模板中有且只有一个根标签 // 根组件一般不提供template,就由挂载点的真实DOM提供html结构 new Vue({ el: '#app', data: { msg: 'message', c1: 'red' }, template: ` <div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div> `, methods: { fn() { alert(this.msg) } } }); new Vue({ el: '#main', data: { msg: 'message' } }) </script> </html>
局部组件
创建一个局部组件
1) 创建局部组价
2) 在父组件中注册该局部组件
3) 在父组件的template模板中渲染该局部组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建一个局部组件 // 1) 创建局部组件 // 2) 在父组件中注册该局部组件 // 3) 在父组件的template模板中渲染该局部组件 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` }; new Vue({ el: '#app', components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script> </html>
全局组件
1) 创建全局组件
2) 在父组件的template模板中直接渲染该全局组件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 1) 创建全局组件 // 2) 在父组件的template模板中直接渲染该全局组件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); // 数据局部化分析导入 // a = function () { // return {num: 10} // }; // b1 = a(); // b2 = a(); // b3 = a(); new Vue({ el: '#app', }) </script> </html>
组件交互 -- 父传子
数据交互 - 父传子 - 通过绑定属性的方式
1) 父组件提供数据
2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供
3) 在子组件实例中,通过props实例成员获得自定义属性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .info { text-align: center; width: 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { width: 200px; } </style> </head> <body> <div id="app"> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> </body> <script src="js/vue.js"></script> <script> // 伪代码:模拟数据从后台请求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ let infos = [ { image: 'img/001.png', title: '小猫' }, { image: 'img/002.png', title: '蛋糕' }, { image: 'img/003.png', title: '蓝糕' }, { image: 'img/004.png', title: '恶犬' }, ]; let info = { template: ` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{ myinfo.title }}</b></p> </div> `, props: ['myinfo'] }; // 数据交互 - 父传子 - 通过绑定属性的方式 // 1) 父组件提供数据 // 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值有父组件提供 // 3) 在子组件实例中,通过props实例成员获得自定义属性 new Vue({ el: '#app', components: { info, }, data: { infos, } }) </script> </html>
组件交互 -- 子传父
1) 数据由子组件提供
2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来
3) 父组件为子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .close:hover { cursor: pointer; color: red; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button @click="sendMsg">留言</button> </p> <ul> <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> </ul> </div> </body> <script src="js/vue.js"></script> <script> let msgLi = { template: ` <li> <span class="close" @click="deleteMsg(index)">x </span> <span>第{{ index + 1 }}条:</span> <span>{{ msg }}</span> </li> `, props: ['msg', 'index'], methods: { // 系统的click事件 deleteMsg(i) { // $emit('自定义事件名', 参数们) this.$emit('remove_msg', i); this.$emit('myclick', 1, 2, 3, 4, 5) } } }; // 组件交互-子传父 // 1) 数据由子组件提供 // 2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来 // 3) 父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数 new Vue({ el: '#app', data: { msgs: [], userMsg: '' }, methods: { sendMsg() { if (this.userMsg) { this.msgs.push(this.userMsg); this.userMsg = ""; } }, removeAction(i) { this.msgs.splice(i, 1) } }, components: { msgLi } }) </script> </html>