vue是国内主流的JavaScript框架，今天我们就从小白的角度带大家认识下vue，以及它的一些常见指令。
Vue体验
一个情景：我们想要在列表中赋值内容，实际项目开发的时候我们必然不能在前端写死，我们需要在js中获取dom结构，把html搬动js中，是像下面这样去写代码的，这是传统原生js写法
xml
<div id="app"></div>
<script>
let app = document.getElementById("app")
let h2 = document.createElement("h2")
h2.innerHTML = "Hello world"
app.appendChild(h2)
</script>我们现在采用vue的写法
首先我们需要导入vue的源码库，点击下面的链接，寻找cdn导入
xml
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>cdn导入就有点像jquery引用库
xml
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const msg = '你好'
const tel = {
template: `<h1>${msg}</h1>`
}
const app = Vue.createApp(tel)
app.mount('#app')
</script>你可以这样理解，Vue就是上面链接导入进来的一个构造函数，这个构造函数里面封装了许多方法，其中createApp就相当于一个new。然后app其实就是被创建了的一个Vue项目。mount是挂载的意思，获取到人家的dom结构，其实这个写法是比较原始的，我们再来看一个新写法：
xml
<div id="app">
你好
</div>
<script type="x-template" id="template">
<div>
<h1>{{message}}</h1>
</div>
</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
document.getElementById("template")
Vue.createApp({
template: '#template',
data: function() {
return {
message: '哈哈哈哈哈哈哈哈哈'
}
}
}).mount('#app')
</script>div下面的js代码就是用于表达上面的html代码，这段js会被当成一个模板。用vue的好处就往html塞值很方便。这里需要注意，Vue.createApp里面是一个对象，其key的名称都是固定的，data是数据源，里面返回的key的名称你可以随意取。
其实你这里还是会发现，这样写代码好像也不优雅，因为敲字符串模板代码的时候没有任何代码提示。确实！其实这个方法我们也不用，我们现在用得是下面这个方法！
xml
<div id="app"></div>
<template id="tel">
<div>
<h2>你好 {{message}}</h2>
<h2>{{count}}</h2>
<button @click="add">+1</button>
<button @click="minus">-1</button>
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: '#tel',
data: function () {
return {
message: '小黑子',
count: 1
}
},
methods: {
add: function() {
this.count ++
console.log(this);
minus() {
this.count --
}
}
}).mount('#app')
</script>template标签是html5的一个标签，他是一个文档碎片，不用来展示。不过你在里面写html代码时，可以挖坑（指的是放变量{{}}），写html代码也能够有提示
这里也简单写了个按钮，实现++和--功能，methods是函数源 ，这里值得注意的是，函数不要写成箭头函数，否则this代表全局
Vue指令
v-text
v-text不需要用{{}}
less
<div v-text="msg"></div>
// 等同于
<div>{{msg}}</div>v-html
就相当于在后端写html，该指令可以渲染出开闭标签的效果
xml
<div v-html="info"></div>
// info: '<h1>这是一个副文本</h1>'v-once
将变量封印掉，不会再变化
less
<h1 v-once>{{count}}</h1>
<h1>{{count}}</h1>
<button @click="add">+1</button>
// add在methods中定义好了，this.count ++第一个h1标签的值被once封印掉了，不会发生变化
v-pre
告诉vue，这里不需要被识别成字符串，直接给你把内容输出出来
其实template模板就是一个字符串，被vue转成dom结构，并且读取变量值，这过程就是vue的编译，然后再挂载在html上进行渲染。
less
<h1 v-pre>{{message}}</h1>
// 打印出 {{message}}v-cloak
隐藏还没编译完成的dom结构。如果代码量很多，编译很久才能看到效果，有了v-cloak没有编译完是不会出现内容的，dom结构生成了，但是值是看不到的
xml
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<h1 v-cloak>{{message}}<h1>
</body>v-model
通常用在input框中，实现内容双向绑定
typescript
账号：<input type="text" v-model="account">
data(){
return {
account: 'admin'
}
}account的值根据你输入或者数据源的值变化而变化
v-bind
on和bind是用的最多的指令。v-bind动态绑定一个或多个属性。
v-bind绑定标签
让你可以在html标签身上绑定某个属性，靠v-bind申明，这是个变量，而非字符串
使用示例：
xml
<template id="my-app">
<img v-bind:src="imgUrl" alt="">
<a :href="link">百度一下</a>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.rRft2FXf66GvFthFd4OuewAAAA?w=220&h=220&c=7&r=0&o=5&dpr=1.3&pid=1.7',
link: 'https://www.baidu.com'
}
}
}
Vue.createApp(App).mount('#app')
</script>前端工程师不能决定这里放什么图片，不能写死链接，因此我们用上bind，v-bind会去数据源里面找变量返回，你不用bind，imgUrl就是一个字符串，而非变量 。当然v-bind一直这样敲会很累。这里提供一个语法糖，简约写法：:href一样管用
v-bind绑定类名
项目开发用得非常多，动态绑定类名
项目开发中类名有时候也不是固定的，因此我们用上bind绑定类名
javascript
<template id="my-app">
<div :class="['Fung', {'active': isActive}]">海豚</div>
</template>
data(){
return {
isActive: true
}
}这里我们放了一个数组，第二个类名由它的值决定显示与否
我们还可以放一个对象，函数🌰
javascript
<div class='Fung' :class="{'active': isActive, 'title': ture}">海豚</div>
<div :class="getClass()">dolphin</div>
data(){
return {
isActive: true
}
},
method: {
getClass() {
return 'string'
}
}动态绑定类名方法很多，场景适合哪个就用那种
v-bind绑定style
javascript
<template id="my-app">
<div :style="{color: fontColor, fontSize: fontSize}">海豚</div>
<template>
data(){
return {
fontColor: 'blue',
fontSize: '50px'
}
}这里注意，vue作者给我们封装成了有-就用驼峰的形式写样式，比如font-size写成fontSize。
当然我们也可以用对象或者数组来存储样式
css
<div :style="[styleObj1, styleObj2]">海豚</div>
data(){
return {
styleObj1: {
color: 'green'
},
styleObj2: {
fontSize: '40px'
}
}
}v-on
v-on用于绑定事件
比如我们给一个div盒子，鼠标移入盒子范围内触发打印事件
javascript
<div v-on:mouseenter='enter' style="width: 100px; height: 100px; border: 1px solid black;"></div>
methods: {
enter(){
console.log('鼠标移入')
}
}函数调用不需要我们自己写(),如果有参数就要用()，如果参数有事件参数event就在前面加一个$符号，否则会被覆盖掉
scss
<button @click="handleClick($event, 'ikun', 18)">按钮</button>
methods: {
handleClick(e, name, age){
console.log(e, name, age)
}
}如果不用$，会输出name，age，undefined。
v-if
用例如下
javascript
<template id="my-app">
<h2 v-if="count == 1">hello world</h2>
<h2 v-else-if="count == 2">こんにちは</h2>
<h2 v-else>你好 世界</h2>
<button @click="change">切换</button>
</template>
data(){
return {
count: 0
}
},
methods: {
change(){
this.count++
if(this.count > 2){
this.count = 0
}
}
}这里简单地实现了一个语言切换的效果，v-if，v-else必须要在相同的同级结构下，不能写出去
v-show
v-show在css层面添加了
display: none，但是与display: none不同的是，v-show不会加载dom结构，所以面对需要频繁消失出现的dom结构，我们用v-show效率会很高，但是v-show的控制权限不好，用权限控制的结构就不能用v-show
用例如下🌰：
javascript
<template id="my-app">
<h2 v-show="isShow">hello World</h2>
<button @click="change">切换</button>
</template>
data(){
return {
isShow: true
}
},
methods: {
change(){
this.isShow = !this.isShow
}
}v-for
注意：现在vue的最新版本是不允许v-for和v-if一起出现的 :因为for让他出现，if不让他出现，性能会大打折扣。考虑性能问题，v-for和v-bind一起使用性能会更高。
实现一个展现歌曲列表，并且进行删除的功能
xml
<div id="app"></div>
<template id="my-app">
<h2>歌曲列表</h2>
<ul>
<li v-for="(item, index) in songs" :key="index">
第{{index + 1}}首：{{item}}
<a href="#" @click="del(index)">x</a>
</li>
</ul>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data(){
return {
songs: [
'爷爷泡的茶',
'红尘客栈',
'烟花易冷'
]
}
},
methods: {
del(i){
this.songs.splice(i, 1)
}
}
}
Vue.createApp(App).mount('#app')
</script>computed
计算属性的函数名直接充当调用，从效果上来说，与在methods封装，没有区别
给到你一个场景：升高温度更换衣服
xml
<div id="app"></div>
<template id="my-app">
<h2>今天温度{{temp}}°</h2>
<h3>建议穿：{{suggestion}}</h3>
<button @click="add">+5°</button>
<button @click="minus">-5°</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
temp: 10
}
},
computed: {
suggestion(){
let res = '夹克'
if(this.temp >= 25){
res = '短袖'
}else if(this.temp <= 0){
res = '羽绒服'
}else{
res = '夹克'
}
return res
}
},
methods: {
add(){
this.temp += 5
},
minus(){
this.temp -= 5
}
}
}
Vue.createApp(App).mount('#app')
</script>这里是响应式执行，当他依赖的数据源发生变更时就会执行，计算属性中的函数发生变更就会执行，别的值变更不会
methods和computed区别
xml
<div id="app"></div>
<template id="my-app">
<button @click="change">修改姓名</button>
<h2>computed:{{fullName}}</h2>
<h2>computed:{{fullName}}</h2>
<!-- hr是html4的标签，不建议使用了，这里仅仅为了简单做个区分 -->
<hr>
<h2>methods: {{getFullName()}}</h2>
<h2>methods: {{getFullName()}}</h2>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: 'Dolphin',
lastName: 'Fung'
}
},
methods: {
getFullName(){
console.log('methods中getFullName执行了')
return this.firstName + ' ' + this.lastName
},
change(){
this.firstName = 'Parker'
}
},
computed: {
fullName(){
console.log('computed执行了')
return this.firstName + ' ' + this.lastName
}
}
}
Vue.createApp(App).mount('#app')
</script>你拿这段代码运行就会发现，computed只会打印一次
这是因为：计算属性是有缓存的，多次使用计算属性的逻辑的时候只会执行一次，而methods没有
watch监听器
vue的一大magic
同样拿到上面的更衣栗子🌰：
xml
<div id="app"></div>
<template id="my-app">
<h2>今天温度{{temp}}°</h2>
<h3>建议穿：{{suggestion}}</h3>
<button @click="add">+5°</button>
<button @click="minus">-5°</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
// 如果这里的温度也不能写死
temp: -5,
suggestion: '夹克'
}
},
watch: {
temp: {
handler: function(newVal, oldVal){
if(this.temp >= 25){
this.suggestion = '短袖'
}else if(this.temp <= 0){
this.suggestion = '羽绒服'
}else{
this.suggestion = '夹克'
}
},
immediate: true
}
},
methods: {
add(){
this.temp += 5
},
minus(){
this.temp -= 5
}
}
}
Vue.createApp(App).mount('#app')
</script>和computed非常相似，区别在于，watch在刚进页面的时候让你先执行一次，这个例子中初始就会显示羽绒服。
写在最后
vue的指令还是比较多的，当你记不住的时候就可以去官网查看。当然你也可以收藏本篇文章，希望对你学习vue有所帮助。如果觉得本文对你有所帮助，不妨给笔者点个赞再走。
