Vue基础（2）

Vue基础（2）

Vue数据绑定

绑定样式

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

1. 内联样式

       <div id="app">
           <!-- 绑定样式属性值 -->
           <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
           <!-- 绑定样式对象 -->
           <div v-bind:style="myDiv"></div>
           </div>
          </div>
   </body>
   <script>
       var vm=new Vue({
           el:'#app',
           data: {
               myDiv: {
                   backgroundColor: 'red',
                   width:'100px',
                   height:'100px'
               },
               pink:'pink',
               width:'100%',
               height:'200px'
           }
       })
      
   </script>
   

2.绑定样式类

<style>
	.box {
	 background-color: pink;
	 width: 100%; height: 200px;
	}
	.inner {
	 background-color: red;
	 width: 100px; height: 50px;
	 border: 2px solid white;
	}
</style>
<div id = “app">
	 <div v-bind:class="{box}">我是box
		 <div v-bind:class="{inner}">我是inner1</div>
		 <div v-bind:class="{inner}">我是inner2</div>
	 </div>
</div>
<script>
	 var vm = new Vue({
		 el: '#app',
		 data: {
			 box: 'box',
			 inner: 'inner'
	 	 }
 	})
</script>

内置指令

项目	Value
v-model	双向数据绑定
v-on	监听事件
v-bind	单向数据绑定
v-text	插入文本内容
v-html	插入包含HTML的内容

v-model

v-model主要实现数据双向绑定，通常用在表单元素上，例如
input、textarea、select等。

实现表单元素双向数据绑定

<div id="app">
 <input type="text" v-model="msg">
</div>
<script>
	var vm = new Vue({
	    el: '#app',
	    data: {msg: 'v-model指令' }
	})
</script>

v-text

v-text是在DOM元素内部插入文本内容

<div id="app">
 	<p v-text="msg"></p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
		msg: '我是v-text '
	 }
	})
</script>

v-html

v-html是在DOM元素内部插入HTML标签内容

<div id="app">
 	<div v-html="msg"></div>
</div>
<script>
	 var vm = new Vue({
		 el: '#app',
		 data: {
		 	msg: '<h2>我是v-html</h2>'
	 }
	 })
</script>

v-bind

v-bind可以实现属性单向数据绑定

<div id="app">
 	<input v-bind:value="msg">
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
		 	msg: '我是v-bind '
		 }
	})
</script>

v-on

v-on是事件监听指令，直接与事件类型配合使用

<div id="app">
 	<p>{{msg}}</p>
 	<button v-on:click="showInfo">请单击</button>
</div>
<script>
	var vm = new Vue({
		 el: '#app',
		 data: {
		 	msg: '请单击按钮查看内容'
		 },
		 methods: {
		   showInfo () {
	 		 this.msg = '我是v-on指令'
		  }
	     } 
	 })
	
</script>

v-for

v-for可以实现页面列表渲染，常用来循环数组

<div id="app">
 	<div v-for="(item,index) in list" data-id=“index">
 索引是：{{index}}，元素内容是：{{item}}
 	</div>
</div>
<script>
	 var vm = new Vue({
		 el: '#app',
		 data: {
		 	list: [1, 2, 3]
		 }
	 })
</script>

v-if和v-show

v-if用来控制元素显示或隐藏，属性为布尔值

<div id="app">
 	<div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
 	<button @click="isShow=!isShow">显示/隐藏 </button>
</div>
<script>
	 var vm = new Vue({
		 el: '#app',
		 data: {
			 isShow: true
		   }
	 })
</script>

单击“显示/隐藏”按钮，控值“我是v-if”的显示和隐藏

案例学生列表

<div id="app">
 <button @click="add">添加学生</button>
 <button @click="del">删除学生</button>
 <table border="1" width="50%" style="border-collapse: collapse">
 	 <tr align="center" v-for="item in students">
 		<td>{{item.grade}}</td>
 		<td>{{item.name}}</td>
 		<td>{{item.gender}}</td>
 		<td>{{item.age}}</td>
 	</tr>
 </table>
</div>

var vm = new Vue({
 el: '#app',
 data: {
 students: []
 },
 methods: {
// 在methods选项中，定义事件处理函数add()添加学生信息和del()删除学生信息
 	add () {
 		var student = {
 		grade: '1',
 		name: '张三',
		gender: '男',
 		age: 25
 	}
 	this.students.push(student)
 },
	// 删除学生信息
 	del () {
 	this.students.pop()
 	}
}
})

事件监听

v-on绑定事件：在Vue中可以使用内置指令v-on监听DOM事件，并在触发时
运行一些JavaScript代码，或绑定事件处理方法。

<div id="app">
 <button v-on:click="count+=Math.random()">随机数</button>
 <p>自动生成的随机数是{{count}}</p>
</div>

创建vm实例对象并定义count的初始值为0

var vm = new Vue({
 el: '#app',
 data: {
 count: 0
 }
})

使用按键修饰符监听按键：

Vue允许为v-on添加按键修饰符来监听按键，如：

Enter, 空格、Shift和PageDown等。

使用按键enter修饰符监听按键：

创建vm实例对象并在methods中定义submit()事件处理函数

var vm = new Vue({
 el: '#app',
 methods: {
 submit () {
 console.log('表单提交')
 }
 }
})

事件修饰符

修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件行为
.capture	事件捕获
.self	将事件绑定到自身，只有自身才能触发
.once	事件只触发一次