Vue学习之从入门到神经(万字长文 建议收藏)
Posted 白大锅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习之从入门到神经(万字长文 建议收藏)相关的知识，希望对你有一定的参考价值。
Vue
前言
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。
特点：
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
Vue.js三种安装方式
此处引荐下大佬的文章 讲的非常详细
Vue.js三种方式安装
一、 Vue导入
概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。
语法：
<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>
案例
<div id="app">
<h1>用户名:<input type="text" v-model="name"/></h1> <br/>
<h1>您输入的用户名是: name</h1>
</div>
<script type="text/javascript">
//创建一个Vue对象
var app = new Vue(
//指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理
el: "#app",
//定义vue中的数据
data:
name: ""
);
</script>
二、Vue基本语法
1.钩子函数
**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法
语法：
<script type="text/javascript">
var app = new Vue(
el:"#app",
//钩子函数created,该方法在页面显示之后,自动执行
created()
console.log("created...");
);
</script>
补充：Vue声明周期和钩子函数
（1）什么是vue生命周期?
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）vue生命周期的作用是什么?
Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。
（3）vue生命周期总共有几个阶段?
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。
（4）第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
（5）DOM 渲染在 哪个周期中就已经完成?
DOM 渲染在 mounted 中就已经完成了。
（6）简单描述每个周期具体适合哪些场景?
生命周期钩子的一些使用方法：
beforecreate : 可以在此阶段加loading事件，在加载实例时触发；
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
mounted : 挂载元素，获取到DOM节点；
updated : 如果对数据统一处理，在这里写上相应函数；
beforeDestroy : 可以做一个确认停止事件的确认框；
nextTick : 更新数据后立即操作dom；
2. 插值表达式
**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"
语法： 变量名/对象.属性名
案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值表达式</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>欢迎来到--> name </h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue(
//让vue接管div标签
el:"#app",
//定义数据,里边包含一个属性name,值为"白大锅"
data:
name:"白大锅"
);
</script>
</body>
</html>
3.显示数据(v-text和v-html)
概述：
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
当网速比较慢时, 使用来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时，页面会显示出原始的, 过一会才会展示正常数据.
语法：
v-text：<span v-text="msg"></span> <!-- 相当于<span>msg</span> -->
v-html：<span v-html="msg"></span> <!-- 相当于<span>msg</span> -->
区别：
v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析
4.数据双向绑定数据(v-model)
概述：
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
注意：
- 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
- 文本框/单选按钮/textarea, 绑定的数据是字符串类型
- 单个复选框, 绑定的是boolean类型
- 多个复选框, 绑定的是数组
- select单选对应字符串，多选对应也是数组
4.1.绑定文本框
代码:
<div id="app">
用户名: <input type="text" v-model="username"/>
</div>
<script type="text/javascript">
var app = new Vue(
el:"#app",
data:
//该属性值和文本框的value属性值,保持一致
username:""
);
</script>
效果:
4.2.绑定单个复选框
代码:
<div id="app">
<input type="checkbox" v-model="agree">同意<br>
</div>
<script type="text/javascript">
var app = new Vue(
el:"#app",
data:
agree:true
);
</script>
效果:
4.3.绑定多个复选框
代码:
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">Swift<br>
</div>
<script type="text/javascript">
var app = new Vue(
el:"#app",
data:
//数组中的值,就是被选中的元素的value属性值
language:["Java","Python"]
);
</script>
效果:
4.4.form表单数据提交
例子:传json格式跟formData格式的两种情况
<template>
<div class="from_box">
<form action="">
<input type="text" placeholder="请输入昵称" v-model="formMess.account">
<input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
<input type="text" placeholder="请输入手机号" v-model="formMess.phone">
</form>
<span class="but" @click="onSubmit()">提交</span>
</div>
</template>
<script>
import axios from 'axios';
export default
name: "from",
data()
return
formMess:
"account":"",
"act_pwd":"",
"phone":""
;
,
methods:
onSubmit()
/* json格式提交： */
// let formData = JSON.stringify(this.formMess);
/* formData格式提交： */
let formData = new FormData();
for(var key in this.formMess)
formData.append(key,this.formMess[key]);
axios(
method:"post",
url:"xxxxxxx",
headers:
"Content-Type": "multipart/form-data"
,
withCredentials:true,
data:formData
).then((res)=>
console.log(res);
);
;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box
form
width:90%;
margin: auto;
border:.01rem solid gray;
display: flex;
flex-wrap: wrap;
input
width:80%;
height:.5rem;
margin-bottom: .2rem;
border:.01rem solid black;
height:.5rem;
.but
font-size: .14rem;
margin-left:5%;
</style>
5.事件处理(v-on)
5.1.事件绑定(v-on)
概述：
Vue中也可以给页面元素绑定事件.
语法：
<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>
注意：
Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on
案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue事件处理</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show">点我</button>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue(
//获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
el:"#app",
//定义vue的方法
methods:
//定义show方法,弹出提示框
show()
alert("Hello Vue!!!");
);
</script>
</body>
</html>
5.2.事件修饰符
**概述：**事件修饰符主要对事件的发生范围进行限定
语法：
<button @事件名.事件修饰符="函数名/vue表达式">点我</button>
分类：
.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue事件处理</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show">点我</button>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue(
//获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
el:"#app",
//定义vue的方法
methods:
//定义show方法,弹出提示框
show()
alert("Hello Vue!!!");
);
</script>
</body>
</html>
6.循环遍历(v-for)
6.1.遍历数组
语法：
v-for="item in items"
v-for="(item,index) in items"
items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。
代码：
<div id="app">
<ul>
<li v-for="(user, index) in users">
index--user.name--user.age--user.gender
</li>
</ul>
</div>
<script>
var app = new Vue(
el:"#app",//el即element，要渲染的页面元素
data:
users:[
"name":"白卓冉","age":8,"gender":"男",
"name":"白大锅","age":12,"gender":"女",
"name":"白仙女","age":4,"gender":"男"
]
);
</script>
6.2.遍历对象
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
value，对象的值
key， 对象的键
index, 索引，从0开始
代码：
<div id="app">
<ul>
<li v-for="(value,key,index) in person">
index--key--value
</li>
</ul>
</div>
<script>
var app = new Vue(
el:"#app",//el即element，要渲染的页面元素
data:
person:"name":"白大锅", "age":3, "address":"中国"
);
</script>
6.3.key
概述：
:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.
案例:
<div id="app">
<button @click="add">添加</button>
<ul>
<li v-for="name in list">
<input type="checkbox"> name
</li>
</ul>
</div>
<script>
var app = new Vue(
el: '#app',
data:
list: ["孙悟空", "猪八戒", "沙和尚"]
,
methods:
add()
//注意这里是unshift,向数组的头部添加一个元素
this.list.unshift("唐僧");
以上是关于Vue学习之从入门到神经(万字长文 建议收藏)的主要内容，如果未能解决你的问题，请参考以下文章
万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 三 ) （建议收藏）
万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 二 ) （建议收藏）
Python数据可视化实战应用万字长文从入门到高端（建议收藏）
Linux疑难杂症解决方案100篇（二十）-万字长文带你读懂正则表达式（建议收藏）