vue进阶语法及生命周期函数

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>

View Code

效果：

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）

posted @ 2018-07-24 17:51 -Learning- 阅读(401) 评论(0) 收藏举报

刷新页面返回顶部

Learning