一、v-once指令
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> <input type="text" v-model="mymsg"> <!--只有v-once 加上就是初始值值一样也式不能进行修改的 只有自己=手动修改才可以--> <input type="text" v-model="mymsg" v-once > <hr> <p>{{ mymsg }}</p> <!--加上 同上 单独使用--> <p v-once>{{ mymsg }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ mymsg:'我是初始值', } }) </script> </html>
二、v-cloak(了解)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style>
// 方法一 /*样式先进行隐藏 不展示 目的: 在添加大量样式的时候不进行样式展示 >>> 闪烁事件*/ [v-cloak]{ display: none; } </style> 方法二是 先加载页面
<script src="js/vue.js"></script>
</head> <body> <div id="app" v-cloak> <p>{{ }}</p> <p>{{ }}</p> <p>{{ }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', }) </script> </html>
v-cloak: 防止闪烁
三、条件指令
true 的话会将两个都进行展示
普通的点击绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> /*操作图表样式 这里是分开的来写了*/ .box{ 400px; height: 400px; float: left; margin: 10px; } /*操作类的的属性的颜色*/ .red{ background-color: red; } .yye{ background-color: yellow; } .blue{ background-color: blue; } .active{background-color: deeppink} </style> </head> <body> <div id="app"> <!--v-if='变量' 一般变量是布尔值--> <!--v-else-if='变量'--> <!--v-else--> <!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 --> <!--else 是上面了两个都不满足才会走下面的else--> <!----> <p v-if="0">if条件成立</p> <p v-else-if="1">else-if条件成立</p> <p v-else>else最后</p> <div class="yyy"> <p> <button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button> <button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button> <button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button> </p> <!--条件判断点击哪一个 哪一个就展示页面--> <div class="box red" v-if="showName == 'redBox'"></div> <div class="box yye" v-else-if="showName == 'yyeBox'"></div> <div class="box blue" v-else></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ showName:'', }, // 点击事件 方法 methods: { changeBox(name) { this.showName=name; } } }) </script> </html>
三元表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> /*操作图表样式 这里是分开的来写了*/ .box{ 400px; height: 400px; float: left; margin: 10px; } /*操作类的的属性的颜色*/ .red{ background-color: red; } .yye{ background-color: yellow; } .blue{ background-color: blue; } .active{background-color: deeppink} </style> </head> <body> <div id="app"> <!--v-if='变量' 一般变量是布尔值--> <!--v-else-if='变量'--> <!--v-else--> <!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 --> <!--else 是上面了两个都不满足才会走下面的else--> <!----> <!--<p v-if="0">if条件成立</p>--> <!--<p v-else-if="1">else-if条件成立</p>--> <!--<p v-else>else最后</p>--> <div class="yyy"> <!--<p>--> <!--<button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button>--> <!--<button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button>--> <!--<button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button>--> <!--</p>--> <p > <button @click="changeBox('redBox')" :class="showName == 'redBox' ? 'active' : ''">红</button> <button @click="changeBox('yyeBox')" :class="showName == 'yyeBox' ? 'active' : ''">黄</button> 刚才这里出现无敌的BUG 其实就中文的符号 '' 区别而已'' 整得半天 <button @click="changeBox('blueBox')" :class="showName == 'blueBox' ? 'active' : ''">蓝</button> </p> <!--条件判断点击哪一个 哪一个就展示页面--> <div class="box red" v-if="showName == 'redBox'"></div> <div class="box yye" v-else-if="showName == 'yyeBox'"></div> <div class="box blue" v-else></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ showName:'redBox', }, // 点击事件 方法 methods: { changeBox(name) { this.showName=name; } } }) </script> </html>
四、v-pre 指令（了解）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> <p>{{msg}}</p> <p v-pre> {{ msg}} // v-pre 指令可以在vue控制范围内 行成局部的vue不可控制区域 也就是不会渲染 而是原义进行显示 <span v-if="xixixi"></span> </p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'message' } }) </script> </html>
五、循环指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> (1)遍历字符串 <p>{{str}}</p> <!--只能索引取值不能进行切片--> <p>{{str[1]}}</p> <div> <!--v-for ="循环语句" 底层原理进行封装--> <span v-for="i in str">{{i }}</span> </div> <!--针对循环遍历的标签,通过会提供key属性来优化渲染速度 key 必须是唯一 (key可以不用提供)--> <div v-for="(i,index) in str" :key="i+index">{{i}} {{index}}</div> (2)遍历数组 <!--元素和索引足以位置--> <div v-for="(i, index) in list1"> {{index}} {{i}} </div> （3）字典 key：value <div v-for="(s,i) in dic">{{i}}:{{s}} </div> <div v-for="(c,k,i) in dic"> {{c}} {{k}}:{{i}} </div> koko name:0 18 age:1 </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ str:'快乐的压缩123adc', list1:[1,2,3,4,8,6], dic:{'name':'koko','age':18} } }) </script> </html>
六、todolist留言板留言案chc列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> li:hover{ color: red; cursor: pointer; } </style> </head> <body> <div id="app"> <p> <!--（1）input 框绑定事件--> <input type="text" v-model="userMsg"> <!--(2)留言按钮绑定点击事件--> <button type="button" @click="sendMsg">留言</button> </p> <ul> <!--列变组 放多i个值 删除 绑定删除点击事件--> <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:{ userMsg:'', // 用户写入的留言 初始值为空 // 赋值 取值 反序列化 s所有的留言 msgs:localStorage.msgs ? JSON.parse(localStorage.msgs): [], }, methods:{ sendMsg(){ // 开始留言点击事件 // 尾部增加 this.msgs.push(this.userMsg)； // 开头位置增加 this.msgs.unshift(this.userMsg); // 赋值变量 >>> msgs 变量容器 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> </html>
七、实例成员-插值表达式符号（了解）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> {{123546}} {[msg]} + msg + </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'123' }, delimiters:['{[',']}'] }) </script> </html>
注意的是
delimiters:['{[',']}'] 外面套的是一个列表 用逗号分隔开 是咧成员符号只要
{{123546}}
{[msg]}
+ msg +
不配配或者不相同就行了 就不会帮我们解析 按照愿意字符串进行 渲染 可以结合的django 的语法去做模板渲染值
八、计算属性（compute）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> <!--// methon函数绑定--> <p @click="f1">{{num}}</p> <p>十位：{{parseInt(num/10)}}</p> 取整 <p>各位：{{num%10}}</p> 取余 <hr> 一个变量的值依赖多个变量，且依赖的任意一个变量发生改变，该变量都会改变 十位：<input type="number" v-model="shi_wei" min="0" max="9"> 各位：<input type="number" v-model="ge_wei" min="0" max="9"> 结果：<b>{{ shi_wei*10 + +ge_wei }}</b> 结果：<b>{{result}}</b> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ num:99, shi_wei:'', // 初始值 ge_wei:'', // 初始值 }, methods:{ f1(){ this.num -=3; } }, // 1) computed是用来声明 方法属性 的 // 2) 声明的方法属性不能在data中重复定义 // 3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听 computed:{ result(){ return this.shi_wei*10 + +this.ge_wei //+this.ge_wei ”+“是转成数字 } } }) </script> </html>
九、属性监听（wach）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> <!--多个变量的值依赖一个变量,改变量发生改变,所有依赖的值都会发生改变--> <!--测试点击事件--> <p @click="f1">{{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:{ f1(){ this.num -=3; } }, watch:{ num(){ this.shi = parseInt(this.num / 10); this.ge = this.num % 10; } } }) </script> </html>
计算和监听案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> 姓:<input type="text" v-model="fName"> 名:<input type="text" v-model="lName"> 姓名:<b>{{fuName}}</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: { fuName(){ // 组合式 返回输入的 姓 + 名 = 名字 return this.fName + this.lName; } }, watch:{ fullName(){ nameArr = this.fullName.split(''); console.log(nameArr); 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="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'mymessge', c1:'red' }, template:` <div :style="{color:c1}" @click="fn">{{msg}} {{msg}}</div>` ,methods:{ fn(){ // alter(this.msg) } } }) </script> </html>
10.1 局部组件
// 创建局部组件
// 1) 首先创建局部组件template模板
// 2)在父组件中注册改局部组件
// 3)在父组件的template 模板中渲染该局部组件
需要注意的是:必须将我们局部组件进行 注册 >>> 在原父组件 实列对象进行注册 注册模板的key不能写驼峰体 推荐命名中划线 然后 将注册的组件template模板渲染到父组件标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> .box{ box-shadow: 0 3px 5px 0 gold; 240px; height: 300px; text-align: center; padding: 10px 0; margin: 5px; float: left; } .box img { 200px; height: 220px; } </style> </head> <body> <div id="app"> <!--这里作为局部模板的展示 但是必须和components: 注册的可以一致 而且推荐使用中划线 不能解析驼峰体--> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建局部组件 // 1) 说先创建局部组件template模板 // 2)在父组件中注册改局部组件 // 3)在父组件的template 模板中渲染该局部组件 let localTag = { template:` <div class="box"> <img src="img/111.jpg" alt=""> <h3>样板</h3> <p>初步样式</p> </div> ` }; new Vue({ el:'#app', components:{ // 这也是个坑啊 'local-tag':localTag, } }) </script> </html>
10.2 全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> .box{ box-shadow: 0 3px 5px 0 gold; 240px; height: 300px; text-align: center; padding: 10px 0; margin: 5px; float: left; } .box img { 200px; height: 220px; } </style> </head> <body> <div id="app"> <global-tag></global-tag> <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/111.jpg" alt=""> <h3>样式</h3> <p>适用样式❤{{num}}</p> </div> `, data(){ // 应用data :function() 返回数字 return { num:0 } }, methods:{ // 变量名 函数名 数据属性和方法都是在我们的全局组件中哦 action(){ this.num ++; } } }); new Vue({ el:'#app', }) </script> </html>
重点解析组件:
十一、组件交互-父传子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之模板操作二</title> <style> .info { text-align: center; 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { 200px; height: 220px; } </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 = [ { image:'img/111.jpg', title:'油画' }, {image:'img/222.jpg', title:'漫画' }, {image:'img/333.jpg', title:'小猫' } ]; // 创建局部组件 渲染样式 let info = { template:` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{myinfo.title}}</b></p> </div> `, // 通过props 将获取的 props:['myinfo'] }; // 数据是如何进行交互的呢 数据交互-父传子-通过绑定属性的方法 // 1)通过父组件提供数据 // 2/) 在父组件模板中, 为子组件标签设置自定义属性,绑定的值由父组件提供 // 3) 在子组件实列中,通过props 实列成员获取自定义属性 new Vue({ el:'#app', //注册局部组件 components:{ // 将我们创建的 局部组件进行注册 'info':info, }, data:{ // 定义的let infos 进行传值 'infos':infos } }) </script> </html>
十二、组件交互-子传父
<!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>