谁说后端程序员不懂前端(vue专场)
对不起大家，最近找工作找到头疼，疫情下公司招人真的太难了，我那一篇找工作的博文可能要很久才能和大家见面，我抽出时间来写一篇关于vue框架，希望大家会在其中学习到一点知识点
文章目录
- 1. 前端发展
- 2. MVVM
- 3. 认识VUE
- 4. VUE快速入门
- 5. VueJS 常用系统指令
- 1. v-on
- 1.1 v-on:click
- 1.2 v-on:keydown/keyup
- 1.3 v-on:mouseover
- 1.4 事件修饰符
- 1.5 按键修饰符
- 2. v-text与v-html
- 3. v-bind
- 4. v-model
- 5. v-for
- 6. v-if与v-show
- 7. vue生命周期
- 8. vue组件化和ajax（高级）
- 6. 总结
在我刚毕业时候，在学校使用的可是网页三剑客（html+css+js），js可能使用jq代替，在网页开发中前端对后端程序员简直是在学英语一样的头疼，当然可以使用各种UI库复制粘贴，后来向我一个前端朋友请教，他嘲笑我还用jq并安利我学习vue去，并开始vue前端之旅。
1. 前端发展
- 纯静态页面HTML+CSS
- 静态交互页面HTML+CSS+JS
- 动态交互页面HTML+CSS+JQ+AJAX（我是这个时期的学前端）
- node出现大量前端框架
2. MVVM
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开，MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
3. 认识VUE
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。我前端朋友曾这样向我介绍，vue就是代替jq用来操作dom的一个框架，现在没人使用jq来操作dom效率太低。
4. VUE快速入门
<html>
<head>
<meta charset="utf-8" />
<title>快速入门title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
{{message}}
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
}
});
script>
body>
html>
5. VueJS 常用系统指令
1. v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
1.1 v-on:click
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例1title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('csdn')">点击改变button>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
},
methods:{
fun1:function(msg){
this.message=msg; //this表示当前vue对象，很像java中的this
}
}
});
script>
body>
html>
1.2 v-on:keydown/keyup
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例2title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-on:keydown="fun2($event)">
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun2:function(event){
alert(event.key); //弹出按下键盘值
}
}
});
script>
body>
html>
注意：keydown是当按下键盘就触发，keyup是按下并松手键盘才触发，这一点跟js是一模一样
1.3 v-on:mouseover
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例3title>
<style>
#div {
background-color: red;
width: 500px;
height: 500px;
}
style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">这是一个文件域textarea>
div>
div>
body>
<script>
new Vue({
el: "#app",
methods: {
fun1: function () {
alert("鼠标在div");
},
fun2: function (event) {
alert("鼠标在textarea");
event.stopPropagation();//阻止冒泡
}
}
});
script>
html>
1.4 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
- .stop
- .prevent
- .capture
- .self
- .once
如阻止form表单默认提交事件，防止冒泡等等
<html>
<head>
<meta charset="utf-8" />
<title>v-on 事件修饰符title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<form @submit.prevent action="http://www.baidu.com" method="GET">
<input type="submit" value="提交"/>
form>
<div @click="fun1">
<a @click.stop href="http://www.baidu.com">百度a>
div>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("hello world");
}
}
});
script>
body>
html>
1.5 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
<html>
<head>
<meta charset="utf-8" />
<title>v-on 按钮修饰符title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="fun1">
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("你按了回车");
}
}
});
script>
body>
html>
注意：v-on还可以简写,把
v-on:替换@
<a v-on:click="doSomething">...a>
<a @click="doSomething">...a>
2. v-text与v-html
<html>
<head>
<meta charset="utf-8" />
<title>v-html与v-texttitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<div>{{message}}div>
<div v-text="message">div>
<div v-html="message">div>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:"CSDN真好用
"
}
});
script>
body>
html>
3. v-bind
插值语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind指令
<html>
<head>
<meta charset="utf-8" />
<title>v-bindtitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">CSDNfont>
<font size="5" :color="ys2">我是中国人font>
<hr>
百度a>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
ys1:"red",
ys2:"green",
id:1
}
});
script>
body>
html>
注意：v-bind也有简写，把
v-bind去掉并只留一个:
<a v-bind:href="url">...a>
<a :href="url">...a>
4. v-model
如果说插入表达式是单向绑定，那这个就是双向绑定，而且只能用在表单元素中
<html>
<head>
<meta charset="utf-8" />
<title>v-modeltitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="获取">
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
user:{username:"",password:""}
},
methods:{
fun:function(){
alert(this.user.username+" "+this.user.password);//弹出输入框的值
//重新设置user对象值
this.user.username="csdn";
this.user.password="12345678";
}
}
});
script>
body>
html>
5. v-for
- 操作数组
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{{item+" "+index}}li>
ul>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
list:[1,2,3,4,5,6]
}
});
script>
body>
html>
- 操作对象
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例2title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in product">{{key}}--{{value}}li>
ul>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
product:{id:1,pname:"锤子手机",price:6000}
}
});
script>
body>
html>
- 操作数组对象
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例3title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号td>
<td>名称td>
<td>价格td>
tr>
<tr v-for="p in products">
<td>
{{p.id}}
td>
<td>
{{p.pname}}
td>
<td>
{{p.price}}
td>
tr>
table>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
products:[{id:1,pname:"苹果手机",price:19999},{id:2,pname:"华为手机",price:8999},{id:3,pname:"小米手机",price:4999}]
}
});
script>
body>
html>
6. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素(关系到元素是否在页面中存在）
v-show是根据表达式的值来切换元素的display css属性(元素一直在页面中存在)
共同点：都可以显示或不显示元素
运行本代码请按F12审查元素
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-showtitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<span v-if="flag">CSDNspan>
<span v-show="flag">我是中国人span>
<button @click="flag=!flag">切换button>
div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
flag:false
}
});
script>
body>
html>
7. vue生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程.请看官方大图，官方说下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
其实我用到生命周期最多就一个地方，就是初始化后的created钩子函数，在这里我可以发送ajax请求调后端接口把数据拿到，接下来就是解析并渲染到页面。
<html>
<head>
<meta charset="utf-8" />
<title>生命周期title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
{{message}}
div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
},
created: function() {
console.log('发送ajax请求，并拿到数据给data区域变量');
},
beforeMount: function() {
},
mounted: function() {
},
beforeUpdate: function() {
},
updated: function() {
},
beforeDestroy: function() {
},
destroyed: function() {
}
});
script>
body>
html>
8. vue组件化和ajax（高级）
我将另外抽时间写一篇vue高级使用，新手可以把这一篇内容熟练掌握，再向高级使用进阶！
6. 总结
其实学习一门框架最好文档就是官网，再说这个框架是中国人写的，官网不存在看不懂的英文，很多细节我可能在博文中没写清楚，请大家去官网自行查阅。官网地址：https://cn.vuejs.org/
最后感谢大家的阅读，为更好的明天奋斗加油！