# Vue模板语法
# v-bind
v-bind的作用是为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind ":"+属性名
# 示例代码
<!--完整写法-->
<img v-bind:src="imgsrc" alt="">
<!--简写-->
<img :src="imgsrc" alt="" :title="imgtitle" :height="100" :class="isactive?'active':''">
# v-for
v-for指令 可以根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是（item，index）in 数据
- item代表每一项的数据
- index代表索引
- 数组长度的更新会同步到页面上 是响应式的
# 示例代码
<ul>
<li v-for="item in arr">{{item}}</li>
<li v-for="item in arraway">{{item.name}}</li>
<li v-for="(item,index) in arraway">{{index+1}}:{{item.age}}</li>
</ul>
# v-html
v-html属性指令的作用是设置元素的innerHTML,相当于富文本解析
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- v-html属性指令的作用是设置元素的innerHTML -->
<h2 v-html="html"></h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '<button>开始</button>',
html: '<a href="http://www.baidu.com">百度</a>'
}
})
</script>
# v-if
v-if根据表达式的真假直接操纵dom元素的显示与隐藏
- 当值为true时 元素存在于dom树中 当值为false时 从dom树中移除
- 频繁切换使用v-show反之使用v-if 前者的切换消耗小
# 示例代码
<div class="app">
<div class="code" v-if="isshow"></div>
<button @click="changeisshow">切换显示</button>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
isshow: true
},
methods: {
changeisshow: function () {
this.isshow = !this.isshow
}
}
})
</script>
# v-else
v-else必须与v-if搭配使用 表示剩下的情况
# 示例代码
<div class="box">
<div v-if="type=='A'">优秀</div>
<div v-else-if="type=='B'">良好</div>
<div v-else-if="type=='C'">一般</div>
<div v-else>差</div>
</div>
<script>
const app = new Vue({
el: '.box',
data: {
type: 'E'
}
})
</script>
# v-model
v-model指令 获取和设置表单元素的值（双向数据绑定）
- 双向数据绑定 更改两方的任何一方都会同步更新对方的值
- 需要和表单元素一起使用
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素的值相关联
- 绑定的数据《==》表单元素的值
# 示例代码
<div class="app">
<!-- 双向数据绑定 更改两方的任何一方都会同步更新对方的值 -->
<input type="text" v-model="message" @keyup.enter="text"></br>
<input type="button" value="修改message" @click="setmessage">
</div>
<script>
const app = new Vue({
el: '.app',
data: {
message: '前端程序员'
},
methods: {
text: function () {
alert(this.message)
},
setmessage: function () {
this.message = '沙丁鱼'
}
}
})
</script>
# v-model指令修饰符
# .number
自动将用户输入的数值转化为数字类型
<input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">=<span>{{ n1 + n2 }}</span><br>
# .term
自动过滤用户输入的首尾空白字符
<input type="text" :placeholder="user" v-model.term="username"><span>{{username}}</span><br>
# .lazy
在change而非input时更新(懒加载)
<input type="text" :placeholder="user" v-model.term.lazy="username"><span>{{username}}</span><br>
# v-on
v-on指令的作用是：为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在 methods属性中
- 方法内部通过this关键字可以访问到定义在data属性中的数据
# 示例代码
<div id="app">
<div @click="todo">绑定事件的第一种方法</div>
<div v-on:click="todo1">绑定事件的第二种方法</div>
<p @click="todo2 ">{{food}}</p>
</div>
<script>
const app = new Vue({
el: '#app',
message: '黑马纯许愿',
data: {
food: '西兰花'
},
methods: {
todo: function () {
console.log('点击了第一个')
},
todo1: function () {
console.log('点击了第二个')
},
todo2: function () {
this.food += '好吃'
}
}
})
</script>
# v-on事件修饰符
- prevent 阻止默认事件
- stop 阻止事件冒泡
- once 绑定的事件只触发一次
- 事件修饰符文档传送门 https://cn.vuejs.org/v2/api/#v-on
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时可以定义形参来接受传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter限制触发的按键为回车
- 事件修饰符可以有多种
# v-show
v-show指令的作用是：根据真假切换元素的显示状态
- 原理是修改元素的display实现隐藏和显示
- 指令后面的内容最终会被解析为布尔值
- 值为true元素显示 值为false元素隐藏
- 数据改变后元素对应的显示状态会同步更新
# 示例代码
<div class="app">
<div class="one" v-show="isshow"></div>
<div class="one" v-show="age>18"></div>
<button @click="changeshow">切换显示状态</button>
<button @click="addage">年龄累加</button>
</div>
<script>
const app = new Vue({
el: ".app",
data: {
isshow: true,
age: 16
},
methods: {
changeshow: function () {
this.isshow = !this.isshow
},
addage: function () {
this.age++
}
}
})
</script>
# v-text
v-text属性设置标签的内容
- v-text属性会替换标签中所有的内容 可以写表达式
- 推荐使用的方法 可以获取需要的数据 还可以输入表达式
# 示例代码
<div id="app">
<h2 v-text="message+'!'">昆明</h2>
<h2>昆明{{message+"!"}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '黑马程序员'
}
})
</script>
← Vue基础