1.内容绑定,事件绑定
(v-text v-html v-on基础)
v-text
v-text指令作用:设置标签内容(textContent)
默认写发挥替换全部内容,使用差值表达式{}可以替换指定内容
内部支持写表达式
<body>
<div id="app">
<h2 v-text="message + '!'"></h2>
<h2 v-text="info + '!'"></h2>
<h2>{{message + '!'}}深圳</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"黑马程序员!!!",
info:"前端移动教育部"
}
})
</script>
v-html
v-html指令作用:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么只会解析为文本
解析文本使用v-text,需要解析html结构用v-html
<body>
<!--2.html结构-->
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//3.创建Vue实例
var app = new Vue({
el:"#app",
data:{
// content:"百度一下"
content:"<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
v-on基础
v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的放大定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
<body>
<!-- 2.html结构 -->
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//3.创建Vue实例
var app = new Vue({
el:"#app",
data:{
food:"凉拌西蓝花"
},
methods:{
doIt:function(){
alert("做IT");
},
changeFood:function(){
this.food+="好好吃"
}
}
})
</script>
</body>
2.显示切换,属性绑定
(v-show v-if v-bind)
v-show
指令作用:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
执行后面的内容,最终都解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="img/b2.jpg" alt="">
<img v-show="age>=18" src="img/b2.jpg" alt="">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
v-if
指令作用是:根据表达式真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中, 为false 从dom树中移除
频繁切换v-show,反之v-if 因为前者切换消耗较小
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">黑马程序员</p>
<p v-show="isShow">黑马程序员 v-show修饰</p>
<!--
v-show改变的是display这个属性
v-if改变的是dom树 若为false 则会直接没有
若频繁切换使用v-show反之v-if
-->
<h2 v-if="temperature>=35">热死啦</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
点击切换显示后
v-bind
指令作用:为元素绑定属性
完整写法: v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式
<head>
<style>
.active{
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" :title="imgTitle+'!!!'" alt="" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" :title="imgTitle+'!!!'" alt="" :class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑马程序员",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
案例:图片切换:
列表数据使用数组保存
v-bind指令可以设置元素属性
v-show和v-if都可以切换元素显示状态
3.列表循环,表单元素绑定
(v-for v-on补充 v-model)
v-for
指令作用:根据数据生成列表结构
数组经常和v-for结合使用
语法:(item,index)in 数据
item和index可以结合其他指令一起使用
数据长度的更新会同步到页面上,是响应式的
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<!-- item代表这个对象或者数组或其他语法 -->
<li v-for="(item,index) in arr">
{{index+1}}黑马程序员校区:{{item}}
</li>
</ul>
<h2 v-for="item in vegetables" :title="item.name">
{{ item.name }}
</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"凉拌西蓝花"},
{name:"西蓝花凉拌"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"花菜小炒肉"})
},
remove:function(){
this.vegetables.shift() //shift默认移除最左边的元素
}
}
})
</script>
</body>
v-on补充
事件绑定的方法写成函数调用形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 . 修饰符 可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(666,'诸葛')">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert('吃饭了吗');
}
}
})
</script>
</body>
v-model
指令作用:便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定数据与表单元素的值是双向的,改变任意一个,另一个均会改变
<body>
<div id="app">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="酸菜鱼";
}
}
})
</script>
</body>
小黑记事本
看视频19