Vue之指令和绑定
2024-09-06 08:57:35
一、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{
width: 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="">if条件成立</p>
<p v-else-if="">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{
width: 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="">if条件成立</p>-->
<!--<p v-else-if="">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:''
},
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="" max="">
各位：<input type="number" v-model="ge_wei" min="" max="">
结果：<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:,
shi:,
ge:, },
// 方法:
methods:{
f1(){
this.num -=;
} },
watch:{
num(){
this.shi = parseInt(this.num / );
this.ge = this.num % ;
}
}
})
</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[];
this.lastName = nameArr[];
}
} })
</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;
width: 240px;
height: 300px;
text-align: center;
padding: 10px 0;
margin: 5px;
float: left;
}
.box img {
width: 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;
width: 240px;
height: 300px;
text-align: center;
padding: 10px 0;
margin: 5px;
float: left;
}
.box img {
width: 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;
width: 200px;
padding: 3px;
box-shadow: 0 3px 5px 0 pink;
float: left;
margin: 5px;
}
.info img {
width: 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>
最新文章
- 一步步学习javascript基础篇（8）：细说事件
- OpenCascade MeshVS Usage
- Javascript如何实现AOP
- UWP应用开发系列视频教程简介 - Built for Windows 10
- Linux 进程间通信(二) 管道
- 编辑WCF配置不出现
- xcode-重新打开欢迎界面
- activemq重启
- Android-java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()
- ios9怎么设置6位密码 ios9设置6位密码图文教程
- 通过条件注释<!--[if IE]><!-->判断浏览器
- Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序
- Emgu.CV(三)
- 一年java工作经验的面试题总结（持续更新中）
- tomcat设置直接通过域名访问项目（不需要接 /项目名）
- CPU运行原理
- android 异常信息The specified child already has a parent. You must call removeView() on the child's parent first. 的处理方法
- [OpenCV-Python] OpenCV 中机器学习 部分 VIII
- TortoiseSVN上传cocos2dx的项目不能打包的问题!
- 点线特征双目视觉SLAM---暑期笔记