视频教程
由于思否不能插入视频,视频请大家移步,http://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 ,敲敲代码.祝你早日步入高级前端的行列.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。