Vue指令系统
vuev-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<div v-text="1+1"></div>
<div v-text="msg.slice(1)"></div>
<div v-text="arr[0]"></div>
<div v-text="1>2?'假':'真'"></div>
<div v-text="arr.length"></div>
<hr>
<div v-cloak>{{msg}}</div>
<div v-cloak>{{1+1}}</div>
<div v-cloak>{{msg.slice(1)}}</div>
<div v-cloak>{{arr[0]}}</div>
<div v-cloak>{{1>2?'假':'真'}}</div>
<div v-cloak>{{arr.length}}</div>
<div v-cloak>{{h2}}</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:'1905',
arr:[10,20,30,40],
h2:"<h2>abc</h2>"
}
})
/*
v-text:
作用:
1、解析data种的数据
2、可以书写任何JS的表达式
注意：指令必须作用的元素身上
简写:{{}}
底层原理：innerText
*/
</script>
vuev-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html="h2"></div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
h2:"<h2>abc</h2>"
}
})
/*
v-html:
作用:
解析html的数据
注意：指令必须作用的元素身上
底层原理：innerHTML
*/
</script>
vuev-ifv-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-show="flag">你们是最胖的</h2>
<hr>
<h2 v-if="casen == 1">周一</h2>
<h2 v-else-if="casen == 2">周二</h2>
<h2 v-else>周三</h2>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true,
casen:10
}
})
/*
v-show:
作用：控制元素的显示隐藏
如果值为true则显示 值为false则隐藏
底层原理：操作元素的display属性
v-if:
作用：控制元素的显示隐藏,但是可以做逻辑判断
如果值为true则显示 值为false则隐藏
底层原理：操作元素的移除和添加
v-else-if
v-else
注意:当使用v-else-if v-else的时候必须在之前使用v-if
v-if以及v-show的区别？以及使用的场景
相同点：都是控制元素的显示隐藏
不同点：
v-show 是操作元素的display属性
v-if是操作元素的移除和添加 另外v-if还可以配合v-else-if v-else使用
使用的场景
1、v-show：当业务逻辑需要当前的模块在页面进行隐藏而不是移除的时候用（选项卡，导航）v-show
2、v-if 当业务逻辑需要当前的模块在页面进行移除的时候并且在控制台查找不到的时候用v-if （权限）
vip8 普通用户
后台管理系统的权限校验的时候如果是vip8的显示相对应得页面
单页面开发的时候
*/
</script>
vuev-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="(item,index) in goods">
<p>{{item.goodsId}}</p>
<p>{{item.goodsName}}</p>
</div>
<div v-for="(item,index) in arr">
<p>{{item}}----{{index}}</p>
</div>
<hr>
<p v-for="(item,index) in obj">{{item}}----{{index}}</p>
<p v-for="(item,index) in 'qianfeng'">{{item}}</p>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
goods:[
{
goodsId:1,
goodsName:"三只松鼠"
},
{
goodsId:2,
goodsName:"四只松鼠"
},
{
goodsId:3,
goodsName:"五只松鼠"
},
{
goodsId:4,
goodsName:"两只老虎"
},
],
arr:[10,20,30,40],
obj:{
username:"zhangsan",
age:19
}
}
})
/*
v-for:
作用：遍历数据
*/
</script>
vuev-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:class="myclass"></div>
<div v-bind:class="classArr"></div>
<div v-bind:class="classObj"></div>
<hr>
<div :style="myStyle" :title="title"></div>
<hr>
<img :src="mySrc">
<a :href="myhref">百度</a>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
myclass:"box",
classArr:['box1','box2','box3'],
classObj:{
"box1":true,
"box2":false,
"box3":true
},
myStyle:{
width:"200px",
height:"200px",
backgroundColor:"red"
},
title:"盒子",
mySrc:"https://cn.vuejs.org/images/logo.png",
myhref:"http://www.baidu.com"
}
})
/*
v-bind
作用：用来绑定属性
简写: 冒号 :
常见的属性：
class
id
style
title
src
href
*/
</script>
vuev-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width: 300px;
height: 300px;
background: red;
}
.child{
width: 150px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="handleClick(123,$event)">点击</button>
<div class="content" @click="handleContent()" @contextMenu.prevent="handleMenu()">
<div class="child" @click.stop="handleChild()"></div>
</div>
<input type="text" @keydown.13="handleInput()">
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
h2:"<h2>abc</h2>"
},
//当前vue所拥有的一些方法
methods:{
handleClick(val,e){
console.log(val,e)
},
handleChild(){
alert("child")
},
handleContent(){
alert("content")
},
handleMenu(){
console.log("右键菜单")
},
handleInput(){
console.log("回车")
}
}
})
/*
v-on:
事件绑定
语法: v-on:事件类型
如果需要在函数种使用事件对象 必须要在函数种传递一个形参$event
简写: @事件名称
修饰符：在指令后面加的一些属性叫做修饰符
stop:阻止冒泡
prevent: 组织默认行为
enter: 回车
code值
*/
</script>
vuev-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h2>{{msg}}</h2>
<hr />
<label>
男:<input type="radio" value="男" v-model="radioVal">
</label>
<label>
女:<input type="radio" value="女" v-model="radioVal">
</label>
<p>您选择的性别是:{{radioVal}}</p>
<hr>
<label>
抽烟:<input type="checkbox" value="抽烟" v-model="checkVal">
</label>
<label>
喝酒:<input type="checkbox" value="喝酒" v-model="checkVal">
</label>
<label>
烫头:<input type="checkbox" value="烫头" v-model="checkVal">
</label>
<label>
大保健:<input type="checkbox" value="大保健" v-model="checkVal">
</label>
<p v-for="item in checkVal">{{item}}</p>
<hr>
<select v-model="selectVal">
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select>
<p>您的出身日期是:{{selectVal}}</p>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "1905",
radioVal: "男",
checkVal:[],
selectVal:"1997"
},
methods: {
}
})
console.log(vm);
/*
v-model
作用：双向绑定
注意：v-model只能作用在form表单上
底层的原理：
Object.defineProperty:
3.0 new Proxy:
凡是在data里面的数据身上都会有2个方法 一个是getter方法 一个是setter方法
*/
</script>
其他不常用的指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <p v-pre>在vue中{{msg}}用来解析data中的数据</p> -->
<h2 v-once>{{msg}}</h2>
<button @click="handleModify()">点击</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"1905"
},
methods:{
handleModify(){
this.msg = "1902";
}
}
})
/*
v-pre: 不解析{{}}中的数据
v-cloak :防止初次加载的时候{{}}显示
v-once :数据只解析一次
如果需要在methods中访问data中的数据的时候 只需要this.属性即可
*/
</script>
浙公网安备 33010602011771号