Vue基本指令 1.差值表达式 又叫声明式渲染/文本差值 语法： {{ 表达式 }} !-- 差值表达式 --div id="app"h1{{name}}/h1h1{{jxxin.age}}/h1h1{{jxxin.addr}}/h1/div!-- -----------------------------------------------------
1.差值表达式
又叫声明式渲染/文本差值
语法：{{表达式}}
<!-- 差值表达式 -->
<div id="app">
<h1>{{name}}</h1>
<h1>{{jxxin.age}}</h1>
<h1>{{jxxin.addr}}</h1>
</div>
<!-- ----------------------------------------------------------- -->
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
name:"xiaoming",
jxxin:{
age:"56",
addr:"云南的好玩"
}
}
});
vue指令 v-bind
vue指令实质：给特殊的html标签属性，特点v-开头
语法：v-bind：属性名
<div id="app2">
<a v-bind:href="url">点击我跳转</a>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app2",
data:{
url:'https://cn.vuejs.org/'
}
});
</script>
v-bind绑定class
<style>
.dom {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
background-color: red;
}
</style>
<div id="app3">
<div v-bind:class="sty"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app3",
data: {
sty:"dom"
}
});
</script>
vue指令 v-text和v-html
作用：给目标标签的更新innerText/innerHTML
语法：v-text='vue变量'
v-html='vue变量'
注意：它会覆盖差值表达式
<div id="app">
<h1>{{name}}</h1>
<h1>{{jxxin.age}}</h1>
<h1 v-html='str'>{{jxxin.addr}}</h1>
<h1 v-text='str'>我有值的</h1>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
name:"xiaoming",
str:'我要替换你的值',
jxxin:{
age:"56",
addr:"云南的好玩"
}
}
});
</script>
vue指令 v-on
作用：给标签绑定事件
语法：
- v-on:事件名="要执行的少量代码"
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
<div id="app">
<h1>您已经累计充值：{{money}}人民币</h1>
<button v-on:click="money=money+1">点我+1</button>
<button v-on:click="add1">点我增加1个</button>
<button v-on:click="addco(5)">点我+5</button>
<button @click="del">点我扣除1</button>
<button @click="delcot(10)">点我扣除10</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
add1: function() {
this.money++;
},
addco: function(num) {
this.money += num;
},
del: function() {
this.money--;
},
delcot: function(num) {
this.money -= num;
}
}
});
</script>
效果：
v-on指令修饰符
修饰符包括:事件修饰符、按键修饰符、系统修饰符和鼠标按钮修饰符
事件修饰符
-
.stop 阻止事件冒泡
事件冒泡：比如box2在box1中，点击box2时，也同时点击了box1，这就是事件冒泡
从最具体的元素到不具体的元素（由内到外）
当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)
<div id="app2"> <div @click="tgclk"> <button @click.stop="zuzclk">点我阻止冒泡</button> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app2', methods: { tgclk() { console.log('我让你走') }, zuzclk() { console.log('阻止冒泡') } } }); </script> -
.prevent 阻止默认事件
调用
event.preventDefault()，阻止默认事件，比如：form表单在提交时，会自动刷新页面
<div id="app3">
<!-- 方法一 -->
<form @submit.prevent="onSubmit">
<input type="submit" value="查询">
</form>
<!-- 方法二 -->
<form v-on:submit.prevent>
<input type="submit" value="搜索">
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app3',
methods: {
onSubmit() {
console.log('submit')
}
}
});
</script>
-
.capture 事件捕获模式
<!-- =====================事件捕获模式========================== --> <div id="app4"> <div @click.capture="fatck"> <button @click="dayck">点击事件捕获并打印</button> </div> </div> <script type="text/javascript"> //================================= var vm = new Vue({ el: '#app4', methods: { //fatck(){}==fatcik:function(){} fatck() { console.log('fatck') }, dayck(){ console.log('dayiw') } } }); </script> -
.self:只当事件从侦听器的元素本身出发时才出发回调
-
.once：值触发一次回调
-
【注意】
-
使用时注意顺序
v-on:click.prevent.self //会阻止所有的点击的默认事件 v-on:click.self.prevent //会阻止元素自身的默认事件
按键修饰键
监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符
<div id="app">
<!-- 只有在key是Enter时，调用vm.submit -->
<input @keyup.enter="submit">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
submit() {
alert('提交成功')
}
}
})
</script>
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
<input type="text" @keydown.enter="enterFn">
<input type="text" @keydown.esc="escFn">
vue指令 v-model
-
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
在
<input>、<select>、<textarea>、components中使用<div id="app"> <h1>{{val}}</h1> <h1>{{val}}</h1> <input v-model="val" type="text" id="ipval"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { val: '我们都是一样的值' } }) </script>
vue指令 v-if、v-else、v-else-if
v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。
频繁切换的话使用v-show减少渲染带来的开销。
v-if可以单独使用，而v-else-if,``v-else必须与v-if组合使用
v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数
<div id="app-2">
<h1>我的成绩为：{{score}}</h1>
我的评级为：
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else="score<60">不及格</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app-2",
data:{
score:80
}
})
</script>
vue指令 v-for
作用：列表渲染，主要用于显示列表和表格 以"itme in itmes"形式，注v-for需要每项提供一个唯一key
<table border="1">
<!-- 表头 -->
<thead>
<tr>
<th>编号</th>
<th>商品名</th>
<th>价格</th>
<th>存库</th>
</tr>
</thead>
<tr v-for="(item,index) in goodsList" :key="item.id">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</table>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
tite: '商品信息表',
goodsList: [{
id: 1,
name: '麻辣条',
price: 255.22,
count: 100
}, {
id: 2,
name: '康师傅泡面',
price: 235,
count: 1500
}, {
id: 3,
name: '泡鸡脚',
price: 22,
count: 500
},
{
id: 4,
name: '娃哈哈',
price: 2,
count: 300
},
{
id: 5,
name: '娃哈哈果汁',
price: 5,
count: 200
}
]}
</script>
v-for以下方法监测到并更新页面
push()pop()shift()unshift()splice()sort()reverse()
还有一下不会更新
slice()filter()concat()map()
利用computed属性计算属性实现模糊查询
<div id="app">
<h1>{{tite}}</h1>
查询<input type="text" placeholder="请输入" v-model="mykey">
<table border="1">
<!-- 表头 -->
<thead>
<tr>
<th>编号</th>
<th>商品名</th>
<th>价格</th>
<th>存库</th>
</tr>
</thead>
<tr v-for="(arr,index) in goodsList">
<td>{{index}}</td>
<td>{{arr.name}}</td>
<td>{{arr.price}}</td>
<td>{{arr.count}}</td>
</tr>
</table>
</div>
<!-- ================================================================== -->
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
tite: '商品信息表',
arr: [{
id: 1,
name: '麻辣条',
price: 255.22,
count: 100
}, {
id: 2,
name: '康师傅泡面',
price: 235,
count: 1500
}, {
id: 3,
name: '泡鸡脚',
price: 22,
count: 500
},
{
id: 4,
name: '娃哈哈',
price: 2,
count: 300
},
{
id: 5,
name: '娃哈哈果汁',
price: 5,
count: 200
}
],
mykey:''
},
computed:{
goodsList(){
var _this=this;
return _this.arr.filter(function(arr){
return arr.name.indexOf(_this.mykey)!=-1;
})
}
}
})
</script>
监听的属性发生变化时，会自动调用回调函数，
<div id="app">
<h1>学生信息</h1>
<p>
姓名：<input type="text" v-model="name">
<span>{{tsname}}</span>
</p>
<p>
性别：<input type="text" v-model="gender">
<span>{{tsgender}}</span>
</p>
<p>
姓名：<input type="text" v-model="phone">
<span>{{tsphone}}</span>
</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
name:'',
gender:'',
phone:'',
tsname:'',
tsgender:'',
tsphone:''
},
watch:{
name(newVal){
if(newVal!=''){
this.tsname="输入用户名正确";
}else{
this.tsname="姓名不能为空！";
}
},
gender(newVal){
if(newVal!=''){
this.tsgender="输入性别正确";
}else{
this.tsgender="性别不能为空！";
}
},
phone(newVal){
if(newVal!=''){
this.tsphone="输入电话正确";
}else{
this.tsphone="电话不能为空！";
}
}
},
})
</script>