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>