Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
(1)、组件化,保留了 react 框架的优点,实现了封装和重用,且组件间可以相互嵌套;
(2)、轻量级,相对于其他框架,Vue学习成本低,简单易上手;
(3)、虚拟 DOM,虚拟DOM 中存在 diff算法,是 cpu 密集型运算,占用内存较少,可以提高运行效率,并压缩运行时体积;
(4)、Vue是一个MVVM框架,数据绑定。数据单项绑定(v-bind),单向指data中的值绑定到视图中,但视图中修改不会影响到data数据;双向绑定(v-model),数据发生变化会驱动视图的更新,视图的更新也会驱动数据的变化;
(5)、单页面应用(SPA)。用户体验好,内容改变时不需要重新加载整个页面,不会进行多个 html 页面间的切换;服务器压力小等。
(1)、传统方式:在html页面中导入vue库
Vue2:
Vue3:
(2)、使用架构工具(专业开发):vue cli(vue脚手架)、vite(新一代的架构工具)
(1)引入Vue库
(2)创建视图(view)
(3)创建模型(Model)
(4)创建vue实例,将model挂载到View—实现ViewModel
6.1、使用"{{ }}"运算将模型中的数据插入到视图中
演示:
<!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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p> {{count}} </p>
<p> {{2*9}} </p>
<p> {{ 10 < 5}} </p>
</div>
<script>
const obj={
data(){
return{
count:1
flag: false
}
},methods:{
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
6.2、插入标签:使用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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
<div v-html="info"></div>
</div>
<script>
const obj={
data(){
return{
msg:"西安",
info:"",
}
},methods:{
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
6.3、插入文本:使用v-text指令
<!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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-text="info"></div>
</div>
<script>
const obj={
data(){
return{
info:"",
}
},methods:{
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
需要注意:在vue中使用v-开头的都是Vue指令
渲染就是将模型中的数据显示到视图中。条件渲染就是根据表达式的值来决定是显示还是隐藏内容
7.1、v-if:
<!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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-if="flag">陕西</div>
</div>
<script>
const obj={
data(){
return{
flag: true
}
},methods:{
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
7.2、v-show:
<!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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-show="show">
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>
</div>
<script>
const obj={
data(){
return{
show:true
}
},methods:{
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
7.3、v-if和v-show的区别:
A、实现方式不同: v-if底层采用DOM的appendChild方法创建元素添加到页面中v-show是通过CSS的display属性来控制是否显示元素
B、加载性能:v-if快,v-show慢
C、切换开销:v-if的开销大,v-show的开销小
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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="app">
<div>
<ul>
<li v-for="item in arr">
{{ item }}
li>
ul>
div>
<hr>
<ul>
<li v-for="pro in obj">
{{ pro }}
li>
ul>
<hr>
<ul>
<li v-for="item in objArr">
{{ item.key}}
{{ item.name}}
{{ item.loc}}
li>
ul>
<hr>
<ul>
<li v-for="(item,key,index) in obj">
{{key}}:{{item}}:{{index}}
li>
ul>
div>
<script>
const obj = {
data(){
return {
arr:[11,22,33,44,55],
obj: { no:1001,name:'刘备',sex:'男',age:35},//对象
objArr: [
{
key: 11,
name: '市场部',
loc: '北京'
},
{
key: 12,
name: '财务部',
loc: '北京'
},
{
key: 13,
name:'研发部',
loc: '西安'
}
]
}
},
methods:{
}
}
Vue.createApp(obj).mount('#app')
script>
body>
html>
9.1、v-bind
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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<style>
.ok{
color:red;
font-size: 25px;
}
#d1{
width: 50px;
height: 50px;
background-color: red;
}
style>
<body>
<div id="app">
<a v-bind:href="link">百度一下a>
<br><br>
<p v-bind:class="{ok:isOk}">西安p>
div>
<script>
const obj = {
data(){
return {
link:'http://www.baidu.com',
isOk:true
}
},
methods:{
}
Vue.createApp(obj).mount("#app")
script>
body>
html>
9.2、v-on:给元素绑定事件
A、绑定一个事件
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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<button type="button" v-on:click="myclick">绑定事件button>
div>
<script>
const obj = {
data(){
return {
link:'http://www.baidu.com',
isOk:true
}
},
methods:{
myclick:()=>{
alert("v-on")
}
}
}
Vue.createApp(obj).mount("#app")
script>
body>
html>
B、绑定多个事件:
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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<style>
.ok{
color:red;
font-size: 25px;
}
#d1{
width: 50px;
height: 50px;
background-color: red;
}
style>
<body>
<div id="app">
<button type="button" v-on:click="myclick">绑定事件button>
<br><br>
<div id="d1" v-on="{click:clickDiv,mouseover:myOver}">div>
div>
<script>
const obj = {
data(){
return {
link:'http://www.baidu.com',
isOk:true
}
},
methods:{
myclick:()=>{
alert("v-on")
},
clickDiv(){
alert('单击了div')
},
myOver(){
console.log('悬停')
}
}
}
Vue.createApp(obj).mount("#app")
script>
body>
html>
9.3、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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
<body>
<div id="app01">
<p>请选性别p>
<div>
<input type="radio" name="sex" id="" value="男" v-model="gender"/>男
<input type="radio" name="sex" value="女" v-model="gender"/>女
div>
<br><br>
<p>你的性别是:{{ gender }}p>
<p>毕业院校:p>
<div>
<select name="" id="" v-model="school">
<option>请选择option>
<option value="西安">西安option>
<option value="郑州">郑州option>
<option value="武汉">武汉option>
select>
div>
<p>你的家乡:{{ school }}p>
div>
<script>
const obj = {
data(){
return{
gender:'',
school:''
}
}
}
Vue.createApp(obj).mount("#app01")
script>
body>
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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="app">
<span>新建任务:span>
<input type="text"
placeholder="请输入任务..."
v-model="teskText"
/>
<button v-on:click="addTask">添加button>
<br><br>
<ol>
<li v-for="(item,index) in todos">
{{ item }}
<button v-on:click="remove(index)">删除任务button>
<hr/>
li>
ol>
div>
<script>
const obj = {
data(){
return{
teskText:'',
todos:[]
}
},
methods:{
addTask(){ //添加任务
if(this.teskText.length==0){ //表示用户未输入信息
alert('请输入信息')
return
}
this.todos.push(this.teskText) //将新任务添加到数组中
this.teskText='' //将输入框清空
},
remove(){
this.todos.splice(this.index,1)
}
}
}
Vue.createApp(obj).mount('#app')
script>
body>
html>