02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

时间 2020-11-14

标签 javascript html 前端 vue java chrome 数组浏览器 cookie app 栏目 HTML 繁體版

原文原文链接

vue基础

声明式渲染

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统javascript

Example1html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   <div id="box">
        {{ 10+203 }}
        <p>{{ myname }}</p>
   </div>

   <div>
        {{ 10+20 }}
   </div>
   <script>
        
       var vm = new Vue({
           el:"#box", // vue 渲染开始的地方
           data:{
            myname:"kerwin"
           } // 状态
        })
   </script>
</body>
</html>

咱们已经成功建立了第一个 Vue 应用！看起来这跟渲染一个字符串模板很是相似，可是 Vue 在背后作了大量工做。如今数据和 DOM 已经被创建了关联，全部东西都是响应式的。咱们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。前端

注意咱们再也不和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 而后对其进行彻底控制。那个 HTML 是咱们的入口，但其他都会发生在新建立的 Vue 实例内部。vue

除了文本插值，咱们还能够像这样来绑定元素 attribute：java

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>


var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

这里咱们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。chrome

若是你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。数组

条件与循环

<div id="app-3">
  <p v-if="seen">如今你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

继续在控制台输入 app3.seen = false，你会发现以前显示的消息消失了。浏览器

这个例子演示了咱们不只能够把数据绑定到 DOM 文本或 attribute，还能够绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，能够在 Vue 插入/更新/移除元素时自动应用过渡效果。cookie

还有其它不少指令，每一个都有特殊的功能。例如，v-for 指令能够绑定数组的数据来渲染一个项目列表：app

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id=app-4>
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>

		<script>
			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							text: '学习js'
						},
						{
							text: '学习vue'
						},
						{
							text: '整个厉害项目'
						}
					]
				}
			})
		</script>
	</body>
</html>

处理用户输入

为了让用户和你的应用进行交互，咱们能够用 v-on 指令添加一个事件监听器，经过它调用在 Vue 实例中定义的方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app-5">
			<p>{{ message}}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>

		<script>
			var app5 = new Vue({
				el: '#app-5',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

模板语法

vue插值(v-if和v-show)

/*
		文本{{}}
		纯HTML
			v-html, 防止XSS,csrf (
					(1)前端过滤
					(2)后台转义(<> &lt; &gt;)
					(3)给cookie加上属性http
			)
			
			
		指令
			v-html
			v-show
*/

Example1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>

		<div id="box">
			{{ 10+20 }}
			{{ 10>20? 'aaa':'bbb' }}
			{{ myname}}
			
			<!-- 指令 -->
			{{ myhtml }}
			<div v-html="myhtml"></div>
		</div>

		<script type="text/javascript">
      // console 中能够 vm.isShow=false隐藏
			new Vue({
				el: "#box",
				data: {
					myname: "youmen",
					myhtml: "<b>11111</b>"
				}
			})
		</script>

	</body>
</html>

条件渲染

Vue-class绑定和Vue-style绑定

Example1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">

		<script type="text/javascript" src="lib/vue.js"></script>

		<style>
			.red {
				background-color: red;
			}
			
			.yellow{
				background-color: yellow;
			}
			.aaa{

			}

			.bbb{

			}
</style>
	</head>
	<body>
		<div id="box">

			<button @click="handleClick()">click</button>
			<div :class="isActive?'red':'yellow'">我是动态绑定class-三目写法</div>
			<div :class="classobj">我是动态绑定class-对象写法</div>
			<div :class="classarr">我是动态绑定class-数组写法</div>

			<div :style="'background:'+(isActive?'red':'yellow')">我是动态绑定style-三目写法</div>

			<div :style="styleobj">我是动态绑定style-对象写法</div>
			<div :style="stylearr">我是动态绑定style-数组写法</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					isActive: true,
					classobj: {
						a: true,
						b: true
						// a b, class名字
					},
					classarr: ["a", "b"],
					styleobj: {
						backgroundColor: "red"
					},
					stylearr: []
				},
				methods: {
					handleClick() {
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>

条件渲染

Example1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<button @click="handleClick()">click</button>
			<div v-if="isCreated">动态建立和删除-1</div>
			<div v-else>动态建立和删除-2</div>
			
			<ul v-if="datalist.length">
				<li v-for="data in datalist">
					{{ data }}
				</li>
			</ul>
			
			<div v-else>
				购物车空空如也
			</div>
			
			<div v-if="which==1">
				111
			</div>
			
			<div v-else-if="which==2">
				2222
			</div>
			
			
			<div v-else>
				3333
			</div>
			
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#box",
				data:{
					isCreated:false,
					datalist:[],
					which:1,
				},
				methods: {
					handleClick(){
						this.isCreated = !this.isCreated
						this.datalist = ["111","222","333"]
					}
				}
			})
		</script>
	</body>
</html>

列表渲染

咱们能够用 v-for 指令基于一个数组来渲染一个列表。v-for 指令须要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for 还支持一个可选的第二个参数，即当前项的索引。

也能够用of代替in做为分隔符,由于她更接近javascript迭代器的语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
		
		<style>
			.active{
				background-color: red;
			}
		</style>
		
	</head>
	<body>

	<div id="box">
		<ul>
			<li v-for="(data,index) in datalist">
				{{ data }}--{{ index }}
			</li>
		</ul>
		
		<ul>
			<li v-for="(data,key) of obj">
				{{ data }}--{{key}}
			</li>
		</ul>
		
		
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: "#box",
			data:{
				datalist:["111","222","333"],
				obj:{
					name:"youmen",
					age:100,
					location:"youmen"
				}
			}
		})
	</script>

	</body>
</html>

列表key值设置和列表数组检测

/*
		1. v-for(特殊v-for="n in 10")
				a.in
				b.of
		2. key
				*跟踪每一个节点的身份,从而复用和从新排序现有元素
				*理想的key值是每项都有且惟一的id,data.id
		3. 数组更新检测
				a. 使用如下方法操做数组,能够检测变更
						push() pop() shift() unshift() splice() sort() reverse()
						
				b. filter(),concat()和slice(),map(),新数组替换旧数组,并不会致使原数组受到影响并更新
							vm.datalist.concat(["666","777"])

				c. 不能检测如下变更的数组
						vm.items[indexOfitem] = newValue
						"解决" 
								1. Vue.set(example1.items,index()fltem,newValue)
								2. splice
								vm.datalist.splice(0,1,"youmen")
*/

vue列表过滤应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" @input="handleInput()" v-model="mytext" />
			<ul>
				<li v-for="data in datalist">
					{{ data }}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					mytext: "",
					datalist: ["aaa", "bbb", "ccc", "ddd", "eee", ],
					list: ["aaa", "bbb", "ccc", "ddd", "eee", ]
				},

				methods: {
					handleInput() {
						// console.log(this.mytext)
						// console.log("只要value改变,就会触发")
						// 利用输入框的字符,过滤包含字符的元素

						// filter 过滤
						var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1)
						this.datalist = newlist;
						// 计算属性

					}
				}
			})

			var arr = [1, 2, 3, 4, 5]

			var newlist = arr.filter(item => item >= 3)
			console.log(newlist)

			console.log(newlist)
		</script>

	</body>
</html>

事件处理

事件处理器

能够用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<button @click="handleClick">click1</button>
			<button @click="handleClick()">click2</button>
			<button @click="isShow=!isShow">click3</button>
			<div v-show="isShow">111</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data:{
					isShow:false
				},
				methods:{
					handleClick(){
						this.isShow=!this.isShow
					}
				}
			})
		</script>


	</body>
</html>

事件修饰符

/*
		1. 监听事件-直接出发代码
		2. 方法事件处理器-写函数名 handleClick
		3. 内联处理器方法-执行函数表达式  handleClick($event)  $event 事件对象
*/

Example1

阻止冒泡,默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<button @click="handleClick">click1</button>
			<button @click="handleClick($event)">click2</button>
			<button @click="isShow=!isShow">click3</button>
			<div v-show="isShow">111</div>


			<ul @click.self="handleClick()">
				<li @click.stop="handleClick($event)">111</li>
				<li @click.stop="handleClick()">222</li>
				<li @click.once="handleClick()">333</li>
			</ul>

			<a href="http://www.baidu.com" @click.prevent="handleChangePage()">changepage</a>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
					isShow: false
				},
				methods: {
					handleClick(ev) {
						console.log(ev.target); // ev就是事件对象
						this.isShow = !this.isShow
					},
					handleClick(ev) {
						// ev.stopPropagation();
						console.log("li click")
					},
					handleClick() {
						console.log("ul click")
					},
					handleChangePage() {
						console.log("handleChangePage")
					}
				}
			})
		</script>
	</body>
</html>

按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" @keyup.enter="handleKeyup($event)" />
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#box",
				methods: {
					handleKeyup(ev) {
						console.log("执行todolist 添加成功")
						// if(ev.keyCode==13){
						// 	console.log("执行todolist添加成功")
						// }
					}
				}
			})
		</script>
	</body>
</html>

表单控件绑定

基础用法-文本

你能够用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略全部表单元素的 value、checked、selected attribute 的初始值而老是将 Vue 实例的数据做为数据来源。你应该经过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不一样的输入元素使用不一样的 property 并抛出不一样的事件：

/*
		text 和 textarea 元素使用 value property 和 input 事件；
    checkbox 和 radio 使用 checked property 和 change 事件；
    select 字段将 value 做为 prop 并将 change 做为事件。
*/

对于须要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程当中获得更新。若是你也想处理这个过程，请使用 input 事件。

文本 Example1

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。

基础用法-复选框

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" v-model="mytext" />
			{{mytext}}

			<textarea v-model="mytext"></textarea>

			<input type="checkbox" v-model="isChecked" />记录用户名

			<p>你喜欢的运动?
				<input type="checkbox" v-model="checkgroup" value="游泳" />游泳
				<input type="checkbox" v-model="checkgroup" value="滑冰" />滑冰
				<input type="checkbox" v-model="checkgroup" value="长跑" />长跑
			</p>
			{{ checkgroup }}

			<p>你喜欢的开发语言?
				<input type="radio" v-model="picked" value="Python" />Python
				<input type="radio" v-model="picked" value="Go" />Go
				<input type="radio" v-model="picked" value="js" />js
			</p>
			{{ picked }}
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					mytext: "",
					isChecked: true,
					checkgroup: [],
					picked: "js",
				}
			})
		</script>

	</body>
</html>