Vue学习

github下载文件 选择tags下载稳定版本 dev为正在开发版本

vue开发环境

1. 必须装node.js
2. 装vue脚手架工具  npm i -g vue-cli @版本号 （ npm install - globol vue-cli）

创建vue项目

	vue init webpack 项目名 (都选no)
	cd 项目名
	npm install / cnpm install 
	npm run dev 运行项目目录			 

vue常用扩展插件

vue-cli vue脚手架  		vue-router 路由			vuex 状态管理
vue-lazyload 懒加载		vue-scroller 页面滑动相关		
mintui	移动端			element-ui pc端

使用

	引入vue文件后，会有全局的变量vue使用
	new Vue({     	启动应用 new Vue(选项对象)选项对象是告诉vue做什么
	    el:"#app",  选择器、选择body中的某个元素作为模板
	    data:{     	数据对象 做模板时可拿到该对象的数据  对象形式
	        a:"hello"
	    }
	})
	    let data = {message:'abc' a:'11111111'}
	    new vue({
	        el:'#app',
	        data:{
	            data:data 定义在data中的属性和定义在methods中的方法，
	                      都会放在实例对象上
	        },
	        methods: {			methods Object 将来使用在模板中的方法
		         changeShow(){  方法中的this都指向当前实例对象
	                console.log('执行我了');
	                console.log(this.show)
	                this.show = !this.show;
	            }
	        }
	    })
	重点：操作数据上，当数据发生变化，视图会自动更新。
	      更新只会更新数据变化对应的元素，其他的元素不会更新
	      
	let vm = new Vue({ 对象上很多属性，有$开头的是Vue内置的属性
	    el: '#app', //document.getElementById('app')
	    data: {  	数据对象，将来使用在模板中
	        message: 'hello'
	    }
	});     
	在选项对象中写入在data，methods、computed里面的属性,都会挂载在实例上
	更新DOM，只会更新数据改变的元素，其他元素不更新
	
	let arr = [1,2,3,4,5]; 需求：是每一项都*2
	命令式
	let newArr = [];
	for( var i = 0; i < arr.length; i++ ){
	    newArr.push(arr[i] * 2)
	}
	声明式
	let newArr2 = arr.map(item => item * 2)

vue语法

文本插值 {{表达式}}    <p>{{a}}<p>  <p>{{1+1}}</p>

行间中写属性，要符合html行间的书写规则   

在行间中写{{}} 并不会被解析为表达式

指令

指令作用：
    绑定数据和DOM，当数据发生变化，绑定DOM的数据也会发变化
    规则:以v-开头的特殊的行间自定义属性

v-bind 数据绑定

   v-bind:属性名='表达式'  简写 :属性名='表达式'  v-bind:class="{yellow : index == currentIndex}
   
  	:class="{xxx}"
     {
       class名字：表达式（成立，元素添加这个class，不成立，不添加）
     }
	     xxx字符串  
	     xxx对象 <p:class="{classA:isA,classB:isB}"></p>   new Vue({data:{ isA:true,isB:false}})
     
  	:style="{}"
       {
           样式名：'样式值'
       }      
	:src="地址"	

v-for 循环 （作用在需要重复生成的结构上）

    v-for="value,index in 数组"
     
    v-for="value in 数组"
   
    v-for="value,key,index in 对象"

v-if 判断

    v-if="表达式" 表达式成立渲染指令,不成立不渲染       <p v-if="false">
    
    v-else-if="表达式"     <p v-else-if="1+1">测试</p>
    
    v-else   <p v-else>测试</p>

v-show 控制显示隐藏（并没有移出添加元素，默认显示）

    v-show="表达式" 表达式成立，渲染这个指令，不成立不渲染 

v-on 事件

     v-on:事件名="表达式"    表达式直接可以写点击后执行的代码, 表达式可以是一个函数
          
     v-on:事件名="函数名字"  事件对象作为函数的第一个参数拿到   @click="changeShow"

     v-on:事件名="函数名字()" 模板中有全局$event，手动传给函数 @click="changeShow(value,$event)"

	事件修饰符 
		 1. 阻止事件冒泡   event.stopPropagation()  简写  @click.stop="smallBtn()"
 		 2. 阻止默认行为   event.preventDefault()   简写  @click.prevent="baiduBtn"
 	按键修饰符
 		 event.keyCode===13   简写  @keyup.13="test"   @keyup.enter="test"  

频繁切换一个元素显示隐藏，使用v-show 切换display样式

    v-if，频繁的切换，会导致元素从页面中移出添加，性能不好
    一开始根据某个条件成立与否来决定是否渲染某个区域，建议使用 v-if

v-model 双向数据绑定

双向数据绑定： 
	数据 绑定到模板
	模板中交互会改变数据 模板会自动更新
	
语法 
	v-model="表达式"        自动收集表单数据的值
	
作用在表单控件上 	
	input   select    textarea
	input   value     checked 	 根据不同元素的可交互的属性，进行绑定和监听

v-model做了两件事情：
	1. 把表达式的值绑定给元素可交互的属性
	2. 监听交互属性的变化，赋值给表达式

**

computed 计算属性

计算得到的一个属性，计算得到的值会有很多的逻辑，逻辑执行后才能得到计算属性的值，常把这些逻辑放在函数中

	computed { 属性也会放在实例上，内部会把函数执行了，每一个key值对应的value是函数执行后的返回值
		custome(){
			reutrn 值
		}
	}
	不建议在模板中写很多逻辑判断，在模板中放入太多的逻辑会让模板过重且难以维护		
	
什么时候执行？
	初始化显示、相关data发生变化

watch 监视属性

	watch:{	配置监视
			firstName:function (newval,oldval){
				
			}
	}

vue生命周期钩子（回调）

beforeCreate
created 在实例创建完成后被立即调用
beforeMount 在挂载开始之前被调用
mounted  实例被挂载后调用
beforeUpdate  数据更新时调用，发生在虚拟 DOM 打补丁之前
updated
activated
deactivated
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用
destroyed
errorCaptured