(1) 前端技术发展历程#
- 纯原生 JavaScript
- jQuery(仅仅是提高了 DOM 操作的效率)
- 框架时代
- 框架发展: 纯原生js -> prototype.js -> jQuery.js -> backbone.js+knockout.js -> angular.js -> vue.js+react.js
(2) Vue介绍#
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
- 一款非常优秀的前端渐进式 JavaScript 框架
- Vue 本身只是一个用于数据驱动视图更新的库
- 随着生态的慢慢发展,如今已经有了 Vue Router、Vuex、Vue CLI、Vue Server Renderer 等功能库,所以当 Vue 和这些核心功能库结合到一起的时候,我们称之为一个框架
- 这些技术一般也称之为 Vue 全家桶,所以学习 Vue 实际上就是要学习 Vue 全家桶才能发挥出 Vue 的威力
- 由尤雨溪开发并于 2014 年 2 月开源于 Github(14w+ ⭐️)
- 可以轻松构建 SPA 应用程序
- 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML,通过组件化开发极大的提高了开发的效率和可维护性
- 最大程度上解放了 DOM 操作
(3) Vue核心思想#
Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性,最为核心的是:
- 数据驱动
- DOM 是数据的一种自然映射
- 数据改变自动驱动视图更新
- 组件化
(4) 相关资料#
- Vue.js 官网
- 介绍 | Vue CLI vue脚手架
基础命令
1.差值表达式
v-text,v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{str}}</p>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
<script>
let app = new Vue({
el: '#app',
data:{
msg:'hello world',
str:"<button>这是一个按钮</button>"
}
})
</script>
</body>
</html>
2.v-model
双向绑定的作用,需要input框内使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>{{username}}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data:{
username: '张三'
}
})
</script>
</body>
</html>
3.v-bind
v-bind语法糖,用:简写
(1)绑定class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
background-color: red;
}
.f30{
font-size: 30px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-bind:class="{red:flag,f30:flag}">{{msg}}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
flag: true,
msg:"今天是星期四,天晴"
}
})
</script>
</body>
</html>
(2)v-bind也可以是绑定class属性的三目运算符,
:class=“flag?‘red’:‘’”,当为一个值是:class=‘数值’,该标签的class值为一个数值。
(3)v-bind也可以绑定style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p :style="{color:aaa,fontSize:bbb}">牛马小生活</p>
</div>
<script>
let app = new Vue({
el: '#app',
data:{
aaa:'red',
bbb:'30px',
}
})
</script>
</body>
</html>
4.v-on绑定点击事件,语法糖用@简写,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>请选择省份</p>
<button @click="clickFn('广东')">广东</button>
<button @click="clickFn('深圳')">深圳</button>
<button @click="clickFn('湖南')">湖南</button>
<button @click="clickFn('北京')">北京</button>
</div>
<script>
let app = new Vue({
el:'#app',
data:{},
methods:{
clickFn(city){
alert(city)
}
}
})
</script>
</body>
</html>
ps:批量复制,ctrl加d,后用shift来调节调节复制的文档
小心@click="clickFn('湖南')",双引号里面必须单引号,不然会出不来
5.渲染
v-if和v-show的区别,
v-if是从dom上删除了这个标签节点,
v-show是设置了这个标签节点的display:none,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-show="show">pp</p>
<p v-else>ppp</p>
<p v-show="istrue">ppp</p>
<p v-if="show">p</p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
show:true,
istrue:false
}
})
</script>
</body>
</html>
6.v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul v-for="(item,index) in list">
<li>
{{index+1}},{{item.name}},{{item.age}}
</li>
</ul>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
list:[
{name:'zhangsan1',age:18,id:'001'},
{name:'zhangsan2',age:18,id:'002'},
{name:'zhangsan3',age:18,id:'003'},
{name:'zhangsan4',age:18,id:'004'},
]
},
})
</script>
</body>
</html>
语法: v-for="(item,index) in list"
7.computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
<span>单价{{price}}</span>
<input type="text" v-model="num" placeholder="请输入数量">
</p>
<p>合计:{{total}}</p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
price:30,
num:0
},
computed:{
total(){
return this.price*this.num
}
}
})
</script>
</body>
</html>
ps:在computed用app.price*app.num,会报错,最好使用this。更加直观更加方便,
computed下面定义的total(),return 返回谁,{{total}}就是谁
8.监听器 watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>价格{{price}}</p>
<input type="text" v-model="num">
<p>总价格:{{total}}</p>
<p>{{msg}}</p>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
price:30,
num: 0,
total: 0,
msg: ''
},
watch:{
num(){
this.total = this.price * this.num;
if(this.total>100){
this.msg = '价格不够'
}else{
this.msg='';
}
}
}
})
</script>
</body>
</html>
ps:
- 同一个功能 computed 和 watch 都能实现,能用 computed 的时候一般都用 computed,更简洁
- computed擅长根据多个属性得到一个新的属性, watch擅长监听某个属性, 然后去修改多个属性
9.refs
refs用来获取原生dom节点或者子组件实例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<div ref="box">这个一个div标签</div>
</div>
<script>
new Vue({
el: '#app',
data: {
},
created() {
console.log(this.$refs['box']);
},
mounted() {
console.log(this.$refs['box']);
}
})
</script>
</body>
</html>