vue基础知识点总结

一、每个Vue应用都需要通过实例化Vue来实现
语法格式如下：

var vm = new Vue({
			// 选项
		})

二、构造函数参数
1、el：element 的缩写，选中结点元素，可以写css3的所有选择器
2、data： 用于自定义属性
例：

var vm = new Vue({
				data:{
					url:'http://localhost:8080',
					massage:'这里显示信息'
				}
			})

	data中定义的方法，this指向window
		
3、methods： 用于定义的函数，可以通过 return 来返回函数值。函数中this指向vm对象，但是定义在函数内的函数的this执行window
	{{ }}： 用于输出对象属性和函数返回值。

	data he methods：中不能有重复
	
4、watch（监听对象）

var vm = new Vue({
		el:"#app",
		data:{
			
		},
		methods：{
		
		},
		watch:{
			"name" :function(){   // 监听模型数据data中name属性的变化
				// this 和 methods一样指向vue实例对象
			}
		}
	})
	

如果属性很多，每个都需要监听可使用computed属性

var vm = new Vue({
		el:"#app",
		data:{
			name:"值1"
			age：18
		},
		methods：{
		
		},
		watch:{
			"name" :function(){   // 监听模型数据data中name属性的变化
				// this 和 methods一样指向vue实例对象
			}
		}
		computed:{
			"name" :function(){   // 该方法中用到的值发生变化就会触发这个方法
				// this 和 methods一样指向vue实例对象
			}
		}
	})

若属性发生同名：则优先级为data>methods>computed

5、created函数（生命周期钩子）
	new Vue({
	  data: {
		a: 1
	  },
	  created: function () {
		// `this` 指向 vm 实例
		console.log('a is: ' + this.a)
	  }
	})
	// => "a is: 1"

6、computed 计算属性（计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。）
	
	类型：{ [key: string]: Function | { get: Function, set: Function } }
	
	计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

var vm = new Vue({
		  data: { a: 1 },
		  computed: {
			// 仅读取
			aDouble: function () {
			  return this.a * 2
			},
			// 读取和设置
			aPlus: {
			  get: function () {
				return this.a + 1
			  },
			  set: function (v) {
				this.a = v - 1
			  }
			}
		  }
		})
		vm.aPlus   // => 2
		vm.aPlus = 3
		vm.a       // => 2
		vm.aDouble // => 4

三、插值

1、v-text（缩写 ：{{}}）插值
	{{message}} 取出data属性中的属性message
	v-text可以简写为{{}},并且支持逻辑运算。
	v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。
	当绑定的数据对象上的值发生改变，插值处的内容也会随之更新
	
	通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
	但请留心这会影响到该节点上的其它数据绑定：
	
	<span v-once>这个将不会改变: {{ msg }}</span>

2、v-html
	v-html 用于输出html，它与v-text区别在于v-text输出的是纯文本，
	浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
	
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	
	这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定
	

3、v-bind（v-bind:class=""  or 使用缩写 :属性名） v-bind:class="{'class1': use}"
	标签属性不能直接使用{{}},属性赋值必须使用标签绑定可以简写:加属性名
	使用v-bind的属性可以直接赋值不需要{{}}
	
	多个class 值绑定，直接传递数组即可
	
	如：
		<p :class='clazz'></p>
		
		data:{
			'clazz':['colorRed','fontSize']
		}
	<p :class='clazz'></p>
	
	若是传递的对象，则对象的属性指示类名，值传递boolean类型，指示开关（是否使用这个类
	如：
		<p :class='clazz'></p>
		
		data:{
			'clazz':{'类名':true,'类名2':false}
		}
	
	两外提供两种写法：
	<p :class="布尔表达式?类名:">  问号表达式
	<p :class="布尔表达式&&类名">

	绑定内联样式
		
		<p :style="styleObject">这里的样式是vue给的</p>
		
		new Vue({
			el:"#app",
			data:{
				styleObject:{
					color:"red",
					font-size:"16px"
				}
			}
		})
	多重值
		<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

四、指令（指令 (Directives) 是带有 v- 前缀的特殊特性。）

1、v-if 、v-else-if

	if（falg）{
	
	}else if（falg）{
	
	}
	
	字符串：显示或者不显示字符串yes，由ok的值决定
	
	条件为false，则该标签及其子标签不显示（该结点不会被浏览器识别，被删除），使用v-show属性结点只做隐藏，但是在template标签
	中不做显示隐藏切换的功能
	在指令中间加注释代码不会爆粗也不会打断判断，加入其他标签则会报错，
	两个标签同时受一个判断控制时，可使用父级标签
	或者使用template包裹（template标签不会浪费资源，在浏览器上面不做显示）
	指令将根据表达式的值为(true 或 false)来决定是否插入该元素，false则该元素在浏览器不显示。
	
	<p v-if="seen">现在你看到我了</p>
	
	这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
	
	列表渲染：
		<!-- Html中 -->
		<ul id="example-1">
		  <li v-for="item in items">
			{{ item.message }}
		  </li>
		</ul>
		
		<!-- Vue中 -->
		var example1 = new Vue({
		  el: '#example-1',
		  data: {
			items: [
			  { message: 'Foo' },
			  { message: 'Bar' }
			]
		  }
		})
		
		
1、v-model
	v-model 通常用于表单组件的绑定，例如input，select等。
	它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。
	本质就是：value和@input的结合

2、v-cloak
	v-cloak是用来解决刷新或者加载出现闪烁（显示变量），这个标签的特性在于它会在vue实例编译结束后
	从绑定的html元素上移除。通常情况下和下面示例的样式display: none一起使用的。

4、v-on（缩写：@事件名）
	
	v-on可以绑定JavaScript的所有内置事件
		
	注意：绑定事件不写参数，默认为触发该事件的对象
	
		如：v-on:click="fun1"
	var fun1 = function(event){
		console.log(this) // `this` 在方法里指向当前 Vue 实例
		// `event` 是原生 DOM 事件
		if (event) {
		  alert(event.target.tagName)
		}
	} 
	
	若传递参数，则event变成传递的参数的值
	
	
	事件修饰符：（在绑定事件后面加.修饰符名）stop、prevent、once（事件只触发一次）
		<!-- 阻止单击事件继续传播 -->
		<a v-on:click.stop="doThis"></a>

		<!-- 提交事件不再重载页面(阻止表单或a标签的默认事件) -->
		<form v-on:submit.prevent="onSubmit"></form>

		<!-- 修饰符可以串联 -->
		<a v-on:click.stop.prevent="doThat"></a>

		<!-- 只有修饰符 -->
		<form v-on:submit.prevent></form>

		<!-- 添加事件监听器时使用事件捕获模式 -->
		<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
		<div v-on:click.capture="doThis">...</div>

		<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
		<!-- 即事件不是从内部元素触发的 -->
		<div v-on:click.self="doThat">...</div>
		
		<!-- 点击事件将只会触发一次 -->
		<a v-on:click.once="doThis"></a>
		
		<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
		<!-- 而不会等待 `onScroll` 完成  -->
		<!-- 这其中包含 `event.preventDefault()` 的情况 -->
		<div v-on:scroll.passive="onScroll">...</div>
		
		按键修饰符...
5、v-for
	
	data:{
		  list:[1,2,3,4,5,6]
	}
	
	在html中使用 v-for 指令渲染	
	<p v-for="(item,index) in list">--索引值--{{index}}   --每一项--{{item}} list 表示要遍历的集合</p>
	
	在data中定义对象
	data:{
		  user:{
			id:1,
			name:'托尼.贾',
			gender:'男'
		  }
	}
	<p v-for="(item,key,index) in user">--索引值--{{index}}   --每一项--{{item}} key 表示对象的属性名 user 表示要遍历的对象</p>

	遍历数字
	
	data:{
		num:5
	}
	<p v-for="(item,index) in num">--索引值--{{index}}   --每一项--{{item}}  num 表示要遍历的值</p>
	
	index从0开始
	item 从1开始到item===num


6、双向数据绑定:value 只对表单管用
	<input :value="name" @input="fun1" type="text"/>
	
	data:{
		name:"值"
	}，
	method:{
		fun1:function($e){ //$e 事件对象
			this.name=$e.target.value
		}
	}

7、

五、修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

1、prevent
	
	.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
	
	<form v-on:submit.prevent="onSubmit">...</form>
2、stop
	停止事件传播
3、once
	只执行一次
2、lazy
	<!-- 在“change”时而非“input”时更新 -->
	<input v-model.lazy="msg" >