Vue笔记

1. Vue 介绍

Vue 是一套用于构建用户界面的渐进式的 js 框架。
Vue的核心库只注重视图层，结合了 HTML + CSS + JS，非常的易用，便于与第三方库或既有项目整合。

优点：

• 轻量级。Vue.js压缩后只有20多kb
• 移动优先。更适合移动端
• 易上手
• 吸取了Angular(模块化)和React(虚拟 DOM)的长处，并拥有自己独特的功能，如：计算属性。
• 开源，社区活跃度高

Vue.js的两大核心要素

1. 数据驱动
2. 组件化
   · 页面上每个独立的可交互的区域视为一个组件
   · 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
   · 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

2. MVVM

1. 结构

• Model：模型层，这里表示JavaScript对象
• View：视图层，这里表示DOM（HTML操作的元素）
• ViewModel：连接视图和数据的中间件

2. VM的实现原理：在MVVC架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
   · ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
   · ViewModel能够监听到视图的变化，并能够通知数据发生改变
   ———— MVVM通过VM实现了双向数据绑定
3. Vue.js就是一个MVVM中ViewModel层的实现者，它的核心就是DOM监听与数据绑定
4. 其他MVVM实现者
   · AngularJS
   · ReactJS
   · 微信小程序

3. Vue 使用

1. 在页面中引入Vue的两种方式

• 声明式渲染引入工程内的Vue的js文件
• 引入外部网络提供的Vue的js文件(常用)

  	<script src="外部的js"/>
  

  cdn：内容分发网络。这是一种加速策略，能够从离自己最近的服务器上快速的获得外部的资源。（百度搜索cdn vue➡https://www.bootcdn.cn/vue）

  	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

2. 初始化Vue

• 声明式渲染：Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。核心思想是没有繁琐的DOM操作

  	<!-- 1.html -->
  	<!-- id标识Vue作用的范围 -->
  	<div id="app">
  		<!-- 在html的被vue绑定的元素中，通过差(插)值表达式来获取vue对象中的数据 -->		
  		<!-- 插值表达式: {{}} -->
  		欢迎你！年龄是{{age}}的{{name}}
  		<!-- 调用方法-->
  		{{sayHi:()}}	
  	</div>
  

  	// 引入外部网络提供的Vue的js文件
  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  	// 2.需要有一个Vue对象（实例）
  	<script>
  		new Vue({
  			el:'#app', //element,该vue对象绑定在哪个div上
  			
  			// data定义页面中显示的数据模型，内部存放键值对
  			data:{
  				name:'小明',//以后数据就是通过发送ajax请求来获得的
  				age:18
  			},
  			
  			// methods提供方法
  			methods:{
  				sysHi:function(){
  					alert("HELLO VUE!");
  				}
  			}
  			
  		}); //json格式的对象 使用大括号包括，里面放了键值对，在js中键没有引号，多个键值对之间使用逗号分隔
  	</script>
  

4. 差(插)值表达式
   插值表达式是用在html中被绑定的元素中的。目的是通过插值表达式来获取vue对象中的属性和方法。
   插值表达式只能写在html里，不能写在html标签中，不能作为属性的值的部分。
   除此之外，差值表达式也能够这么使用：

   插值表达式	显示效果
   {{name}}	小明
   {{[0,1,2,3,4][1]}}	0
   {{ {name:‘xiaoming’,age:20}.name }}	xiaoming
   {{sayHi:()}}	调用sayHi()方法

4. Vue中的关键字

这些关键字都是作为html页面的标签中的属性

1. MVVM 双向数据绑定：v-model
   是将标签中的value值与vue实例中的data属性值进行绑定

   <div id="app">
   	<!-- 输入框输入值，插值表达式也改变值 -->
   	<input type="text" v-model="title"/>
   	title的值：{{title}}
   </div>
   

   	new Vue({
   		el:'#app', 
   		data:{
   			title:'java',
   		},		
   	}); 
   

2. 事件绑定：v-on
   通过配合具体的事件名，来绑定vue中定义的函数

   <div id="app">
   	<!-- 输入框输入值，插值表达式也改变值 -->
   	<input type="text" v-on:click="changeMajor(12)"/>
   	<input type="text" v-on:input="changeTitle()"/>
   </div>
   

   new Vue({
   	el:'#app', 
   	data:{
   		major:'java'
   	},
   	method:{
   		changeMajor:function(obj){
   			console.log(obj) //输出12
   		},
   		changeTitle:function(event){
   		//event:内置函数,代表事件;target:对象;value:值
   			console.log(event.target.value)
   			//this指当前vue对象;major为其中属性
   			this.major=event.target.value;
   		}
   	}	
   }); 
   

• event.target.value：在响应函数里，可以指明使用event内置的参数对象。该对象标识当前事件，可以通过event.target.value来获得当前事件对象的value的值。
• this 的用法：this表示当前vue对象“new Vue()”，可以通过 this. 来调用当前vue对象的属性和方法。
• v-on 还可以简写
  v-on:input="" == @input=""

3. 属性绑定：v-bind
   html里的所有属性，都不能使用插值表达式

   <div id="app">
   	<!-- 打印文本 link -->
   	{{link}} 
   	<!-- 链接 link -->
   	<a v-bind:href="link">百度</a>
   </div>
   

   new Vue({
   	el:'#app', 
   	data:{
   		link:'http://www.baidu.com'
   	}
   }); 
   

• v-bind 可以简写
  v-bind:href=“link” == :href=“link”

4. v-once指令
   指明此元素的数据只出现一次，数据内容的修改不影响此元素(插值表达式)
5. v-html 和 v-text

• v-html会将vue中的属性的值作为html的元素来使用
• v-text会将vue中的属性的值作为纯文本来使用

5. 事件

1. vue中事件绑定：

• v-on:事件="函数"
• @事件="函数(参数)"

2. 一些可配合事件使用的函数

• event.clientX：获得当前事件对象的x坐标的值(可跟mousemove事件配合使用)。
• event.clientY：获得当前事件对象的y坐标的值。
• console.log(event)：打印事件

3. 停止鼠标事件

• event.stopPropagation(); 停止鼠标事件

<span @mousemove="dummy">经过时停止鼠标事件</span>

dummy:function(event){
	event.stopPropagation();
}

• 通过v-on:mousemove.stop 停止鼠标事件

<span v-on:mousemove.stop>停止鼠标事件</stop>

4. 事件修饰符
   修饰符是由点开头的指令后缀来表示的

• .stop：
  • @click.stop：阻止单击事件继续传播
  • @mousemove.stop：阻止鼠标移动事件
• .prevent：阻止事件原本的默认行为
• .capture
• .self
• .once
• .passive

1. 按键修饰符
   监听键盘事件。Vue允许v-on在监听键盘事件时添加按键修饰符

<!-- 输入回车键时提示 -->
<input type="text" @keyup.enter="mykeyupfn()"/>
<!-- 输入空格时提示 -->
<input type="text" v-on:keyup.space="mykeyupfn1()"/>

6. Vue改变内容 — 虚拟dom和diff算法

1. 插值表达式的方式

	{{count>10?"大于10","小于10"}}

2. 计算属性：computed

• 计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能将计算结果缓存起来的属性（将行为转化成了静态的属性）。能提高效率，仅此而已

	<!-- 调用当前时间的方法 -->
	{{getCurrentTime()}}
	<!-- 当前时间的计算属性 -->
	{{getCurrentTime1}}

<script>
var v1=new Vue({
	el:'#app',
	methods:{
		getCurrentTime:function(){
			return new Date();
		}
	},
	computed:{
		// computed里虽然存放的是函数，但在调用时为一个属性
		getCurrentTime1:function(){
		return new Date();
		}
	}
})
</script>

• 计算属性与方法的区别
  methods：定义方法，调用方法时需要带括号
  computed：定义计算属性，调用属性不需要带括号
  注意：methods和computed里不能重名
• 计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

3. watch 监控属性

• 通过watch里给属性绑定函数，当属性的值发生变化时，该函数会自动被调用。调用时可以接收两个参数，第一个参数是属性改变后的值，第二个参数是属性改变前的值

<script>
	var v1=new Vue({
		el:'#app',
		data:{
			title:"hello vue"
		},
		watch:{
			// title发生改变时调用此函数
			title:function(newValue,oldValue){
				console.log(newValue+":"+"oldValue);
			}
		}
	})
</script>

7. Vue改变样式

1. 通过给html元素的class属性绑定vue中的属性值，得到样式的动态绑定

	<style>
		.mydiv{
			width:400px;
			background-color:gray;
		}
		.red{
			background-color:red;
		}
		.yellow{
			background-color:yellow;
		}
		.green{
			background-color:green;
		}
	</style>
<head>
	<body>
		<div id="app">
			<!-- 如果temp是true ==> <div class="red" class="mydiv"/> -->
			<div v-bind:class="{red:temp}" class="mydiv"></div>
			<div :class="{yellow:temp}" class="mydiv"></div>
			<div class="mydiv"></div>

			<button type="button" @click="temp=!temp">temp值取反</button>
		</div>
	</body>
</head>	

<script>
	new Vue({
		el:'#app',
		data:{
			// 临时变量
			temp:false
		}
	})
</script>