Vue will implement different functions for labels according to different instructions.
Directive: Special tag attributes with v- prefix
v-prefix="expression"
1.v-html
Function: Dynamically parse the innerHTML tag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
msg:'<a href="http://www.itheima.com">黑马程序员</a>'
}
})
</script>
</html>2.v-show
Function: Control the display and hiding of elements
Syntax: v-show="expression" The expression value true is displayed and false is hidden.
Principle: Hidden from the perspective of css, adding display:none;
Scene: frequently switch to show hidden scenes
3.v-if
Function: Control the display and hiding of elements (conditional rendering)
Syntax: v-if="expression" The expression value true is displayed and false is hidden.
Scene: Either show or hide, scenes that are not frequently switched
4.v-else v-else-if
Function: Assist v-if to judge rendering
Syntax: v-else v-else-if="expression"
Note: Need to be used next to v-if
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<p v-if="gender==1">性别：男</p>
<p v-else>性别：女</p>
<hr>
<p v-if="score>=90">成绩评定A:奖励电脑一台</p>
<p v-else-if="score>=75">成绩评定B:奖励周末郊游</p>
<p v-else-if="score>=60">成绩评定C:奖励零食礼包</p>
<p v-else>成绩评定D:奖励一周不能玩手机</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
gender:1,
score:80
}
})
</script>
</html>5.v-on
Function: Register event = add listening + provide processing logic
Syntax: 1) v-on: event name = "inline statement"
2) v-on: event name = "function name in methods"
Abbreviation: @eventname=""
Note: this in the methods function points to the Vue instance
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<!-- 鼠标点击 -->
<button @click="count--">-</button> <!-- @=v-on: -->
<span>{
{count}}</span>
<button v-on:click="count++">+</button>
<hr>
<!-- 鼠标划入 -->
<button v-on:mouseenter="count--">-</button>
<span>{
{count}}</span>
<button v-on:mouseenter="count++">+</button>
<hr>
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
count:0,
isShow:true
},
methods:{
//methods中的函数使用this都指向当前实例
fn(){
app.isShow=!app.isShow //this.isShow=!this.isShow
}
}
})
</script>
</html>v-on call passing parameters
Example: Beverage vending machine
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<div style="border:2px solid #000;width:140px;height:auto;padding:20px;border-radius:15px;">
<h3>饮料自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额:{
{money}}元</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
money:100
},
methods:{
buy(a){
this.money-=a
}
}
})
</script>
</html>6.v-bind
Function: Dynamically set the html tag attribute->src url title...
Syntax: v-bind:attribute name="expression"
Abbreviation: :property name="expression"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<!-- v-bind:src可简写为:src -->
<img v-bind:src="imgUrl" v-bind:title="msg">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
imgUrl:'./image/logo.jpeg',
msg:'hello Vue'
}
})
</script>
</html>Example: Image carousel
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<button @click="i--" v-show="i>0">上一页</button>
<img :src="imgList[i]" style="width:300px;">
<button @click="i++" v-show="i<imgList.length-1">下一页</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
i:0,
imgList:[
'./image/1.jpg',
'./image/2.jpg',
'./image/3.jpg',
]
}
})
</script>
</html>7.v-for
Function: Based on data loop, render the entire element multiple times -> array, object, number...
Syntax: v-for="(item,index) in array" item is each item, index is the subscript
If index is not required, it can be abbreviated as v-for="item in array"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<h3>水果店</h3>
<ul>
<li v-for="(item,index) in list">{
{item}}</li>
<li v-for="item in list">{
{item}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
list:['西瓜','葡萄','桃子']
}
})
</script>
</html>Example: Bookshelf
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
<h3>书架</h3>
<ul>
<li v-for="(item,index) in booksList">
<span>{
{item.name}}</span>
<span>{
{item.author}}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
booksList:[
{id:1,name:'《红楼梦》',author:'曹雪芹'},
{id:2,name:'《西游记》',author:'吴承恩'},
{id:3,name:'《水浒传》',author:'施耐庵'},
{id:4,name:'《三国演义》',author:'罗贯中'}
]
},
methods:{
del(id){
//filter:根据条件，保留满足条件的对应项，得到一个新数组
//箭头函数filter(item=>item.id!==id)相当于filter(item){item.id!==id}
this.booksList=this.booksList.filter(item=>item.id!=id)
}
}
})
</script>
</html>key in v-for
Syntax: :key=""
Function: A unique identifier added to the list item. It is convenient for Vue to correctly sort and reuse list items.
If you do not add a key, the default behavior of v-for will try to modify the element in place (reuse in place)
important point:
1) The value of key can only be string or numeric type
2) The value of key must be unique
3) It is recommended to use id as the key (unique), and it is not recommended to use index as the key (it will change and does not correspond)
<li v-for="(item,index) in xxx" :key="xxx.id"></li>8.v-model
Function: used for form elements, two-way data binding -> can quickly obtain or set the content of form elements
1)Data changes->try to update automatically
2) View changes->data automatically updated
Syntax: v-model='variable'
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body>
<div id="app">
账户：<input type="text" v-model="username"><br><br>
密码：<input type="password" v-model="password"><br><br>
<button @cilck="login">登录</button>
<button @click="reset">重置</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
username:'',
password:''
},
methods:{
login(){
console.log(this.username)
},
reset(){
this.username='',
this.password=''
}
}
})
</script>
</html>