文章目录
Vue的基础语法
(1)Mustache语法(双大括号)
{{message}}
- (1)mustache 美[ˈmʌstæʃ] 口上须,八字须;
- (2)数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值
- (3)特点是什么?
绑定的数据对象上属性发生了改变,插值处的内容都会更新
每个绑定都只能包含单个表达式 - (4)案例
{{true ? 'OK':'Not OK'}}
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }} //错误
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }} //错误
<h1>hello {{name}} </h1>
<h1>{{name1}} {{name2}} </h1>
<h1>{{name1 + ' ' + name2}} </h1>
<h1>{{name1 * 2}} </h1>
(2)读data数据的三个指令
(2-1)v-text (添加文本)
读data中的数据(代码),显示成字符串
<h1 v-text="msg">hello</h1>
//msg为字符串
//缺点 会覆盖元素中原有文本 建议用{{}}
(2-2)v-html(添加标签)
读data中的数据(代码),如果是代码,则执行代码
<h1 v-html="url">hello</h1>
//url为含标签的字符串
(2-3)v-bind(动态绑定属性)
读data中的数据赋值给属性
(2-3-1)简单绑定
<img v-bind:src="url">
//v-bind表明src属性是动态绑定的,于是就会在data中寻找对应的值
(2-3-2)对象绑定
<div v-bind:class="{active:isActive,text-danger:hasError}"></div>
<button v-on:click="btnClick">按钮</button>
//添加一个对象,当对象中的类名的值为true时,该类绑定到元素上
<script>
const app=new Vue({
el:'#app',
data:{
isActive:true,
hasError:false
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
}
}
})
</script>
(2-3-3)数组绑定
<div v-bind:class="[class1,class2]"></div>
//<div v-bind:class="['class1','class2']"></div>
//有''表示为字符串 无''表示变量
<script>
const app=new Vue({
el:'#app',
data:{
class1:'aa',
class2:'bb'
}
})
</script>
(2-3-4)style对象绑定
//50px得加'',否则当作变量解析
//两种表达方式
<div v-bind:style="font-size:'50px'"></div>
<div v-bind:style="fontSize:'50px'"></div>
<div v-bind:style="{fontSize:finalSize + 'px', color:finalColor}"></div>
//有''表示为字符串 无''表示变量
<script>
const app=new Vue({
el:'#app',
data:{
finalSize:100,
finalColor:'red'
//data中字符串得加''
}
})
</script>
(2-3-5)style数组绑定
<div v-bind:style="[baseStyle,base]"></div>
//有''表示为字符串 无''表示变量
<script>
const app=new Vue({
el:'#app',
data:{
baseStyle:{fontSize:'20px'},
base:{backgroundColor:'red'}
}
})
</script>
(2-4)案例
<body>
<div id="app">
<div v-text="message"></div>
<div >{{message}}</div>
<div v-html="message"></div>
<font v-bind:color="color1">我爱中国</font>
<font :color="color2">我爱中国</font>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'<font color="green"/>HelloWord</font>',
color1:'green',
color2:'red'
} ,//对应的数据
methods:{
}
}
) //创建了MVVM中的VM对象
</script>
(3)控制显示的指令
(3-1)v-if v-else-if v-else
<div id="app">
//v-if 如果为true则显示 为false则不显示
<h1 v-if="isShow"></h1>
//v-if-else 显示true的那个
<h1 v-if="isShow">if显示</h1>
<h1 v-else>else显示</h1>
//v-else-if 多条件不建议使用 太复杂
<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=60">良好</h1>
<h1 v-else>差</h1>
</div>
<script src="vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
isShow:true,
score:50
}
})
</script>
实例:用户账户邮箱切换
<div id="app">
<span v-if="isUser">
//label作用:当鼠标点击label文本的时候for所指向的input会聚焦
<label for="username">用户账号</label>
//不同的key用来解决切换后输入框内的内容不清空的情况
<input type="text" id="username" placeholder="用户账号" key="123">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="abc">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
isUser:true,
}
})
</script>
(3-2)v-show
//当v-if为false时,元素根本不在dom中
//当v-show为false时,给元素添加一个行内样式dipslay:none
//当需要频繁在显示和隐藏之间切换时用v-show
//当只有一次切换时,多用v-if
<h1 v-if="isShow">if显示</h1>
<h1 v-show="isShow">show显示</h1>
(3-3)案例
<body>
<div id="app">
<div v-if="flag">我是hello</div>
<div v-show="flag">我是world</div>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
flag:false
} ,//对应的数据
methods:{
}
}
) //创建了MVVM中的VM对象
</script>
(4)v-on
(4-1)点击事件 v-on
<body>
<div id="app">
{{message}}
<button v-on:click="func1('hello')">vue的onclick</button>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'hello Vue3'
}, //对应的数据
methods:{
func1:function (msg) {//msg='hello'
alert(msg)
}
}
}
) //创建了MVVM中的VM对象
</script>
(4-2)键盘事件 v-on
- (1) $event表示Vue中的事件对象,类似js中的对象一样。
$event - (2)keyCode是什么?
键盘的编码
<body>
<div id="app">
<input type="text" v-on:keydown="fun($event)">
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'hello Vue3'
}, //对应的数据
methods:{
fun:function (event) {//事件对象包含 event=$event
alert(event.keyCode)
}
}
}
) //创建了MVVM中的VM对象
</script>
(4-3)鼠标事件 v-on
- (1)
v-on:mouseover=“函数名()”
表示监听的是鼠标停留事件 - (2)可以简写
@mouseover=”函数名()”
<body>
<div id="app">
<!-- <div v-on:mouseover="fun($event)" style="height: 200px;width: 200px;background-color: green" >-->
<!-- </div>-->
<div @mouseover="fun($event)" style="height: 200px;width: 200px;background-color: green" >
</div>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'hello Vue3'
}, //对应的数据
methods:{
fun:function (event) {//事件对象包含 event=$event
alert("进入范围")
}
}
}
) //创建了MVVM中的VM对象
</script>
(5)Vue中的修饰符
(5-1)事件修饰符
- (1)什么是事件修饰符?
Vue.js 为 v-on 提供了事件修饰符。
修饰符是由点开头的指令后缀来表示的。相当于调用事件的方法 - (2)常见修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
- (3)案例
表单提交
嵌套点击 - (4) prevent与stop
prevent消灭事件
stop 消灭内部标签传给外部标签的事件
<body>
<div id="app">
<form @submit.prevent action="#" method="post">
<input type="text" name="username"><br/>
<input type="text" name="password"> <br/>
<input type="submit" value="login"> <br/>
</form>
<div>
<a @click.prevent href="http://www.baidu.com">进入百度页面</a>
</div>
<div @click="fun1" style="height: 200px;width: 200px;background-color: green">
<div @click.stop ="fun2" style="height: 100px;width: 100px;background-color: red">
</div>
</div>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'hello Vue3'
} ,//对应的数据
methods:{
fun1:function () {
alert("我是绿的")
},
fun2:function () {
alert("我是红的")
}
}
}
) //创建了MVVM中的VM对象
</script>
(5-2)Vue中的按键修饰符
- (1)什么是按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
相当于对keyCode进行判断,如查是符合条件的按键才执行对应的函数
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<body>
<div id="app">
<input type="text" v-on:keyup.enter="fun1($event)">
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
message:'hello Vue3'
} ,//对应的数据
methods:{
fun1:function (event) {
//if(event.keyCode==13){
alert("你点了回车")
//}
}
}
}
) //创建了MVVM中的VM对象
</script>
(6)循环指令v-for
- (1)v-for=”(元素) in 数组”
- (2)v-for=”(value,key) in map集合”
- (3)v-for=”(元素,index) in list集合”
读data中的多个元素,循环显示每一个元素
<body>
<div id="app">
<!-- <option v-for="(元素) in 数组"></option>-->
<select >
<option v-for="(name) in arr">{{name}}</option>
</select>
<hr/>
<!-- <li v-for="(值,键)in map集合"></li>-->
<ul>
<li v-for="(value,key) in product">{{key}} , {{value}}</li>
</ul>
<hr/>
<!-- <tr v-for="(元素,索引 ) in 列表">-->
<table border="1px" width="100%">
<tr>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr v-for="(user,index ) in userList">
<td>{{index}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.address}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
arr:['人事部','Java','Python'],
product:{name:'苹果12',price:1000,address:'bj'},
userList:[{name:'jack',age:13,address:'bj'},{name:'rose',age:12,address:'bj'},{name:'tony',age:12,address:'bj'}]
} ,//对应的数据
methods:{
}
}
) //创建了MVVM中的VM对象
</script>
(7)v-model指令
- (1)v-model是一个指令,限制在< input>、< select>、< textarea>、components中使用
<body>
<div id="app">
<!--更新-->
<form action="" method="post">
username:<input type="text" v-model="user.username" ><br/>
password:<input type="text" v-model="user.password" ><br/>
<input type="submit" value="login" ><br/>
</form>
<hr/>
{{user.username}}
{{user.password}}
</div>
</body>
<script>
//view model
var vm = new Vue(
{
el:'#app', //让vu掌握指定的视频区域
data:{
user:{username:'jack',password:'123456'}
} ,//对应的数据
methods:{
}
}
) //创建了MVVM中的VM对象
</script>