vue基础

什么是vue

**vue是一个前端渐进式 mvvm（模式） 框架**
	#渐进式：只要有基础的核心功能即可，其他功能可通过插件导入，与js相比vue属于申明式的实现某些功能，js的核心是dom，vue的核心是数据
	全称（Model-View-ViewModel）
	#mvvm：（是一种模式）
		## m：数据
		## v: 视图
		## mv：数据改变视图自动刷新（数据指导）
		## vm：new Vue的实例（通过vue实例 实现让数据改变视图自动刷新）
	#mvvm 优缺点：
		MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
	优点：1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，
		当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
		2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
		3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，
		4. 使用Expression Blend可以很容易设计界面并生成xaml代码。
		5. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写

vue雏形

在这里插入代码片
```<div id="app">
	{{ msg }}
	</div>
<script src="xxxxx/vue.js"></script>
<script>
    //创建一个vm 实例
    const  vm = new Vue({
        el: '#app', // 挂在实例 #app内部就是vm控制范围
        data:{ // 存放 vm实例上的 数据 可以在 视图中通过{{}}直接渲染
            msg: 'hello vue'
        },
    })
</script>
//页面显示'hello vue


## **vue中模板语法**
		{{  }}：1.一般在里面放new出来的vue实例上的属性（data）里的值，如上面雏形案例，
		其内部是js环境可以写表达式 -> 不过不介意这么使用，如果直接在里面写这样会增加视图的加载负担
			注意：msg是直接挂在新对象原型上的data:{} 相当于一个包含容器，原理类似于new自定义的构造函数
			2.模板中如果 写 函数调用，函数只能是 实例上的方法,如果没有返回值 模板就不渲染，但是方法里面代码会调用
			3.只有在白名单中的全局方法 {{}} 模板中才可以调用 vue设置有一个白名单
				**白名单**： 'Infinity,undefined,NaN,isFinite,isNaN,'+
				'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'+
				'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' + 'require'

 **vue指令**
 	**组件**：
 		<组件 v-指令名[="值"]></组件>：广泛的理解，html标签也属于组件
 		vue是对默认组件（标签）进行再次扩展，有自己的组件 可以自定义组件 引入外部组件等
 		
 	**vue中常见指令**：
 		v-model=“变量”：将表单控件（文本框、密码框、复选、单选等）的值与一个变量进行双向绑定
 			<input type="text" v-model="变量">
 		v-bind:属性="变量；将html的属性的值与一个变量进行双向绑定，使其成为动态的值
 			<a v-bind:href="url">...</a> === <a :htef="url"></a> (缩写方式直接在属性前加：)
 		v-text="变量"：将一个标签的内容双向绑定变量，作用相当于{{  }}
 			<a v-text="msg"></a> === <a>{{ msg }}</a>
 		v-html 指令  渲染富文本数据 可以解析标签
 			msg:``<div><p>haha</p></div>`
 			<div v-html="msg"></div> //haha
      `	v-on:事件 将一个元素 事件 事件函数 和 vue实例上的方法进行绑定
      		methods:{ btn(){ console.log("111") } }
      		<div v-on:click="btn"></div> === <div @click="btn"></div>（缩写方式，直接在事件名前加@）
      	v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
      			跳过大量没有指令的节点会加快编译。
      		<span v-pre>{{ this will not be compiled }}</span>
      	注意：将普通事件绑定到实例上的方法的原因是，在实例方法中。this指向实例，
      		这样就可以在实例方法中改变或者获取实例上其他的属性的数据，从而实现操作数据改变 视图也发生改变的效果
	总结：1,指令的值 虽然在引号中，但是引号内部是一个js环境
		2,里面出现的变量（值或者方法），都会去实例上找
		3,里面可以写任意js语法，但是一般是 表达式
		4,里面全局变量  只能白名单中才能使其实跟模板中的环境是一样的


**vue中的事件**
	 vue事件函数中如何获取事件对象
``	`js
	{
	    methods:{
  	      fn(e){
 	           // 事件函数的第一个参数就是事件对象
  	          // e.stopPropagation()  取消冒泡
    	        // e.preventDefault() 阻止默认事件
     	       // e.target 事件源
   	     }
	    }
	}

在vue事件中 绑定 除了 <组件 @事件="fn">这种还可以<组件 @事件="fn([...params])">
	这种绑定的好处  可以传参，当一个参数不再是事件对象时，可以使用$event保存事件对象
		$event是vue提供的一个变量（实例原型链上） 保存事件对象
写法如下：
	<div id="app">
		<button @click="fn(1,$event)">按钮</button>
	</div>
	<script>
	    const vm = new Vue({
	        el:"#app",
	        methods:{
	            fn(n,e){
	                alert(n);
	                e.stopPropagation();
	            }
	        }
	    })
	</script>

**vue中的事件修饰符**
	@click.修饰符=“”
	一些简单的事件行为可以通过事件修饰符直接进行添加，例如：
		.stop  取消冒泡
		.prevent 阻止默认事件
		.capture 事件在捕获阶段就提前触发
		.self  事件只能自己触发，后代无法触发
		.once  只绑定一次
		.passive  滚动事件的默认行为 (即滚动行为) 将会立即触发
	注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略
		同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

**vue中的表单修饰符**
	v-model.修饰符=“”
	对表单的内容或监听方式进行简单的改变
		.lazy 使表单的input事件触发方法改为change事件触发方式
		.number  使表单的内容类型转为数字类型，类似于parsefloat，
			如果遇到开头为非数字的字符，不再进行转换
		.trim  使表单内容的前后去除空格

**vue中绑定组件方式**
	<div id="app"></div>
	外部方式绑定
		const vm = new Vue({
		    data:{},
		    methods:{}
		}).$mount("#app")
	内部方式绑定
		const v = new Vue({
			el:"#app",
			data:{},
			methods:{},
		})

**vue中的条件渲染指令**
	#v-if
		v-if：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染
			<p v-if="true">true的时候我才会显示</p>
		v-else:：对v-if的补充，必须配合if使用，原理单分支
			<p v-if="xxx===xxx">one的时候我才会显示</p>
			<p v-else>上面不成立时我才会显示</p>
		v-else-if：多分支语句，可使用多个
			<p v-if="xxx===ccc">one的时候我才会显示</p>
			<p v-elsse-if="xxx===aaa">two的时候我才会显示</p>
			<p v-else-if="xxx===bbb">tress的时候我才会显示</p>
			<p v-else>上面不成立时我才会显示</p>	
		总结：这种条件渲染结合某些场景可以更好的复用数据
			1.<template v-if="loginType === 'username'">
			   <label>Username</label>
			   <input placeholder="Enter your username">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address">
			</template>
			那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。
			因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
			2.<template v-if="loginType === 'username'">
			   <label>Username</label>
			   <input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address" key="email-input">
			</template>	
			这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，
			不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：
	#v-show
		语法：<h1 v-show="ok">Hello!</h1>
		用于根据条件展示元素的选项
		不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
		v-show 只是简单地切换元素的 CSS property display。
		注意：v-show 不支持 <template> 元素，也不支持 v-else。

**v-if 和 v-show 比较：**
	v-ifv-if和 v-show都相似的地方，
	一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
	因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

**#v-for 渲染**
	<html>
		<div id="app">
			<ul>
				<li v-for="(item,index) in arr" :key="index">
					{{ item }} //item为arr里的每一个数据
					{{ index }} //index为每个item的下标
				</li>
			</ul>
		</div>
	</html>
	注意:如果是二维或多维数组在遍历时 代表每个数据的变量item和对应的下标index不能重名
	<script>
		const x = new Vue({
			data:{
				arr: [
					{
					name:"KangKang",
					age:17,
					gender:"man"
					},
					{
					name:"Maryr",
					age:15,
					gender:"man"
					},
					{
					name:"Jary",
					age:20,
					gender:"man"
					}
				]
			}
		}).$mount("#app")
	</script>

# vue mvvm原理
		在new一个新的vue实例时，vue立即遍历data对象，
		Object.defineproperty会将实例对象里的data对象里的数据进项转换成getter和setter（类似于劫持），
		并且会启动watcher观察者，监听setter，setter触发后立即执行watcher，watcher会执行一个回调函数，
		回调函数里执行render方法，生个一个虚拟的dom存放在内存中，视图初次加载便会生成一个虚拟dom。
		每当数据更新后立即触发setter方法，并执行watcher 回调里的render方法生成新的虚拟dom，
		在视图转成真实的dom生成之前，这个新生成的虚拟dom会和上一次的虚拟dom运用diff算法寻找出最小的dom操作来更新，
		而不是将整个页面视图全部重新更新，新的虚拟dom会替换前一个虚拟dom
		所以在循环中一定要加上key属性（保证独一无二）
		
	diff算法首先按照相同层进行比较 与之前的算法相比不用再不同层也要比较，
	其次按照相同的key进行比较，减少比较次数，提高渲染效率

# vue 解决模板{{  }}闪烁问题
	分析原因：当vue实例没有初始化好时，模板{{  }}在html中就是一串字符串，
		只要当vue实例化好视图加载好真正的dom后才会出现想要的样式
	解决方式：v-cloak
	原理：指令v-cloak 是一个自定义的属性，一般和css样式的{display：none；}结合使用
		这个指令保持在元素上直到关联实例结束编译，关联的元素未转成真正的dom前这个属性会一直绑定在这个元素上，
		配合display：none；使得该元素不会显示在视图中，当编译结束，这个属性（指令）便会消失，视图也就自然的显示出来
	栗子：<style>[v-cloak]{ display:none; }</style>
		<div v-cloak :a="xxx" @click="xx"> {{ .... }} </div>
	
# vue 侦听器
	watch:{...} 对象的形式，监听实例上的 某个属性的变化，如果这个属性变化了，侦听器会立即调用
		<script>
		const v = new Vue({
			el:"app",
			data:{
				str:"",
				num:0,
				obj:{
					name:"lisi",
					age:12,
				},
				arr:[],
			},
			watch:{
				
			},
		})
		</script>
	1.侦听基础数据类型
		str("新值","旧值"){...需要执行的代码段} 
		num("新值","旧值"){...需要执行的代码段}
	//侦听基础数据类型的时候只要在watch里添加和侦听属性名同名的方法即可
	2.侦听对象
		"obj.name"(新值,旧值){...需要执行的代码段}
			//只会侦听对象里name值的变化
		obj:{
			handler(新值,旧值){...需要执行的代码段},
			deep:true
		}
			//深度侦听对象，侦听每一对键值对
	3.侦听数据和基础数据类型一样
		arr(新址，旧值){..执行的代码段}

# vue 计算属性
	对拿到的基础值进行处理后再使用
	<script>
		const v = new Vue({
		  data:{
		    msg: '你好世界'
		  },
		  computed:{
		    reverseMsg(){  // 这种是简写  大部分都是这种写法
		      return this.msg.split('').reverse().join('')
		    }
		  }
		})
	</script>
	1，计算属性 计算后，会最终在实例上增加一个属性，属性和data中的数据同一级别，
		这个属性名就是computed里的用于计算结果的方法名（reverseMsg）
		所以切记计算属性方法名不能和data / methods里的属性方法名重复
	2.计算属性得出结果后会基于依赖进行缓存，如果依赖不变，再次多次调用这个计算属性结果
		会使用上一次基于这个依赖缓存的结果，减少资源的滥用（与methods的区别）
	3.计算属性不会被直接修改，只能通过它的依赖修改，需要利用set（setter）
	<script>
		const vm = new Vue({
	      el: '#app',
	      data:{
	        num: 2
	      },
	      methods: {
	        change(){
	          this.doubleNum = 100;
	        }
	      },
	      computed: {
	        doubleNum: {
	          get(){ // 原来的简写其实就是getter
	            return this.num*2
	          },
	          set(val){ // 拦截计算属性的 设置操作
	            console.log(val,'setter触发');
	            // 在setter中去修改依赖
	            this.num = val/2;
	          }
	        }
	      }
	    })
	</script>
## 切记切记切记，尽量不要直接修改计算属性

# vue 组件
	什么是组件：一个独立的组成部分 包含html默认标签，可自定义
			和new出来的vue一样，也是vue的实例，所以都vue的属性和方法
	创建一个全局组件：
	+ 全局组件   可以在任意其他组件 或者其他实例 中 使用
		 </script>//定义
		  Vue.component('CommonHead', {
		      template: `
		        <div> 
		          <h1>我是一个公共头部组件</h1>
		          {{ msg }}
		          <button @click="changeMsg">改变msg</button>
		          <input/>
		        </div>
		        >
		      `,
		      data(){
		        return {
		          msg: '你好组件'
		        }
		      },
		      methods:{
		        changeMsg(){
		          this.msg = "哈哈我变了"
		        }
		      }
		    })
		    </script>
		    <html>//使用
		    	<common-head></common-head>
		    </html>
		+ 总结：
		  1，组件命名推荐使用 大驼峰或者 连接符
		  如：
		    CommonHead或者 common-head
		  使用组件
		    <common-head></common-head>
		  2,组件的data属性，必须是一个函数 返回 一个对象
		  原因：组件 可以被多次调用，如果直接是一个对象，会做引用传递（地址传递），
		  		那么多次使用的做个组件data会互相影响
		  3，组件的template必须只能有一个根元素
		  4，组件 内部的所有的属性和方法只能在自己内部使用（有自己独立的作用域）

	+局部组件：就是在父级组件的components对象里定义的组件，改组件就是外部组件的局部组件
		<script>
		Vue.component= ("CxxCxx",{
		  template:`
		    <div>
		      这是父组件
		      <child></child>
		    </div>
		  `,
		  data;(){
		  	return {
		  		xx:"xxxx"
		  	}
		  },
		  components:{
		    Child: {
		      template: `
		        <h2>这是子组件{{msg}}</h2>
		      `,
		      data(){
		        return {
		          msg:"我是子组件"
		        }
		      }
		    }
		  }
		})
		</script>
##注意：不管是局部还是全局 语法都是一样的，只不过注册的地方以及使用范围不一样

# vue -》生命周期
	从创建组件（使用这个组件）开始，直到组件消亡的过程 就叫做生命周期
		在整个生命周期中不同的阶段vue提供了不同的函数，统称钩子函数，
		也就是说我们可以利用钩子来判断我们的组件在哪个阶段，从而添加我们自己的代码
	阶段：
		+ 实例初始化
			实例自己属性方法加载 以及 灌入原型链 上的 一些属性方法和 遍历实例的data属性，
			将data中的属性转换成getter和setter watcher监听	
			beforeCreate
			created 
			created触发后，已经可以调用实例的各种属性方法而且可以修改数据了，因为数据以及 响应式
			
		+ 编译模板阶段 （将组件template属性的值，编译成真实dom挂在到页面上）
			beforeMount
			mounted mounted触发 组件dom已经挂载到页面上，此时可以获取组件上的dom了
			
		+ 更新阶段  数据改变 视图要刷新
			beforeUpdate
			updated updated 触发后可以获取改变后的最新dom了
			
		+ 销毁阶段
			beforeDestroy
			destroyed

未完待续！！！