vue介绍：

构建数据驱动的web引用开发框架，属于前端框架。（vue几乎不会用DOM操作）

为什么如此受欢迎？

1、声明式渲染，因对前后端分离开发大趋势

2、渐进式框架，适应各种业务需求以及各种场景（从小到大都可以省略）

3、更适合做移动端开发，SPA页面（单页面开发）- 效率更高

4、快速交付，结合第三方UI框架组件库进行快速开发 - 比如elementUI、VantUI

5、企业需求，必备技能（vue、react）

6、中国自己的框架（借鉴了react和angular）

vue是一个属于mvvm架构的框架：什么是mvvm？

m - model：模型数据

v - view：视图

vm - ViewModel控制器

我们一般都统称为mv*架构：mvc、mvp、mvvm

开发环境搭建：两种方式

1、下载引入：vue.js

2、vue-cli - 脚手架 - 新手不推荐

vue2开发

模板

var vueName=new Vue({
		el:"#box",//只有在id为box的div里才可以使用vue的语法
		data:{//这里面放的是变量
			变量名: 值,
		},
		methods:{//这里面放的是函数
			函数名(){
				操作
			},		
		},
                computed:{//计算属性（节约调用次数）
			函数名(){
				return 结果;
                        }
                },
                watch:{ //监听
			变量名(new,old){
			}
		}
	})
 console.log(vueName)

计算属性

var vm=new Vue({
		el:"",//挂在页面元素
		data:{},//模型数据
		methods:{},//放函数
		computed:{
			函数名(){
				return 结果;
//注意此部分叫做计算属性，很像一个函数，但是必须加return返回值，而且在使用时不能加()调用
//虽然看上去更加麻烦了，但是js中就应该放入逻辑，HTML上不推荐
//但是methods调用几次就会执行几次，但是computed调用多次只要数据不变的情况下只会执行一次
//methods可以说是专门为事件准备的，computed不能绑定在事件上，那他用来干什么？
//只要以后有跟计算相关的都放到computed里面 - 【重在结果】
			}
		},
	})

监听属性：

var vm=new Vue({
		el:"",//挂在页面元素
		data:{},//模型数据
		methods:{},//放函数
		computed:{},
		watch:{
			变量名(new,old){
 //监听，能时刻监听到数据的变化，甚至是异步数据，比如：input不需要再用@input事件了	
			}
		}
	})

方法methods->事件绑定，不可以用return

计算computed->重视结果，解决模板过重的问题，必须要有return，只求结果，不支持异步，只能同步！

监听watch->重视过程，监听一个值的改变，不用返回值，支持异步的

插值表达式：{{变量}}

在HTML上实现了一个基本的js环境，可以进行js运算、放入变量、三目运算、API操作...

vue的指令：在HTML上写着v-xxx的特殊属性

v-html：底层就是innerHTML，做了简化操作，可以渲染标签，其实就是添加了内容

比如：<elem v-html="变量"></elem>

v-for：底层就是for in循环，做了简化操作，可以遍历数组

比如：<elem v-for="(v,i) in 数组名">{{v}}</elem>

会根据数组渲染出多个元素，拥有下标和值，

渲染时配合:key="v" 其中的值一般用id或该循环的对象v，不要用下标，下标会随数组变化，不唯一

v-modal：具有双向数据绑定功能，页面可以控制变量，变量也可以控制页面

比如：<input v-modal="变量名"> input的默认值就为此变量，并且input修改内容，变量也会跟着一起变化

v-show：隐藏和显示，传入的是一个布尔值，根据你的布尔值进行显示隐藏，如果为true则显示，如果为false则隐藏，底层：设置display为none/block
v-if：是否渲染页面，传入的是一个布尔值，根据你的布尔值进行显示隐藏，如果为true则显示，如果为false则隐藏，底层：appendChild/remove

比如：<elem v-show/if="布尔值"></elem>

v-bind:属性名 - 操作动态的属性：简写为:属性名

<a :class="变量" :href="变量"></a>

v-on:事件名 - 绑定事件，简写为：@事件名="函数名" <a @事件名="函数名"></a>

vue2的操作样式

class操作样式：

<div :class="obj">文字</div> - 对象口味的语法糖通过下方代码，最终class有aa和bb为true，则带有此class，cc为false说明不需要

<div :class="arr">文字</div> - 数组口味的语法糖通过下方代码，最终class有aa和cc

new Vue({
	el:"#box",
	data:{
            obj:{ - 样式class对象口味写法
                aa:true,
		bb:true,
		cc:false,
                //注意后续不能用js直接添加dd，不能直接追加新属性和值，
                //vue底层具有拦截机制，想要添加：Vue.set(vm对象.obj,"dd",true);
            },
            arr:["aa","cc"]
            //样式class数组口味写法，可以随便的添加和删除，更加的随意简单：vm对象.arr.push("dd");
            },
	methods:{
        }
			})

style内联样式操作

<div :style="obj">文字</div> - 对象口味的语法糖通过下方代码，最终style内联样式，要有的内容需要搭配下面的代码

<div :style="arr">文字</div> - 数组口味的语法糖通过下方代码，最终style内联样式

var vm=new Vue({
		el:"#box",
		data:{
			obj:{
				background:"red",
				width:"300px",
				height:"300px",
				border:"1px solid #000",
				borderRadius:"50%",
				overflow:"hidden" 
                                //注意后续不能用js直接添加新样式，不能直接追加新属性和值，vue底层具有拦截机制，想要添加：Vue.set(vm对象.obj,"css属性名","css属性值");
			},
			arr:[
				{background:"red",},
				{width:"300px",},
				{height:"300px",},
				{border:"1px solid #000",},
				{borderRadius:"50%",},
				{overflow:"hidden"}, 
                                //样式class数组口味写法，可以随便的添加和删除，更加的随意简单：vm对象.arr.push({"属性名","属性值"});
			]
		},
		methods:{

			}
			})

条件渲染：就是v-if的升级版

<ul>
				<li v-for="v in datalist">{{v.name}} - 
					<span v-if="v.state===0">未付款</span>
					<span v-else-if="v.state===1">待发货</span>
					<span v-else-if="v.state===2">已发货</span>
					<span v-else>已完成</span>
				</li>
			</ul>

通过这些代码，我们可以实现根据json数据渲染页面，并且判断状态的不同显示不同的span文字

列表渲染(v-for)：

        <ul>
            <li v-for="v in 数据名" :key="v.id">{{v}}</li> 
            //遍历数字基本没有意义，不管是遍历对象还是数组，前面始终是值，后面始终是下标
	</ul>

虚拟DOM：数据->vue变为虚拟DOM：JS对象描述的一个节点，然后再和真实DOM进行比较，考虑要不要替换真实DOM->真实DOM

新的数据会生成新的虚拟DOM，然后VUE底层会使用diff算法拿着新的虚拟DOM和老的对象，找不同

找到不同后，会更新出一个补丁，渲染到真实DOM之中，这样的好处就是代价更小（性能）

为什么说虚拟DOM代价更小呢，因为真实DOM非常复杂，有很多很多的属性，但是虚拟DOM只需要重要的属性就够了

理想情况:key="v.id"，千万不要用下标当做key
目的：高效复用DOM
面试题：为什么li要添加key？

数组更新检查：

1、以下方法操作数组，可以检测变动：- 强烈推荐

push/pop/unshift/shift/splice/sort/reverse

2、filter/concat/slice/map - 不会修改原数组，会返回一个新数组，我们可以用新数组再去【覆盖】原数组 - 一般般

3、不能和检测以下变动的数组

arr[下标]=新值;

但是vue3不必担心此问题：已解决

Vue2基础操作1