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

huofo

发布于 2022-03-16 09:37:41

1.2K0

发布于 2022-03-16 09:37:41

文章被收录于专栏：huofo's blog

vue基础

声明式渲染

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

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+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 实例内部。

除了文本插值，我们还可以像这样来绑定元素 attribute：

<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 保持一致”。如果你再次打开浏览器的 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 插入/更新/移除元素时自动应用过渡效果。还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

<!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>