1.calss和style绑定
操作元素的 class 列表和内联样式style是数据绑定的一个常见需求,它两都是属性,所以可以通过v-bind来绑定
1.1绑定HTML class
可以给v-bind:class一个对象,以动态切换class
<div v-bind:class="{ active: isActive }"></div>
这里也可以在对象中传入多个属性来动态切换class
模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data:
data: {
isActive: true,
hasError: false
}
结果渲染:
<div class="static active"></div>
通过控制绑定事件控制内联样式style,实现js动态切换的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击更换图片颜色</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.c {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c1 {
background-color: green;
}
</style>
<body>
<div id="app">
<!-- v-on来监听元素点击事件 -->
<div class="c" v-bind:class="{c1:ok}" v-on:click="meta"></div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
ok:false
},
// 这里的这个this.ok = !this.ok用的很妙啊
methods:{
meta:function(){
this.ok = !this.ok
}
}
});
</script>
</html>
效果:
1.2数组语法
通过把一个数组传给v-bind:class,以应用一个class列表
<div v-bind:class="[activeClass, errorClass]"></div>
1.3表单输入绑定
用v-model指令在表单input即textarea元素上创建双向数据绑定,它的本质其实就是语法糖,负责监听用户的输入事件以更新数据
<div id="app">
<div id='example-3'>
<!-- 多行文本 -->
<span>多行显示:</span>
<p style="white-space: pre-line;">{{ msg }}</p>
<textarea v-model="msg" placeholder="多行添加"></textarea>
<br>
<!-- 多个复选框 -->
<input type="checkbox" id="jack" value="basketball" v-model="hobby">
<label for="jack">篮球</label>
<input type="checkbox" id="john" value="football" v-model="hobby">
<label for="john">足球</label>
<input type="checkbox" id="mike" value="doublecolorball" v-model="hobby">
<label for="mike">双色球</label>
<br>
<span>我的爱好: {{ hobby }}</span>
<!-- 单选按钮 -->
<br>
<input type="radio" value="one" v-model="picked">
<label for="one">one</label>
<input type="radio" value="two" v-model="picked">
<label for="two">two</label>
<br>
<span>选中:{{picked}}</span>
<!-- 选择框 -->
<br>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
hobby:[],
picked:'',
selected:''
}
})
效果:
这里还有更多实例,详见vue语法教程官网
1.4小清单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小清单</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/*c1下的首个span标签*/
.c1 > span:first-child{
color: red;
text-decoration: line-through;
}
</style>
<div class="container">
<div class="row">
<div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 100px">
<div class="panel panel-danger">
<!-- 标题 -->
<div class="panel panel-heading">
<h3 class="panel-title">小清单</h3>
</div>
<!-- 输入框 -->
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Amount"
v-model= "newlis.title"
>
<span class="input-group-btn">
<!-- button按钮绑定属性 -->
<button
class="btn btn-default"
type="button"
v-on:click="add"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<hr>
<!-- 列表栏 -->
<div class="list-group">
<!-- 内容主题框架 -->
<div class="list-group-item"
v-for="(item,index) in nextList"
v-bind:class="{c1:item.ok}"
>
<!-- 打钩 -->
<span class="glyphicon glyphicon-ok-sign"
v-on:click="changecolor(index)"
> {{ item.title }}</span>
<!-- 叉按钮 -->
<span class="glyphicon glyphicon-remove pull-right"
v-on:click="remove(index)"
></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
nextList:[],
newlis:{
title:'',
ok:false
}
},
methods:{
// 添加内容到列表,将this.newlis进行深拷贝传到nextList
add:function(){
var obj = Object.assign({}, this.newlis);
this.nextList.push(obj);
// 每次输入提交后,输入栏清零
this.newlis.title=''
},
// 点击钩,替换颜色
changecolor:function(index){
this.nextList[index].ok = !this.nextList[index].ok
},
// 点击叉,触发删除事件
remove:function(index){
this.nextList.splice(index,1)
}
}
});
</script>
</html>
效果:
2.上述总结
1. Vue使用
1. 生成Vue实例和DOM中元素绑定
2. app.$el --> 取出该vue实例绑定的DOM标签
3. app.$data --> 取出该vue实例绑定的data属性
2. 模板语法
1. {{name}} --> 在标签中间引用data属性中的变量
2. v-html='msg' --> 在页面上显示我定义的标签元素
3. v-if='ok' --> 控制标签在不在DOM中
4. v-show='!ok' --> 控制标签的display属性的值(是否显示)
5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来
6. v-on:click='dianwo'--> 给标签绑定一个点击事件,方法需要在vue实例的methods中定义
7. v-model='article' --> 用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定
3. 计算属性和侦听器
1. 计算属性
(字符串翻转的例子)
1. 计算属性需要定义在vue实例的 computed 中
2. 多用于对变量做一些自定义的操作
3. 我们在页面上像使用普通data属性一样使用计算属性
2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中
4. class和style属性
1. 基于对象的绑定
2. 基于数组的绑定
5. 条件渲染
v-if
如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
v-if/v-else
v-if/v-else if /v-else
3.生命周期钩子函数
这和在django中学的钩子函数定义一样,都是为了给在不同阶段能够添加自己的代码的机会
示意图:
# 红色框内的即为钩子
详细解释:点击这里
Vue的生命周期,就是从Vue实例被创建开始到实例销毁时的过程,整个过程主要可以分为八个阶段分别是:
- 创建前(beforeCreate)
- 已创建(created)
- 编译前(beforeMount)
- 编译后(mounted)
- 更新前(beforeUpdate)
- 更新后(update)
- 销毁前(beforeDestroy)
- 销毁后(destroyed)
更多专业前端知识,请上 【猿2048】www.mk2048.com