1、模板语言
1) 声明式渲染
{{message}}
{{表达式}}
2) 指令
v-model
实现视图和数据的想象绑定
{{}}
在双大括号不仅能绑定属性值,还能绑定表达式
{{ message.split('').reverse().join('') }}
v-once
实现一次性的插值,数据改变时,插值处的内容不会更新。注意影响到该节点其他数据绑定
<span v-once>这个值将不会改变:{{userName}}</span>
v-text
功能与双大括号相同,v-text里面可以为变量或表达式,可以用字符串拼接两个值
v-html
在页面输出真正的html代码,双大括号输出的为普通文本
v-on:
事件类型,用来触发页面事件的指令
常用的事件:
mouseover:鼠标放上事件
mouseout:鼠标移开事件
change:内容改变事件
focus:聚焦事件
blur:失去焦点事件
v-bind
:属性,布尔特性 (它们只要存在就意味着值为 true)
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled 特性甚至不会被包含在渲染出来的 <button>
元素中
v-if
=“条件”
v-show
=“条件”
当dom元素频繁的显示与隐藏相互切换使用v-show,因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性
v-for
=“item in list”
3) 指令简写
v-on:click => @click
v-bind:value => :value
<a v-bind:href="url">...</a> //href为参数,告诉v-band指令将href和url绑定在一起
v-slot:slotName="作用域" => #slotName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
.menus {
width: 200px;
text-align: center;
}
.menus > li.basic {
background: pink;
color: #fff;
border-bottom: 1px solid #efefef;
line-height: 2em;
}
.menus > li.current {
background: #fff;
color: pink;
}
.menus > li.aaa {
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<ul class="menus">
<!-- <li v-for='item in list' @click='clickHandler(item)' :class="currentTab === item ?'current':'' ">
{{item}}
</li> -->
<!-- <li v-for='item in list' @click='clickHandler(item)' :class="{basic:true,current:currentTab === item}">
{{item}}
</li> -->
<!-- 都是选中状态 -->
<!-- <li v-for='item in list' @click='clickHandler(item)' :class="['basic','current']">
{{item}}
</li> -->
<!-- 都是非选中状态 -->
<li v-for='item in list' @click='clickHandler(item)' :class="['basic','a']">
{{item}}
</li>
</ul>
{{currentTab}}
</div>
<script>
new Vue({
el:'#app',
data:{
a:'aaa',
//选中顾客管理,相当于模拟点击事件
currentTab:'顾客管理',
list:['顾客管理','栏目管理','订单管理','评论管理']
},
methods:{
clickHandler(item){
this.currentTab = item;
}
}
})
</script>
</body>
</html>
<form action="" @submit="submitHandler"></form>
<form action="" v-on:submit="submitHandler"></form>
<input type="checkbox" v-bind:value="ids">
<input type="checkbox" :value="ids">
:属性 动态绑定,表示ids为变量,去data中匹配这个变量
<input type="checkbox" value="ids">
属性 静态绑定,表示ids为值,也就是value的值为ids
<div v-bind:style="s"></div>
new Vue({
data:{
ids:[],
s:{
color:"red",
background:"#ededed"
}
},
methods:{
submitHandler(){
}
}
})
模板语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语言</title>
<!-- 导入vue -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if='isShow'>
你看到我了if
</div>
<div v-show='isShow'>
你看到我了show
</div>
{{message}}
<p>{{message.split('').reverse().join('')}}</p>
<p>状态 {{status==0?'禁用':'正常'}}</p>
<p>{{foo()}}</p>
<p><input type="text" v-bind:value='status'></p>
<div>
{{inner}}
</div>
<div v-html='inner'></div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello Vue',
status:0,
inner:'<h2>this is inner</h2>',
isShow:true
},
methods:{
foo(){
return 'this is foo'
}
}
})
</script>
</body>
</html>
2、事件机制
(1) 事件绑定
v-on:eventType="handler"
@eventType="handler"
@eventType="js表达式"
<div @click="handler">添加</div>
methods:{
handler(event){
}
}
事件源 div
事件处理函数 handler
事件对象 event
(2) 事件对象
1) 事件处理函数中没有参数
<button @click="add"></button>
methods:{
add(event){
event就是事件对象
}
}
2)事件处理函数中有参数
<button @click="add(3,$event)"></button>
methods:{
add(num,event){
num 为3
event就是事件对象
}
}
- 事件类型修饰符
1>事件修饰符
@eventType.prevent
@eventType.stop
@eventType.self
@eventType.once
@eventType.capture
@scroll.passive
2>按键修饰符
只适用于keyup、keydown、keypress
@keyup.enter
@keyup.tab
@keyup.delete
@keyup.esc
@keyup.space
@keyup.up
@keyup.right
@keyup.down
@keyup.left
3>系统修饰键
@eventType.ctrl
@eventType.alt
@eventType.shift
@eventType.meta
4>鼠标按键修饰符
适用于mouseup、mousedown、mousepress
@eventType.left
@eventType.right
@eventType.middle
事件机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件机制</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>num:{{num}}</p>
<button @click='add(3,$event)'>增加</button>
<button @click='num++'>增加</button>
</div>
<script>
new Vue({
el:'#app',
data:{
num:1
},
methods:{
add(a,event){
console.log('event:',event);
this.num++;
}
}
})
</script>
</body>
</html>
3、 动态绑定class与style
1) class
:class="表达式"
:class="{className:flag}"
className存在与否取决于flag是否为true
:class="['basic',a]"
- style
style="backgrond:pink;color:#fff"
=>
:style="{background:'pink',color:'#fff'}"
=>
:style="{background:a,color:b}"
data:{
a:"pink",
b:"#fff"
}
=>
:style="[a,b]"
data:{
a:{background:"pink"},
b:{color:"#fff"}
}
4>条件渲染
v-if
v-else-if
v-else
案例分析:
<div v-if='flag' :key="1">
hello
</div>
<div v-else :key="2">
world
</div>
v-show
<div v-show='flag'>
hello
</div>
flag===true 显示
条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="userinfo">
<p v-if='user===null'>
<a href="">登录</a>
没有密码?
<a href="">注册</a>
</p>
<p v-else-if='user.super'>
<em>{{user.name}}</em>
<span>{{usr.telephone}}</span>
</p>
<p v-else>
<strong>{{user.name}}</strong>
<span>{{user.telephone}}</span>
</p>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
user:null,
loginType:'username'
},
created(){
setTimeout(()=>{
this.user={
name:'terry',
telephone:'1888888888',
super:false
}
},1000)
}
})
</script>
</body>
</html>
- 列表渲染
<ul>
<li v-for="item in list" :key="item">
{{item}}
</li>
</ul>
data:{
return {
list:["国际新闻","国内新闻","体育新闻"]
}
}
list.pop()
list.push()