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

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>

列表渲染