一、什么是Vue
1、前端技术的发展（html、CSS、JavaScript）
（1）jQuery：是对JavaScript进行了封装，使得操作DOM、事件处理、动画处理、ajax交互变得非常简洁、方便。是JavaScript的库。
（2）Vue：通过虚拟的DOM来减少对真实DOM的操作，通过尽可能少的、简单的API实现数据的绑定。支持单向和双向的数据绑定
（3）Vue的基本概念：
a、是一个渐进式框架：可以实现自底向上的逐层开发。
b、可以用Vue开发全新的项目，也可以在现有的项目中引入Vue
2、MVVM架构：
（1）MVC架构：模型 — 视图 — 控制器
M：Model(模型)，对数据进行操作
V：View(视图)，用来展示数据
C：Controller(控制器)，处理用户的请求
（2）MVVM架构：
M：Model(模型)
V：View(视图)
VM：ViewModel(视图模型) —- 实现数据的双向绑定
数据的双向绑定：Vue的特征之一，当视图发生改变时，模型能立即感知到；当模型中的数据发生改变时，视图也能立即反应出来。
二、Vue开发的方式
1、基本方式：在页面中引入vue.js文件。（vscode）
2、组件方式：利用Vue-cli（Vue脚手架）开发。（vscode、WebStorm、Vue Gui）
3、创建Vue实例：new Vue({})
（1）el：表示与vue实例绑定的唯一的根标签。是通过标签的id或class属性进行绑定
（2）data：初始化vue实例的属性的值。在底层会自动生成属性的setter和getter方法
可以是用 vue对象名.$data.属性名 的方式来获取值
（3）methods：用来定义方法。这些方法vue的实例可以直接访问
-
<body>
-
<div id="root">
-
<p>{{ msg }}
</p>
-
<button @click="changeMsg">请单击
</button>
-
</div>
-
-
<script>
-
const vm =
new
Vue({
-
el:
'#root',
-
data:{
-
msg:
'蜗牛学院'
-
},
-
methods:{
-
changeMsg(
){
-
this.
msg =
'马伟超'
//this代表的是Vue实例 --- vm
-
}
-
}
-
})
-
console.
log(vm.
$data.
msg);
-
</script>
-
</body>
三、Vue的基本指令(重点)
1、插值表达式：{ { 变量名 }}。将Vue实例的对应的属性值在页面中显示出来
2、内置指令：vue的内置指令都是以 v- 开头的 特殊属性，通过这些指令来操作属性的值
（1）v-show：可以根据表达式的值的真假，来决定是否显示数据
-
<body>
-
<div id="app">
-
<p v-show="flag">蜗牛学院
</p>
-
<p v-show="temp">大雁塔
</p>
-
<!-- <button @click="show">变换</button> -->
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data: {
-
flag:
false,
-
temp:
true
-
}
-
// methods:{
-
// show(){
-
// this.flag = !this.flag
-
// this.temp = !this.temp
-
// }
-
// }
-
})
-
window.
setInterval(
function (
) {
-
vm.
flag = !vm.
flag
-
vm.
temp = !vm.
temp
-
},
1000)
-
</script>
-
</body>
（2）v-html：插入标签
-
<body>
-
<div id="app">
-
<form action="">
-
<label for="">
-
<input type="checkbox" name="" id="">苹果
-
</label>
-
<label for="">
-
<input type="checkbox" name="" id="">香蕉
-
</label>
-
<label for="">
-
<input type="checkbox" name="" id="">橘子
-
</label>
-
<label for="">
-
<input type="checkbox" name="" id="" @click="show">其他
-
</label>
-
<br>
<br>
-
<div v-html="htmlStr" v-show="flag">
</div>
-
</form>
-
</div>
-
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
htmlStr:
'<textarea></textarea>',
-
flag:
false
-
},
-
methods:{
-
show(
){
-
this.
flag = !
this.
flag
-
}
-
}
-
})
-
</script>
-
</body>
（3）v-text：在元素中插入值。作用和插值表达式 { { }}相同
-
<body>
-
<div id="app">
-
<p v-text="test">
</p>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
test:
'蜗牛学院'
-
}
-
})
-
</script>
-
</body>
（4）v-if、v-else、v-else-if：类似于if-else 的功能
-
<body>
-
<div id="app">
-
<div v-if="role==1">
-
<h2>超级管理员
</h2>
-
</div>
-
<div v-else-if="role==2">
-
<h2>管理员
</h2>
-
</div>
-
<div v-else>
-
<h2>过客
</h2>
-
</div>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
role:
5
-
}
-
})
-
</script>
-
</body>
强调：v-show和v-if的区别
A、实现方式：v-if底层采用appendChild方式实现，v-show是通过样式属性display来控制元素的显示和隐藏
B、加载性能：v-if的加载速度更快，v-show的加载速度慢
v-if是条件渲染。将模型中的数据在视图中显示出来的过程称为渲染
（5）v-for：循环指令，用于遍历数组、集合、对象的属性
-
<body>
-
<div id="app">
-
<ul>
-
<li v-for="item in arr">
-
{{ item }}
-
</li>
-
</ul>
-
<ul>
-
<li v-for="(item,index) in arr">
-
{{ item }} === {{ index }}
-
</li>
-
</ul>
-
<ul>
-
<li v-for="(item,key,index) in obj">
-
{{ item }} === {{ key }} === {{ index }}
-
</li>
-
</ul>
-
<ul>
-
<li v-for="item in objArr">
-
{{ item.id }}
-
{{ item.name }}
-
{{ item.address }}
-
{{ item }}
-
</li>
-
</ul>
-
<table border="1">
-
<thead>
-
<tr>
-
<th>编号
</th>
-
<th>姓名
</th>
-
<th>地址
</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr v-for="item in objArr">
-
<td>{{ item.id }}
</td>
-
<td>{{ item.name }}
</td>
-
<td>{{ item.address }}
</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data: {
-
arr: [
11,
22,
33,
44,
55],
-
obj: {
id:
1001,
name:
'A1',
address:
'西安' },
-
objArr: [
-
{
id:
1001,
name:
'A1',
address:
'西安' },
-
{
id:
1002,
name:
'A2',
address:
'西安' },
-
{
id:
1003,
name:
'A3',
address:
'西安' },
-
{
id:
1004,
name:
'A4',
address:
'西安' },
-
{
id:
1005,
name:
'A5',
address:
'西安' }
-
]
-
}
-
})
-
</script>
-
</body>
（6）v-bind：绑定元素的属性，并执行相关操作。简写方式为（ :属性名 ）
-
<style>
-
.ok{
-
font-size:
25px;
-
color: red;
-
}
-
</style>
-
<body>
-
<div id="app">
-
<a v-bind:href="link">超链接
</a>
-
<!-- 简写 -->
-
<!-- <a :href="link">超链接</a> -->
-
<br>
<br>
-
<button @click="change">改变超链接
</button>
-
<p :class="{ok:isok}">大唐芙蓉园
</p>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
link:
'http://www.baidu.com',
-
isok:
true
-
},
-
methods:{
-
change(
){
-
this.
link =
'http://www.woniuxy.com',
-
this.
isok = !
this.
isok
-
}
-
}
-
})
-
</script>
-
</body>
（7）v-on：监听事件，并执行相应的操作。v-on的简写方式（@事件名）
-
<body>
-
<div id="app">
-
<p>{{ msg }}
</p>
-
<button v-on:click="change">修改
</button>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
msg:
'钟楼'
-
},
-
methods:{
-
change(
){
-
this.
msg =
'鼓楼'
-
}
-
}
-
})
-
</script>
-
</body>
（8）v-model：将input标签的值和变量进行绑定，实现数据和视图的双向绑定
-
<body>
-
<div id="app">
-
<input type="radio" name="sex" value="男" v-model="gender">男
-
<input type="radio" name="sex" value="女" v-model="gender">女
-
<p>你选择的性别是:{{ gender }}
</p>
-
<hr>
-
<select name="" id="" v-model="book">
-
<optgroup label="西北地区">
-
<option value="陕西">陕西
</option>
-
<option value="宁夏">宁夏
</option>
-
<option value="甘肃">甘肃
</option>
-
</optgroup>
-
</select>
-
<p>你选择的地区是:{{ book }}
</p>
-
<hr>
-
<input type="checkbox" value="游戏" v-model="hobby">游戏
-
<input type="checkbox" value="篮球" v-model="hobby">篮球
-
<input type="checkbox" value="足球" v-model="hobby">足球
-
<input type="checkbox" value="游泳" v-model="hobby">游泳
-
<p>你的爱好是:{{ hobby }}
</p>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
gender:
'',
-
book:
'',
-
hobby:[]
-
}
-
})
-
</script>
-
</body>
（9）v-once：可以让元素或组件只渲染一次，一旦绑定，数据就不会改变。
-
<body>
-
<div id="app">
-
<input type="text" v-model="onceValue">
-
<p>{{onceValue}}
</p>
-
<p v-once>{{onceValue}}
</p>
-
</div>
-
<script>
-
const vm =
new
Vue({
-
el:
'#app',
-
data:{
-
onceValue:
'onceValue'
-
}
-
})
-
</script>
-
</body>
转载：https://blog.csdn.net/m0_74331160/article/details/128456475