Vue

Vue.js基础知识

1.在官网上可以下载Vue.js
可以在本地加载，也可以使用CDN（内容分发网络）加载。

2、第一个Vue.js程序：

var vm=new Vue({
   el:‘#app’,
   data:{
      //数据区
      x:100,
      y:‘OK’
}
})
<div id=”app”>
  <p>{{y}}</p>
</div>

Vue实例：利用Vue的构造函数Vue()创建的实例被称为Vue实例
Vue实例名是否定义出来可以根据项目需要

Vue实例的选项：
（1）el：通过选择器将Vue实例与DOM节点挂载起来。
（2）data：为Vue实例设置所需要用到的数据，被称为“数据区”。
挂载点：Vue实例与之挂载的DOM节点就被称为“挂载点”。
3.Vue实例的属性：

	1.$el:返回Vue实例挂载点的HTML代码
	```
		vm.$el===document.querySelector(“#app”)   //true
	```
	2.$data：返回Vue实例数据区中的所有数据
	```
		vm.$data.w===vm.w      //true
	```

注：不是所有的Vue实例的选项添加上$都能够变成Vue实例的属性的

4.如何为挂载点对象绑定事件

Vue实力的方法区：通过Vue实例的methods选项创建各种方法。

methods:{
	函数名：function(){
	
	}
}

例一：单击命令按钮，在页面上显示当前日期。
在Vue方法区中的方法如何引用数据区中的数据：
（1）vm.$data.todayDate
（2）vm.todayDate
（3）this.todayDate
Vue方法区中的方法内部的this指向Vue实例。
如何获取当前日期时间：
var today = new Date(); //构造函数无参数表示当前日期
today.toLocaleString(); //将GMT时间转换为本地时间
today.toLocaleDateString(); //将GMT时间转换为本地时的日期部分
today.toLocaleTimeString(); //将GMT时间转换为本地时间的时间部分
例二：利用按钮记录用户的单击次数。
五：文本差值的使用：Mustache语法{{}}。
1.文本差值可以使用数据区中的数据，不能使用数据外的数据。
2.HTML属性的值不能使用文本插值的方式。
3.文本差值的内容如果包含HTML代码，是无法被浏览器翻译的。
4.数据区中的数据对于负面来说是双向绑定的。
通过在控制台中利用“vm.数据区中的数据"为变量赋值，可以更改文本插值在页面中的渲染结果。
5.文本插值内部不能出现流程语句。
例：在文本插值中可以使用变量或表达式。
表达式：利用运算符/函数链接常量/变量组成的式子。
（1） {{number+1}}
（2） {{number%2?‘奇数’：‘偶数’}}
{{number%2===0?‘偶数’：‘奇数’}}
（3）{{arr.length}}
（4）{{arr.slice(1,4)}}
（5）{{message.}}
字符串转换为数组：split()
数组转换为字符串：join()、toString()
join()和toString()的区别：
join()可以通过参数制定转换为字符串后的元素间隔。
toString()只能利用逗号间隔。
6.数据区可以定义在Vue实例以外：
(1).对象数据的创建方式:
字面量对象：var o1= {a:10,b:20};
通过构造函数来创建：

						var o2=new Object();   //创建一个空对象
									o2.x=10;
									o2.y=100;
								(2).var vm=new Vue({
											el:'#app',
												data:o2
										})

7.关于文本插值的指令：
v-text：功能与{{}}的文本插值完全一样。

v-html:功能与{{}}的文本插值相同，同时支持文本插值内容中的HTML标记对。
v-once：将文本插值的结果不作为双向绑定的方式。
v-pre：忽略{{}}的文本插值功能。
六、Vue实例的生命周期（Life Cycle）：
1、Vue实例的创建阶段：
beforeCreate：在Vue实例创建之前执行。（Vue实例尚不存在）
created：在Vue实例创建成功后执行。（完成了数据的初始化）
2、Vue实例的挂载阶段：
beforeMount：（完成了挂载点的初始化）
mounted：（完成了挂载点与Vue实例的挂载过程）
3、Vue实例的更新阶段：当对数据区中的数据进行修改时发生更新阶段的钩子函数的执行。
beforeUpdate：
updated：
4、Vue实例的销毁阶段：当执行了 vm.$destroy()方法后发生销毁阶段的钩子函数的执行。
beforeDestroy：
destroyed：

Vue指令

一、Vue指令的规定：
1、所有的Vue指令都是以v-开头的，并使用在标记对中。
v-text、v-html、v-once、v-pre。
2、指令的参数：
格式：v-指令名:参数
3、指令的修饰符：
格式：v-指令名.修饰符
二、绑定HTML属性：
1、完整格式：百度
简化格式：百度
2、允许利用对象的格式一次为多个属性同时绑定：
<标记 v-bind=“{HTML属性名:数据区中的数据}”></标记>
例1：鼠标经过/离开时更换图片。
三、绑定事件：
1、完整格式：

简化格式：<button @click=“btnClick”>
2、jQuery的事件机制：
事件类型名：EventTypeName，例如click、mouseover。
（1）$(“#box”).on(“click”,function(){
//事件代码
})
（2）为一个具备多个元素的节点绑定事件：

 $("ul li").on("mouseover",function(){
	    		$(this).css("color","#ff5857");
   			 }).on("mouseout",function(){
	    		$(this).css("color","#3385ff");
   			 })

	 $(this)必须使用在事件代码中，表示那一个真正触发事件的节点。

3、JavaScript的事件机制：
（1）确定
function btnClick(){ … } //利用具名函数实现
（2）
btn.οnclick=function(){ … } //利用匿名函数实现
（3）JS不允许为具备多个元素的节点绑定统一事件：
方法一：为多个元素的父元素绑定事件。

app.onmouseover=function(event){
          				 if(event.target.className===“box”){
           					 event.target.style.backgroundColor=“#3385ff”;
						}
					}

				event.target：真正触发事件的那一个对象。
 	方法二：利用for循环遍历每一个元素。

 for(var i=0;i<boxes.length;i++){
     			 (function(n){
 					 boxes[i].onmouseover=function(){
					 	this.style.backgroundColor="#3385ff";
  						console.log(n);
 					 }
  				boxes[i].onmouseout=function(){
	 				this.style.backgroundColor="#ff5857";
 				 }
			  })(i);
		}