第八篇：复习Vue基础
写本文主要是为了分享我的学习过程，也是给自己记个笔记，哪里忘记了，回来再看一眼，也可以很快的回想起来
·
一、什么是Vue
Vue : 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现双向的数据绑定，将编程的关注点放在数据上
官网：https://cn.vuejs.org/
框架 ：是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷，更加高效
用一张图描述：
- Model：数据模型，包含了很多业务的数据和数据的处理方法
- View : 视图层，只负责界面的展示（HTML页面展示的标签，也可以理解为就是DOM元素）
- ViewModel : 是View 和 Model 通信的桥梁
通过ViewModel，就可以实现两者之间的数据绑定，当Model做出改变，ViewModel会自动更新View视图层中的展示，这就称之为双向数据绑定，Vue就是双向绑定的核心
二、Vue基础
1. Vue的引用
新建HTML页面，引入Vue.js文件
</script src = "js/vue3.0.js"></script>
在JS代码区域，创建Vue核心对象，定义数据模型
<script>
const { createApp } = Vue
var s = createApp({
data() {
return{
message:"hello vue"
}
}
}).mount("#app")
</script>
编辑视图
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
运行结果如下：
当方框内的内容被更改之后，右边的输出也会同步进行更改
2. 常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指定具有不同含义。
具体常用指令如下：
| 指令 | 作用 |
|---|---|
| v-bind | 为 html 标签绑定属性值，如设置href css样式等 |
| v-model | 为表单元素上创建双向数据绑定 |
| v-on | 为html标签绑定事件 |
| v-if | |
| v-else-if | 条件渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | |
| v-show | 根据条件展示某元素,区别在于切换的是display |
| v-for | 列表渲染,遍历容器的元素或者对象属性 |
代码实例如下：
<html>
<head>
<title>Vue常见指令</title>
<script src="../js/vue3.0.js"></script>
</head>
<body>
<div id="totle">
<!--
v-bind
v-model
-->
<div id="v-bind">
<a v-bind:href="url">链接1</a><br><br>
<a :href="url">链接2</a><br><br>
<input type="text" v-model="text"> {{text}} <br><br><br>
<!-- 文本框内输入什么,链接1,链接2会同步更新 -->
</div>
<!--
v-on
-->
<div id="v-on">
<input type="button" value="点一下" v-on:click="handle()">
<input type="button" value="再点一下" @click="handle()"><br><br>
</div>
<!--
v-if v-else-if v-else v-show
-->
<div id="v-if">
您今年多大了?<input type="text" v-model="age">判定为：<br>
<span v-if="age <= 18">小屁孩(18以下)</span>
<span v-else-if="age <= 35">年轻人(35以下)</span>
<span v-else-if="age > 35 && age <= 60">中年人(35-60)</span>
<span v-else="age > 60 && age < 100">老年人(60以上)</span>
</div>
<br><br>
<!--
v-for
-->
<div id="v-for">
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
</div>
</div>
</body>
<script>
const { createApp } = Vue
var app = createApp({
data(){
return{
url:"https://www.baidu.com",
text:"点击输入",
age : 0,
addrs:["河南","北京","上海","广州","深圳"]
}
},
methods:{
handle:function(){
alert("我被点击了一下")
}
},
}).mount("#totle")
</script>
</html>
具体实现效果如下：
3. Vue生命周期
顾名思义，生命周期指的是一个对象从创建到销毁的整个过程
生命周期共分为八个阶段，每触发一个生命周期事件，就会自动执行一个生命周期方法（也叫钩子方法）
| 状态 | 阶段周期 | 页面的展示 |
|---|---|---|
| beforeCreate | 创建前 | 是vue创建之前的内容 |
| created | 创建后 | 能够获取到vue中的代码块 |
| beforeMount | 挂载前 | 和created能展示出的内容一样 |
| mounted | 挂载后 | 能够得到HTML中的信息，在此之前均得不到html标签中的内容 |
| beforeUpdate | 更新前 | 得到的HTML的内容之后，修改之前的内容 |
| updated | 更新后 | 修改之后的内容 |
| beforeDestroy | 销毁前 | 页面无展示 |
| destroyed | 销毁后 | 页面无展示 |
官方图：
下面用一段代码来解释，例子如下：
<html>
<head>
<title>生命周期</title>
<script src="../js/vue3.0.js"></script>
</head>
<body>
<div id="totle">
<input type="text" v-model="msg">
{{msg}}
</div>
</body>
<script>
const { createApp } = Vue
var app = createApp({
data() {
return{
msg:"我是一句话。"
}
},
beforeCreate : function() {
console.info("我是beforeCreate") // Vue 创建之前
console.info(this.$el)
console.info(this.$data)
console.info(this.msg)
console.error("------------------------")
},
created : function(){
console.info("我是created") // Vue 创建之后
console.info(this.$el)
console.info(this.$data)
console.info(this.msg)
console.error("------------------------")
},
beforeMounted : function(){
console.info("我是beforeMounted") // 标签绑定前
console.info(this.$el)
console.info(this.$data)
console.info(this.msg)
console.error("------------------------")
},
mounted : function(){
console.info("我是mounted") // 标签绑定后
console.info(this.$el)
console.info(this.$data)
console.info(this.msg)
console.error("------------------------")
},
beforeUpdate : function(){
console.info("我是BeforeUpdate") // 运行时:动态修改之前
console.info(this.$el.parentNode.innerHTML)
console.error("------------------------")
},
updated : function(){
console.info("我是update") // 运行时:动态修改之后
console.info(this.$el.parentNode.innerHTML)
console.error("------------------------")
},
beforeDestroy : function(){
console.info("我是beforeDestroy") // 销毁之前
},
destroy : function(){
console.info("我是destroy") // 销毁之后
}
}).mount("#totle")
</script>
</html>
运行结果如下：
- mounted：挂在完成，Vue初始化成功，HTML页面渲染成功（发送请求到服务端，加载数据）
三、Ajax
1. Ajax
概念：Asynchronous JavaScript And-XML，异步的JavaScript和XML
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据
- 异步请求：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
同步请求和异步请求的区别：
- 同步请求和异步请求是两种不同的请求处理方式。
- 同步请求是指发送请求后，程序会一直等待服务器返回响应结果，期间程序不能做其他事情
- 异步请求是指发送请求后，程序不会等待服务器返回响应结果，而是继续执行后续操作。
下面用两张图片来解释同步请求和异步请求
同步请求：
异步操作：
原生Ajax案例：
2. Axios
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发
跳转官网：https://www.axios-http.cn/
Axios的引用
Axios的引用和Vue的引用几乎一致，只需要把src路径更改即可：
<script src="js/axios-0.18.0.js"></script>
Axios发送请求，并获取响应数据
案例如下：
<html>
<head>
<title>Ajax.Axios</title>
</head>
<script src="../js/axios-0.18.0.js"></script>
<body>
<input type="button" value="获取数据get" onclick="get()">
<input type="button" value="删除数据post" onclick="post()">
</body>
<script>
function get(){
// 通过axios发送异步请求-get
axios({
methods:"get",
url :"https://yapi.pro/mock/165187/user/getID"
}).then(result =>{
console.log(result.data)
})
}
function post(){
// 通过axios发送异步请求-post
axios({
methods:"post",
url:"https://yapi.pro/mock/165187/user/deleteId",
data:"id=1"
}).then(result =>{
console.info(result.data)
})
}
</script>
</html>
运行效果如下：
为了简化书写，Axios提供了起别名的方式
- axios.get(url,[,config])
- axios.delete(url,[,config])
- axios.post(url [,data [,config ]])
- axios.put(url [,data [,config ]])
可以用下面代码，来替换掉上面<script>标签中的写法，运行效果一致
<script>
// 通过axios发送异步请求-get
function get(){
axios.get("https://yapi.pro/mock/165187/user/getID").then(result =>{
console.log(result.data)
})
}
// 通过axios发送异步请求-post
function post(){
axios.post("https://yapi.pro/mock/165187/user/deleteID","id=1").then(result =>{
console.info(result.data)
})
}
</script>
四、小结
写本文主要是为了分享我的学习过程，也是给自己记个笔记，哪里忘记了，回来再看一眼，也可以很快的回想起来
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
38
0- 0
已为社区贡献1条内容
所有评论(0)