Vue学习总结

Vue框架是什么？

Vue源码主要实现了以下几个功能：
1.通过DOM获取html元素：相当于document.querySelector()
2.将想要显示出来的数据传递给对应的html元素
相当于将一系列dom操作集合成vue.js，然后再调用vue()函数传入参数{}，以实现数据的动态显示。

Vue的使用方法：
1.在标签中引入vue.js文件，自动在全局环境中创建一个vue对象，实例化后即可使用。
2.Vue对象实例化，传入一个options对象作为参数（其中包括el、data、methods和其他的一些属性及方法。）：
①el:“element,设置元素挂载点（除HTML和Body元素外），可用id选择器，类选择器或元素选择器等。”，数据类型为字符串。
注意：el挂载点定义了vue实例的作用范围，即vue会管理命中元素及其内部的后代元素。

const demo = new Vue({ 
	el:"#app"，  // id为app的元素及其内部所有子元素均可访问以下data和methods
	data:{
		message:"hello world!",
	}，

②data:{以属性键值对的方式声明需要用到的变量并进行初始化赋值（可以是多个变量，用逗号隔开）}。
可以通过app.data中的变量名的方式访问其值（双括号语法显示的也只能是data里的动态数据），但是不可以直接访问data属性本身。如需访问要以app.$data的方式。
注意：需要用的变量可以在这里以对象属性键值对的方式声明，无须var；当然，也可以在全局环境里用var先声明一个变量并赋值，然后再在data里传入，效果都是一样的，区别在于一个是全局变量，一个是局部变量。如：

var num = 1;
const app = new Vue({
	el:'#booklist',
	data:{
		num:num,  //  num = 1
	}
})
console.log(num); //  由于先在外部声明变量，所以在全局环境中可以直接访问；如果要访问app对象内部的，需以属性的方式访问：app.num

options对象除了el和data外，还有methods、computed等，包含了各种函数：

	methods:{key:function}, 注意：在data里定义的变量在methods中需要通过this.变量名获取，
	生命周期函数：{},为对象类型，
	computed：{},为对象类型，
})

3.辅以vue指令的使用

Vue的MVVM模型

M-model：用于传入的数据，可自定义但多从服务器直接获取。
V-view：在页面上显示出来的结果
VM-view model：是model和view的中间桥梁，即new vue()

Mustache语法（双大括号语法）

即html标签中的{{}}写法，用于data动态数据的显示。
语法：{{变量或单个表达式}}
注意：
1.双括号里不能写js代码，如if、for语句等逻辑，只能放数据
2.不能在属性中使用
用法示例1：

<p>{{message}}</p>  //最后呈现出message变量对应的值

用法示例2：

<p>{{message}}，你好</p>  //  最后呈现字符串拼接的结果

用法示例3：

<p>{{message1 +  message2}}</p>  //  最后呈现出大括号中表达式的结果

Vue的常用指令（插值语法）

1.v-for：遍历
2.v-html
3.v-text
4.v-bind：
(1)动态绑定属性值

<img v-bind:src="url">  //  v-bind将scr属性的值看做一个变量，这样即可动态决定src的属性值。

v-bind指令的语法糖写法（即简化写法）

<img :src="url">  //  其实就是把v-bind省略掉，只留下冒号

(2)动态绑定class
①对象语法（重点）

<p :class="{className1:true,className2:false}"></p>  //  属性值为true即可为元素添加对应的class，属性值为false则不会为元素添加对应的class

②数组语法
5.v-on:click：事件监听，相当于DOM的onclick事件属性。语法糖写法：

@click:""

6.v-cloak：vue代码解析完后自动删除的一个指令，结合设置样式{display:none}使用。当发生网络延迟时，为了避免动态数据传入不及时，导致显示给用户的结果不是我们想要的，此时可以使用这个指令在页面上隐藏元素。
7.v-pre
8.v-once
9.v-show：为某元素加上display:none，隐藏该元素在页面上的显示，但元素依然存在
10.v-if，v-else-if，v-else：vue的条件语法

计算属性

const app = new Vue({
	el:
	data:{}
	computed:{
		属性名:函数  // 用于计算某一属性值的函数
	}
})

计算属性里的函数和methods里的函数有什么区别？
计算属性里的函数会检查重复，若计算结果重复，则在html中调用时会筛去重复，只调用不重复的结果；methods则是调用几次计算几次。

例1

<div id="app">
<span v-if="flag">用户账号：<input type="text" value="请输入账号"></span>  
<!--v-if和v-else中间不能有其他元素-->
<span v-else>用户邮箱：<input type="text" value="请输入邮箱"></span>
<!--value属性可以用placeholder属性替代更好-->
<button v-on:click="result">切换类型</button>
</div>

<script src="vue.js"></script>
<script type="text/javascript">
	
	const app = new Vue({
		el:"#app",    //  以下定义的所有变量和函数都只会在id为app的元素内生效
		data:{
			flag:true,
		},
		methods:{
			 result:function () {
				this.flag = !this.flag;	 //  从data对象中获取属性和值需要用到this.属性名
				console.log(this.flag);				
			},
		}
	})

</script>

注意：由于v-if和v-else两个元素是互斥的，而vue在页面上渲染这两个元素的方法其实是一种复用，也就对元素1和元素2取并集（属性和遍若有变化需要进行替换），所以用户后续输入的value（123）也会被渲染出来。

解决方法：在两个元素中加入不同值的标识属性key，作为二者的区别标志，这样vue就不会复用元素及属性了。