Vue学习

使用

	引入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语法

文本插值 {{表达式}}    
{{a}}
  
{{1+1}}

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

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

指令

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

v-bind 数据绑定

   v-bind:属性名='表达式'  简写 :属性名='表达式'  v-bind:class="{yellow : index == currentIndex}
   
   v-bind:class="{}"
     {
       class名字：表达式（成立，元素添加这个class，不成立，不添加）
     }
     
   v-bind:style="{}"
       {
           样式名：'样式值'
       }      

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

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

v-if 判断

    v-if="表达式" 表达式成立渲染指令,不成立不渲染       

    
    v-else-if="表达式"     
测试
    
    v-else   
测试

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

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

v-on 事件

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

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

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

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

v-model 双向数据绑定

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

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

计算属性

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

	computed { 属性也会放在实例上，内部会把函数执行了，每一个key值对应的value是函数执行后的返回值
		custome(){
			reutrn 值
		}
	}
	不建议在模板中写很多逻辑判断，在模板中放入太多的逻辑会让模板过重且难以维护