vue修饰符与条件渲染

		<style type="text/css">
			html,body,.app{
				height: 100%;
			}
			.app{
				overflow-y: scroll;
			}
			.sc{
				height: 1000px;
			}
		</style>

		<div class="app"  @scroll.passive="scroll">
			{{content+titl}}
			<div class="test" @click="test">
				我是用来测试vue修饰符的
				<p v-html="content" @click.once="changCont('123',$event)"></p>
			</div>
			<img v-bind:src="src" :title="titl" alt=""/>
			<h1 v-if="isShow">我是h1标签</h1>
			<h2 v-show="isShow">我是h2标签</h2>
			<ul>
				<li v-for="(item,index) in objList">{{index}}--{{item}}</li>
			</ul>
			<input type="text" @keydown.enter="ent" name="" id="" value="" />
			<div class="sc"></div>
		</div>
	<!--
		这个p标签在vue实例的控制范围之外，所以这{{content}}是无效的
	<p class="app2">{{content}}</p>
	-->

			var app = document.querySelector(".app");
			app.innerText="hello world";

#1、数据驱动视图(尽量减少DOM操作)

怎么用

1、通过new关键词实例化一个vue对象

2、el代表我们vue实例对象控制的DOM对象范围

值为css选择器或者DOM对象

3、data:用来存储数据

怎么办数据渲染到页面？

1、通过{{}}符号来插入到页面(叫做插值表达式)，不识别标签

4、methods:定义方法

#指令：

v-html:可以将数据中的标签识别出来。

v-bind:propertyName(属性名) 用于设置元素属性,可简写为：

比如：v-bind:title => :title

v-on：用来注册事件监听，可简写为@

比如v-on:click=>@click

v-if:用于判断一个结构是否被渲染到页面，判断条件为true为渲染，false不渲染

v-else:要配合v-if使用

v-else-if:相当于原生js的else if

v-show:判断一个结构是否显示在页面上，通过控制css的display属性来控制内容的显示隐藏

而v-if是直接移除或插入内容来达到显示隐藏的效果。

v-for:循环数组或对象

比如： v-for=“item in list”

表示循环list数组，并将数组里面的每一个元素赋值给item

v-for="(item,index) in list"

小括号里面的第一个值代表数组里面的元素

第二个值代表数组里面的下标

#修饰符

.stop:阻止事件冒泡

.prevent:阻止默认事件

.capture:更改事件传递过程为事件捕获。

.self:阻止自身的点击事件

.once:一次事件

.passive 修饰符尤其能够提升移动端的性能

按键修饰符

.enter

.tab

.esc

.exact,精确触发指定的一个事件

在vue中this的指向始终指向vue实例对象，除非手动更改

vue中同样有事件对象

1、如果调用函数没有传参，则可以直接使用事件对象

2、如果调用函数有传参，那么事件对象需要通过$event来传入

原生更改事件传递过程为事件捕获

addeEVentListener(eventType,callback,bool)

bool:用于设置事件传递过程，值为true，则事件捕获

false：事件冒泡

			var vm = new Vue({
				el:".app",
				data:{
					content:"<b>hello world</b>",//content自定义的名称
					src:"img/youxi-11.png",
					titl:"我是一个可爱的人",
					isShow:false,
					list:[
						"123456",
						"6789"
					],
					objList:{
						"name":"小明",
						"sex":"nan",
						"age":"18"
					}
				},
				methods:{
					changCont:function(index,e){
						this.content="goodbye world!";
						this.isShow =true;
						console.log(this);
						console.log(e.target);//<b>hello world</b>
						console.log(e);
						console.log(index);//123
						alert("我是子元素里面的点击事件")
					},
					test:function(){
						alert("我是父级元素的点击事件")
					},
					scroll:function(){
						console.log(111)
					},
					ent:function(){
						console.log("你按下了enter键")
					}
				}
			})
			/*setTimeout(function(){
				vm.content = "goodbye world";
			},1000)*/

#列表渲染

v-for

key值的作用

1、高效的渲染虚拟DOM

2、另外vue中使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们

		<div class="app">
			<!--下面例子表示：如果isShow为true则显示提交按钮-->
			<!--否则显示确定按钮-->
			<button v-if="isShow">提交</button>
			<button V-else @click="conf">确定</button>
			<p v-if="type=='A'">A</p>
			<p v-else-if="type=='B'">B</p>
			<!--<p v-else> on a and b</p>-->
			<p v-else>type:{{type}}</p>
			<ul>
				<li v-for="(item,index) in list" :key="item" @click="changCont">{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in newlist" :key="item.id">{{item.name}}</li>
			</ul>
		</div>

			var vm =new Vue({
				el:".app",
				data:{
					isShow:false,
//					type:"A"
					type:"111",
					list:[
						"html是超文本标记语言",
						"css是层叠样式表"
					],
					newlist:[
						{"id":1,"name":"bgg"},
						{"id":2,"name":"css"}
					]
				},
				methods:{
					conf:function(){
						this.isShow = true
					},
					changCont:function(){
						/**
						 * 当我们通过数组下标值来改变内容的话，是不会触发视图更新
						 * 会触发视图更新的有以下几种方法
						 * 1、splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
						 * 2、push()
						 * 3、pop()删除最后一个
						 * 4、shift()删除最前一个
						 * 5、unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。
						 * 6、sort()
						 * 7、reverse()倒序
						 * */
						console.log(this.list[0]);
						this.list[0] = "JavaScript";
						this.list.splice(0,1,"JavaScript")
					}
				}
			})

v-for

1、循环数组

2、循环对象

v-for="(val,name,index) in obj"

val:表示对象的属性值

name：表示对象的属性名

index：每个对象的属性对应的下标值

3、循环数字

v-for=“num in 10”

表示循环10这个数字，并将一到十每一个数值赋值给num

		<div class="app" v-cloak>
			<ul>
				<li v-for="(val,name,index) in obj">{{index}}---{{name}}---{{val}}</li>
			</ul>
			<p v-for="num in 10">{{num}}</p>
			<ul>
				<li v-for="item in arr" @click="changeCont">{{item}}</li>
			</ul>
		</div>

			new Vue({
				el:".app",
				data:{
					obj:{
						"name":"小明",
						"age":"15",
						"sex":"男",
						"爱好":"女"
					},
					arr:["html","css","JavaScript"]
				},
				methods:{
					//es6语法，相当于changeCont:function(){}
					changeCont(){
						//this.arr[0]="java";
						/**
						 * 通过set方法来设置数组内容可以触发视图更新
						 * 有以下两种写法
						 * this.$set(add/obj,index/name,更改后的内容)
						 * vue.set(add/obj,index/name,更改后的内容)
						 * arr/obj：表示需要更改的数组或者对象
						 * index/name：表示需要更改的数组或对象里面具体哪个元素或者属性
						 * */
						//this.$set(this.arr,0,"java");
						Vue.set(this.arr,0,"java");
					}
				}
			})