Vue语法，看这一篇就够了

一 初识Vue

1. Vue是个渐进式的框架（可以将Vue作为应用的一部分嵌入，可以一步一步将应用改造成Vue）
2. Vue的优点：
   1. 解耦视图和数据
   2. 可复用的组件
   3. 前端路由技术
   4. 状态管理
   5. 虚拟DOM
3. 传统JS属于“命令式编程”，无法实现样式和数据分离
   Vue属于“声明式编程“，实现样式和数据分离（数据更改直接在data中进行），使代码更清晰

<div id="app">{{message}}</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',//数据调用必须和选择的元素一致
        data:{
            message:'hello'
        }
    })
</script>

4. Vue代码做了些什么事情？
   1. 创建了一个Vue对象
   2. 为Vue对象传入了一些options{el:决定对象挂载到哪个元素 data:存储数据}
5. 浏览器渲染过程
   浏览器解析到Vue创建的对象之前都是根据普通的html解析，解析到Vue对象后交给Vue对象进行解析，Vue对象将数据进行解析（替换）
6. Vue响应式编程（数据改变会马上重解析 ）
7. Vue的MVVM模型

二 Vue模板语法

1. Mustache语法(双大括号)

<h1>hello {{name}} </h1>
<h1>{{name1}} {{name2}} </h1>
<h1>{{name1 + ' ' + name2}} </h1>
<h1>{{name1 * 2}} </h1>

2. v-once（静态数据）

//当data中数据改变时，元素中的数据不改变
<h1 v-once>hello {{name}} </h1>

3. v-html（添加标签）

<h1 v-html="url">hello</h1>
//url为含标签的字符串

4. v-text（添加文本）

<h1 v-text="msg">hello</h1>
//msg为字符串
//缺点 会覆盖元素中原有文本 建议用{{}}

5. v-pre（禁止解析）

<h1 v-pre>hello {{name}} </h1>
//{{name}}将不会被vue解析

6. v-cloak（遮挡）

<h1 v-cloak>hello {{name}} </h1>
//vue还没解析这段代码时，使这段代码不显示，解析完这段代码后会去掉v-cloak，使代码显示
//解决因为卡顿，{{name}}没有及时解析而引起的用户体验问题

7. v-bind（:）（动态绑定属性）

1. 简单绑定

<img v-bind:src="url">
//v-bind表明src属性是动态绑定的，于是就会在data中寻找对应的值

2. 对象绑定

<div v-bind:class="{active:isActive,text-danger:hasError}"></div>
<button v-on:click="btnClick">按钮</button>
//添加一个对象，当对象中的类名的值为true时，该类绑定到元素上
<script>
  const app=new Vue({
    el:'#app',
    data:{
      isActive:true,
      hasErrot:false
    },
    methods:{
    	btnClick:function(){
    		this.isActive = !this.isActive
    	}
    }
  })
</script>

3. 数组绑定

<div v-bind:class="[class1,class2]"></div>
//<div v-bind:class="['class1','class2']"></div>
//有''表示为字符串 无''表示变量
<script>
  const app=new Vue({
    el:'#app',
    data:{
    	class1:'aa',
    	class2:'bb'
    }
  })
</script>

4. style对象绑定

//50px得加''，否则当作变量解析
//两种表达方式
<div v-bind:style="font-ize:'50px'"></div>
<div v-bind:style="fontSize:'50px'"></div>
<div v-bind:style="{fontSize:finalSize + 'px', color:finalColor}"></div>
//有''表示为字符串 无''表示变量
<script>
  const app=new Vue({
    el:'#app',
    data:{
 		finalSize：100,
 		finalColor:'red'
 		//data中字符串得加''
    }
  })
</script>

5. style数组绑定

   <div v-bind:style="[baseStyle,base]"></div>
   //有''表示为字符串 无''表示变量
   <script>
     const app=new Vue({
       el:'#app',
       data:{
   		baseStyle:{fontSize:'20px'},
   		base:{backgroundColor:'red'}
       }
     })
   </script>
   

8. v-on（@）（监听事件）

1. 参数传递

//方法没有形参时 加不加()都一样
<button @click="btn1()">按钮</button>
<button @click="btn1">按钮</button>
//方法有形参时 加了(),没有参数 undefined
<button @click="btn2()">按钮</button>
//方法有形参时 不加() 传递浏览器默认事件event
<button @click="btn2">按钮</button>
//方法有两个形参时 不加() 第一个形参为浏览器默认event 第二个为undefined
//方法有两个形参时 加() 不传参 两个都是undefined
<button @click="btn3">按钮</button>
//方法有两个形参时 通过$event获取
<button @click="btn1(12,$event)">按钮</button>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    methods:{
        btn1(){
            console.log('btn1');
        },
        btn2(e){
            console.log(e);
        },
        btn3(e,v){
            console.log(e);
            console.log('v:',v);
        }
    }
  })
</script>

2. 修饰符使用

//阻止冒泡			''和""都可以
<button @click.stop='btnClick'>按钮</button>
//阻止默认事件
<input tupe="submit" value="提交" @click.prevent="subFunc">
//监听按键             监听enter
<input type="text" @keyup.enter="keyFunc">
//一次回调
<button @click.once="btnFunc">一次使用</button>

9. v-if v-else-if v-else

1. 语法

<div id="app">
//v-if 如果为true则显示 为false则不显示
<h1 v-if="isShow"></h1>
//v-if-else 显示true的那个
<h1 v-if="isShow">if显示</h1>
<h1 v-else>else显示</h1>
//v-else-if 多条件不建议使用 太复杂 
<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=60">良好</h1>
<h1 v-else>差</h1>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        isShow:true,
        score:50
    }
  })
</script>

2. 实例 实现注册账号邮箱的转换

<div id="app">
    <span v-if="isUser">
    //label作用：当鼠标点击label文本的时候for所指向的input会聚焦
        <label for="username">用户账号</label>
        //不同的key用来解决切换后输入框内的内容不清空的情况
        <input type="text" id="username" placeholder="用户账号" key="123">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="abc">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        isUser:true,
    }
  })
</script>

10. v-show

//当v-if为false时，元素根本不在dom中
//当v-show为false时，给元素添加一个行内样式dipslay:none
//当需要频繁在显示和隐藏之间切换时用v-show
//当只有一次切换时，多用v-if
<h1 v-if="isShow">if显示</h1>
<h1 v-show="isShow">show显示</h1>

11. v-for（遍历）

1. 数组遍历

<div id="app">
    <ul>
    //只获得value
        <li v-for="item in names">{{item}}</li>
    </ul>
    <ul>
    //获得index和value index在后
        <li v-for="(v,i) in names">{{i+1}} . {{v}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        names:['jack','lucy','candy']
    }
  })
</script>

2. 对象遍历

<div id="app">
    <ul>//获取value
        <li v-for="item in info">{{item}}</li>
    </ul>
    <ul>//获取value和key key在后面
        <li v-for="(v,k) in info">{{i}} . {{v}}</li>
    </ul>
    <ul>//获取value key index
        <li v-for="(v,k,i) in info">{{i}} . {{k}} . {{v}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        info:{
            name:'why',
            age:18
        }
    }
  })
</script>

3. v-for绑定和非绑定的区别（key）

<div id="app">
    <ul>
    //绑定一个key 要和item相同 作用：高效更新虚拟DOM
        <li v-for="item in names" key="item">{{item}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        names:['jack','lucy','candy']
    }
  })
</script>

12. v-model（表单绑定-双向）

1. text/textarea

//v-model可作用于 text 和 textarea
//原理： v-bind绑定一个value属性 v-on监听input事件
<input type="text" v-model="message">
//复杂写法
<input type="text" :value="message" @input="change">
//或把event直接写在input里
<input type="text" :value="message" @input="message=$event.target.value">

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好"
        },
        methods:{
            change(e){
                this.message = e.target.value;
            }  
        }
    })
</script>

2. radio

<div id="app">
  <label for="male">
  //没有用v-model时 要用name才能实现单选
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h2>您的性别是：{{sex}}</h2>
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
          sex:'男'
        },
    })
</script>

3. checkbox

<div id="app">
  <label for="agree">
//单选框
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <button :disabled="!isAgree">下一步</button>
//多选框
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>爱好:{{hobbies}}</h2>

//值绑定
<label v-for="item in originHobbies" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>	
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
          isAgree:false,
          hobbies:[],
          originHobbies:['足球','篮球','羽毛球'],
        }
    })
</script>

4. select

<div id="app">
    <select name="abc" v-model="fruit" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="葡萄">葡萄</option>
        <option value="梨">梨</option>
        <option value="火龙果">火龙果</option>
    </select>
    <h1>水果：{{fruit}}</h1>
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            fruit:[]
        }
    })
</script>

13. v-model修饰符

1. lazy number trim

//lazy 输入的内容按 回车后才会传回 data
<input type="text" v-model.lazy="message">
//number 没有添加number修饰符 默认是string类型
<input type="numebr" v-model.number="age">
//trim 去字符串中空格
<input type="text" v-model.trim="name">

三 computed与methods

1. computed 主要放一些计算的代码

1. 简写形式

computed:{
	fullName:function(){
		return this.name;
	}
}

2. 完整形式

<div id="app">{{fullName}}</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        firstName:'Kobe',
        lastName:'Bryant'
    },
    computed:{//方法调用的时候不加() 和methods中的函数不同
      fullName:{
          //set方法用来设置值，但大多数时候不希望值被改变，所以去掉这个方法
          //成为只读属性，所以常用简写
          //console中执行app.fullName = 'Lebron James'会传到set中并执行set
          set:function(value){
            console.log(value);
            const names = value.split(' ');
            //进行赋值，get中输出的值将改变
            this.firstName = names[0];
            this.lastName = names[1];
          },
          //get方法用来返回值
          get:function(){
            return this.firstName + ' ' + this.lastName;
          }
      }
    }
  })
</script>

2. computed与methods的区别

1. computed中的方法有缓存机制，当多次调用时，不会进行多次计算，而是把第一次的结果进行缓存，当再次调用时，直接调用缓存的结果
2. methods中的方法会进行多次调用，浪费资源

四 ES6

1. var const let作用域

1. 块作用域 由{}包含的代码块的作用域 for if {}等 块作用域可以嵌套（var obj={age:19;}是对象 不是块作用域）
2. var
   • 不支持块作用域（块中的声明，块外也能使用）
   • 支持变量声明预解析（var 可以放后面）

   console.log(d);
   var d=10;
   var c;
   console.log(c);
   c=10;
   

    - dc为undefined但不报错
    - 允许重复声明`var num=1;var num;` 值为1不变，重复声明
   

3. let
   • 支持块作用域（块内声明只能块内用）
   • 不支持变量声明预解析
   • 不允许重复声明
4. const
   • 支持块作用域（块内声明只能块内用）
   • 不支持变量声明预解析
   • 不允许重复声明
   • 常量（值一旦确定，不允许修改，所以必须初始化）常量为引用类型的时候 不能保证不可变

     const xm={age:14};
        console.log(xm.age);
        xm.age=11;
        console.log(xm.age);
        xm={}; 
   

    	- 第一个14 第二个11 第三个错误（不能改变）
    	- 引用类型只能保证指向的地址不变（数组也一样）
   

5. 暂存死区 let const 如果块作用域中和块作用域外有相同的变量声明，则不会寻找块作用域外的变量

2. 闭包解决var没有作用域引发的问题（函数有自己的作用域）

1. 问题（打印出的全是最后一个的值）

var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	btns[i].addEventListener('click',function(){
		console.log(i);
	})
}

2. 解决

var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	(function(i){
	btns[i].addEventListener('click',function(){
		console.log(i);
	})
	})(i)
}

3. 对象字面量的增强写法

1. 属性增强写法

const name='why';
const age=18;
//ES5写法
const obj = {
	name:name,
	age:age
}
// ES6写法
const obj = {
	name,
	age
}

2. 函数增强写法

//ES5
const obj = {
	name:function(){},
	age:function(){}
}
//ES6
const obj = {
	name(){},
	age(){}
}

4. 数组中的响应式方法

<div id="app">
<ul>
    <li v-for="item in info" key="item">{{item}}</li>
</ul>
</div>

<script src="vue.js"></script>
<script>
const app=new Vue({
    el:'#app',
    data:{
		arr:[1,2,3,4,5]
    }
    methods:{
    	btn(){
    		//数组最后插入元素
    		this.arr.push('aaa','bbb');
    		//删除数组最后一个元素
    		this.arr.pop();
    		//删除数组中第一个元素
    		this.arr.shift();
    		//在数组前面添加元素
    		this.arr.unshift('aaa','bbb');
    		//删除/插入/替换元素
    		this.arr.splice(1);//删除1和后面所有
    		this.arr.splice(1,2);//从1删除2个
    		//从1开始删除1个，替换成bb cc
    		this.arr.splice(1,1,'bb','cc');
    		//排序
    		this.arr.sort();
    		//反转
    		this.arr.reverse();
    		//***********************
    		//通过索引值修改数组中的元素，不会被监听，虚拟DOM不会重解析,用splice
    		//this.arr[0]='c';	非响应式
    		Vue.set(this.arr,0,'bb');
})
</script>

5. JS高阶函数

1. filter map reduce

const nums=[1,199,92,44,393];
//filter 小于100的为true会返回
let nnums=nums.filter(function(n){
	return n<100;
})
//map 进行遍历
let mnums=nnums.map(function(n){
	return n*2
})
//reduce 累加
let total = mnums.reduce(function(prevValue,n){
	return preValue + n
},0)	

2. 链式语法

const nums=[1,199,92,44,393];
let total = nums.filter(function(n){
	return n<100;
}).map(function(n){
	return n*2;
}).reduce(function(prevValue,n){
	return prevValue +n;
},0)

6. 箭头函数

const nums=[1,199,92,44,393];
let total=nums.filter(n=> n<100).map(n=> n*2).reduce((pre,n)=> pre + n);