文章目录
- 一 初识Vue
- 二 Vue模板语法
- 1. Mustache语法(双大括号)
- 2. v-once(静态数据)
- 3. v-html(添加标签)
- 4. v-text(添加文本)
- 5. v-pre(禁止解析)
- 6. v-cloak(遮挡)
- 7. v-bind(:)(动态绑定属性)
- 8. v-on(@)(监听事件)
- 9. v-if v-else-if v-else
- 10. v-show
- 11. v-for(遍历)
- 12. v-model(表单绑定-双向)
- 13. v-model修饰符
- 三 computed与methods
- 1. computed 主要放一些计算的代码
- 2. computed与methods的区别
- 四 ES6
- 1. var const let作用域
- 2. 闭包解决var没有作用域引发的问题(函数有自己的作用域)
- 3. 对象字面量的增强写法
- 4. 数组中的响应式方法
- 5. JS高阶函数
- 6. 箭头函数
一 初识Vue
- Vue是个渐进式的框架(可以将Vue作为应用的一部分嵌入,可以一步一步将应用改造成Vue)
- Vue的优点:
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
- 传统JS属于“命令式编程”,无法实现样式和数据分离
Vue属于“声明式编程“,实现样式和数据分离(数据更改直接在data中进行),使代码更清晰
<div id="app">{{message}}</div>
<script src="vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
- Vue代码做了些什么事情?
- 创建了一个Vue对象
- 为Vue对象传入了一些options{el:决定对象挂载到哪个元素 data:存储数据}
- 浏览器渲染过程
浏览器解析到Vue创建的对象之前都是根据普通的html解析,解析到Vue对象后交给Vue对象进行解析,Vue对象将数据进行解析(替换)
- Vue响应式编程(数据改变会马上重解析 )
- Vue的MVVM模型 Model-View-ViewModel
二 Vue模板语法
1. Mustache语法(双大括号)
<h1>hello {{name}} </h1>
<h1>{{name1}} {{name2}} </h1>
<h1>{{name1 + ' ' + name2}} </h1>
<h1>{{name1 * 2}} </h1>
2. v-once(静态数据)
<h1 v-once>hello {{name}} </h1>
3. v-html(添加标签)
<h1 v-html="url">hello</h1>
4. v-text(添加文本)
<h1 v-text="msg">hello</h1>
5. v-pre(禁止解析)
<h1 v-pre>hello {{name}} </h1>
6. v-cloak(遮挡)
<h1 v-cloak>hello {{name}} </h1>
7. v-bind(:)(动态绑定属性)
- 简单绑定
<img v-bind:src="url">
- 对象绑定
<div v-bind:class="{active:isActive,text-danger:hasError}"></div>
<button v-on:click="btnClick">按钮</button>
<script>
const app=new Vue({
el:'#app',
data:{
isActive:true,
hasError:false
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
}
}
})
</script>
- 数组绑定
<div v-bind:class="[class1,class2]"></div>
<script>
const app=new Vue({
el:'#app',
data:{
class1:'aa',
class2:'bb'
}
})
</script>
- style对象绑定
<div v-bind:style="font-size:'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'
}
})
</script>
- 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(@)(监听事件)
- 参数传递
<button @click="btn1()">按钮</button>
<button @click="btn1">按钮</button>
<button @click="btn2()">按钮</button>
<button @click="btn2">按钮</button>
<button @click="btn3">按钮</button>
<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>
- 修饰符使用
<button @click.stop='btnClick'>按钮</button>
<input tupe="submit" value="提交" @click.prevent="subFunc">
<input type="text" @keyup.enter="keyFunc">
<button @click.once="btnFunc">一次使用</button>
9. v-if v-else-if v-else
- 语法
<div id="app">
<h1 v-if="isShow"></h1>
<h1 v-if="isShow">if显示</h1>
<h1 v-else>else显示</h1>
<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>
- 实例 实现注册账号邮箱的转换
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<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
<h1 v-if="isShow">if显示</h1>
<h1 v-show="isShow">show显示</h1>
11. v-for(遍历)
- 数组遍历
<div id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<ul>
<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>
- 对象遍历
<div id="app">
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<ul>
<li v-for="(v,k) in info">{{i}} . {{v}}</li>
</ul>
<ul>
<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>
- v-for绑定和非绑定的区别(key)
<div id="app">
<ul>
<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(表单绑定-双向)
- text/textarea
<input type="text" v-model="message">
<input type="text" :value="message" @input="change">
<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>
- radio
<div id="app">
<label for="male">
<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>
- 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>
- 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修饰符
- lazy number trim
<input type="text" v-model.lazy="message">
<input type="number" v-model.number="age">
<input type="text" v-model.trim="name">
三 computed与methods
1. computed 主要放一些计算的代码
- 简写形式
computed:{
fullName:function(){
return this.name;
}
}
- 完整形式
<div id="app">{{fullName}}</div>
<script src="vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
firstName:'Kobe',
lastName:'Bryant'
},
computed:{
fullName:{
set:function(value){
console.log(value);
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get:function(){
return this.firstName + ' ' + this.lastName;
}
}
}
})
</script>
2. computed与methods的区别
- computed中的方法有缓存机制,当多次调用时,不会进行多次计算,而是把第一次的结果进行缓存,当再次调用时,直接调用缓存的结果
- methods中的方法会进行多次调用,浪费资源
四 ES6
1. var const let作用域
- 块作用域 由{}包含的代码块的作用域 for if {}等 块作用域可以嵌套(
var obj={age:19;}
是对象 不是块作用域)
- var
- 不支持块作用域(块中的声明,块外也能使用)
- 支持变量声明预解析(var 可以放后面)
console.log(d);
var d=10;
var c;
console.log(c);
c=10;
- dc为undefined但不报错
- 允许重复声明`var num=1;var num;` 值为1不变,重复声明
- let
- 支持块作用域(块内声明只能块内用)
- 不支持变量声明预解析
- 不允许重复声明
- const
- 支持块作用域(块内声明只能块内用)
- 不支持变量声明预解析
- 不允许重复声明
- 常量(值一旦确定,不允许修改,所以必须初始化)常量为引用类型的时候 不能保证不可变
const xm={age:14};
console.log(xm.age);
xm.age=11;
console.log(xm.age);
xm={};
- 第一个14 第二个11 第三个错误(不能改变)
- 引用类型只能保证指向的地址不变(数组也一样)
- 暂存死区 let const 如果块作用域中和块作用域外有相同的变量声明,则不会寻找块作用域外的变量
2. 闭包解决var没有作用域引发的问题(函数有自己的作用域)
- 问题(打印出的全是最后一个的值)
var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log(i);
})
}
- 解决
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. 对象字面量的增强写法
- 属性增强写法
const name='why';
const age=18;
const obj = {
name:name,
age:age
}
const obj = {
name,
age
}
- 函数增强写法
const obj = {
name:function(){},
age:function(){}
}
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);
this.arr.splice(1,2);
this.arr.splice(1,1,'bb','cc');
this.arr.sort();
this.arr.reverse();
Vue.set(this.arr,0,'bb');
})
</script>
5. JS高阶函数
- filter map reduce
const nums=[1,199,92,44,393];
let nnums=nums.filter(function(n){
return n<100;
})
let mnums=nnums.map(function(n){
return n*2
})
let total = mnums.reduce(function(preValue,n){
return preValue + n
},0)
- 链式语法
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);