文章目录

一、什么是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.js # 前端 # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign