共计 4836 个字符，预计需要花费 13 分钟才能阅读完成。
视频教程
由于思否不能插入视频，视频请大家移步，https://www.henrongyi.top
什么是 VUE
VUE 是一套用于构建用户界面的渐进式框架,VUE 并不是一个真正意义上的 mvvm 框架, 它更倾向是一种数据驱动框架. 所以我们在学习 VUE 之前, 无论你是传统 JS 开发者, 还是后端开发人员, 都需要把思维进行一次转化, 在 VUE 里, 数据就是一切, 你所看见的所有东西, 都是数据.
VUE 基础入门
在我们日常的开发中, 我们经常会使用 VUE-CLI 脚手架来搭建 VUE 项目, 但是如果我们学习 VUE, 最好不要直接上手脚手架, 这样对于你在 VUE 的进阶上会增加难度, 我们现在采用传统的引入 js 的方法来开始 VUE 的讲解
开始 HelloWord
国际惯例，在学习一个新的东西之前，一定要先开始一个 HelloWord，这里我们先从官网引入 vue 的 js 文件。
<!– 开发环境版本，包含了有帮助的命令行警告 –>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<!– 生产环境版本，优化了尺寸和速度 –>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
这两个 JS 文件对应了我们的不同环境，学习过程中我们将选择上面的 JS 文件来进行学习。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
{{message}}
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
message:’Hello Word’
}
})
</script>
</body>
</html>
这样，我们用 VUE 写的 Hello Word 就写好了。
核心基础 模板语法 数据绑定
上面代码中我们用了 {{message}}这样一个东西，这是什么呢？我们管这两个大括号叫插值表达式，插值表达式内部可以是简单的 JS 表达式，这里的 {{message}} 则被替换为了 data 内的 message 的数据。我们接下来举例一下简单的 JS 表达式。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
{{message}}
{{1 + 1}}
{{isTrue?” 真的 ”:” 假的 ”}}
{{message.split(”).reverse().join(”)}}
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
message:’Hello Word’,
isTrue:true,
}
})
</script>
</body>
</html>
大家可以看到，这些在插值表达式内的 JS 表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和 script 标签内的规则是类似的。
接下来就是 VUE 的精髓，双向数据绑定。v-model 这个指令是 vue 中用来进行双向数据绑定的重要指令。大家需要注意，只有在表单元素中才可以使用 v -model。并且 v -model 把 dom 中的 value 和 vue 实例中的 data 绑定到了一起。两者的变化会相互影响。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
<input v-model=”message” placeholder=” 我是 v -model 绑定的数据 ”></input>
{{message}}
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
message:’Hello Word’,
isTrue:true,
}
})
</script>
</body>
</html>
上述代码中，我们改变 input 中的 value 值，会发现，message 数据也在同时发生着变化。
常用指令 v-if v-show v-for
v-if v-else 根据表达式的值的真假条件渲染元素。
v-show 和 v -if 差不多 但是 v-show 会渲染 dom 只是隐藏掉了，而 v -if 则连 dom 都不会渲染，当满足条件的时候，dom 才会出现。
在我们日常开发中，很多时候想要隐藏掉某些东西，只有在特定条件下才渲染出来，这里我们举个例子，模拟一下管理员权限。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
<input v-model=”message” placeholder=” 我是 v -model 绑定的数据 ”></input>
<div v-if=”message==’admin'”> 原来你是尊贵的管理员大大啊！</div>
</div>
<div v-else> 告诉我你是谁 </div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
message:’Hello Word’
}
})
</script>
</body>
</html>
v-for 顾名思义就是循环，循环渲染我们需要的东西
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
<ul>
<li v-for=”(key,item) in list” :key=”key”>{{item.name}}</li>
</ul>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
list:[{name:” 奇妙 ”},{name:” 奇淼 ”},{name:”QM”}]
}
})
</script>
</body>
</html>
这样我们通过 v -for 渲染出了一个列表。
数据绑定和事件绑定
v-bind 数据绑定 v -bind 我们称之为数据绑定，我们想要在标签内使用我们 data 中的数据怎么办？通过 v -bin 就可以实现。我们下面来看例子。v-bind:xxxx 可以简写为:xxxx
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id=”app”>
<div v-bind:class=”myClass”>
我是 v -bind 影响的数据
</div>
<div :style=”bindColor”>
我是 v -bind 影响的数据
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
myClass:’active’,
bindColor:{
color:’red’
}
}
})
</script>
</body>
</html>
v-on 事件绑定
我们可以通过 v -on 来绑定事件，同样 v -on 可以简写为 @，这里还需要提到在 VUE 示例中注册事件的地方，methods
方法我们都写在这个里面，废话不说，上代码。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id=”app”>
<button v-on:click=”add”>+</button>{{num}}<button @click=”minus”>-</button>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el:”#app”,
data:{
num:1
},
methods:{
add(){
this.num++
},
minus(){
this.num–
}
}
})
</script>
</body>
</html>
总结
现在这些是 VUE 中最简单的指令部分, 学会他们, 你已经基本可以写简单的 VUE 页面了, 但是距离真正在工作中使用还有距离, 这是 VUE 的第一步, 看完视频后多多熟悉 API , 敲敲代码. 祝你早日步入高级前端的行列.
