zoukankan html css js c++ java

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）

查看全文

相关阅读:
....
CodeForces 375A(同余)
POJ 2377 Bad Cowtractors (最小生成树)
POJ 1258 AgriNet (最小生成树)
HDU 1016 Prime Ring Problem(全排列)
HDU 4460 Friend Chains(bfs)
POJ 2236 Wireless Network(并查集)
POJ 2100 Graveyard Design(尺取)
POJ 2110 Mountain Walking(二分/bfs)
CodeForces 1059B Forgery(模拟)

原文地址：https://www.cnblogs.com/LearningOnline/p/9361545.html