Vue知识总结（上篇）

孜然不够燃

已于 2023-04-17 10:45:58 修改

阅读量91

点赞数

分类专栏： JavaWeb系列文章标签： vue.js

于 2023-04-16 20:14:51 首次发布

本文链接：https://blog.csdn.net/oyjc1277509975/article/details/130185448

版权

JavaWeb系列专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Hello Vue

vue是当下流行的前端框架，它的出现，免除了原生Javascript中的DOM操作，简化了书写。

在软件开发中，框架就是一套通用的、可重复利用、软件基础代码模型，可以看作是半成品的软件，类似我们生活中“毛坯房”的存在。

Vue属性介绍
属性名称作用
el 规定vue对象操作的区域（锁定组件块，锁定方式可以用#id名和.class名，但是不能直接使用标签名）
data 管理和存储vue的属性
methods 管理和存储vue的方法

废话不多说，上代码！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello_Vue</title>
</head>
<body>
    <div id="app">
        <h1>
            
            {{message}}
        </h1>
    </div>

    
    <script src="./vue.js"></script>
    <script>
        new Vue({
            // 后面的 "," 不可省略
            //el限制了Vue.js所起作用的范围
            el: "#app",
        //data代码块:所需要的显示内容和所要进行的操作
            data:{
                message:'hello vue!'
            }
        })
    </script>
</body>
</html>
注：插值表达式可以直接显示vue的属性，具体了解可看：vuejs之插值表达式_js插值表达式_RyleeLouth的博客-CSDN博客

代码运行结果展示图：

Vue属性介绍
属性名称	作用
el	规定vue对象操作的区域（锁定组件块，锁定方式可以用#id名和.class名，但是不能直接使用标签名）
data	管理和存储vue的属性
methods	管理和存储vue的方法

Vue的常用指令

vue指令就是在HTML的标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。

Vue的常用指令
指令作用

v-bind

(可以缩写成 ":")

为HTML标签绑定属性值，例：

<a v-bind:href="src"> 网址 </a>

v-model
在表单元素上创建的双向数据绑定（双向数据绑定指的是修改HTML界面内容，vue里面的内容也会被修改，反之亦然），例：

<input type="tel" v-model="tel_num">{{tel_num}}

v-on

(可以缩写成 "@")

为HTML标签绑定事件，例：

<input type="button" value="你点我啊" v-on:click="handle">

v-if 条件性的渲染某元素，判定true时渲染，否则不渲染
v-else-if
v-else
v-show 根据条件展示某元素，但其他元素依旧被渲染，只是展示状态为隐藏
v-for 列表渲染，遍历容器的元素或者对象的属性

Vue的常用指令
指令	作用
v-bind (可以缩写成 ":")	为HTML标签绑定属性值，例： <a v-bind:href="src"> 网址 </a>
v-model	在表单元素上创建的双向数据绑定（双向数据绑定指的是修改HTML界面内容，vue里面的内容也会被修改，反之亦然），例： <input type="tel" v-model="tel_num">{{tel_num}}
v-on (可以缩写成 "@")	为HTML标签绑定事件，例： <input type="button" value="你点我啊" v-on:click="handle">
v-if	条件性的渲染某元素，判定true时渲染，否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，但其他元素依旧被渲染，只是展示状态为隐藏
v-for	列表渲染，遍历容器的元素或者对象的属性

代码展示：（这里不再展示代码的运行的界面图了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <h1>{{message}}</h1>
        <!-- v-bind缩写了！！！ -->
        <a :href="src"> 网址 </a>
        <form action="get">
            <!-- v-modle -->
            <input type="tel" v-model="tel_num">{{tel_num}}
            <br><br>
            <!-- v-on缩写了！！！ -->
            <input type="button" value="你点我啊" @click="handle">
            <br><br>
        </form>
        <br><br>

        <!-- v-if v-else-if v-else -->
        <span v-if="age &gt; 18"> 你成年了 </span><br>
        <span v-else="age &lt; 18"> 你还未成年 </span>
        <br><br>

        <!-- v-show -->
        <span v-show="money &gt; 100">你可真是个小富婆</span><br>
        <span v-show="money &lt; 100">我觉得你需要去赚钱了</span>
        <br><br>

        <!-- v-for -->
        <table border="1px" cellspacing="0" v-for="(t, index) in info">
            <tr>
                <th>ordinal</th>
                <th>message</th>
                <th>src</th>
                <th>tel_num</th>
                <th>age</th>
                <th>money</th>
            </tr>
            <tr>
                <td>{{index+1}}</td>
                <td>{{t.message}}</td>
                <td>{{t.src}}</td>
                <td>{{t.tel_num}}</td>
                <td>{{t.age}}</td>
                <td>{{t.money}}</td>
            </tr>
        </table>

    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#div1",
            data:{
                message:"vue的常见指令展示",
                src:"https://www.baidu.com/",
                tel_num:"",
                age:20,
                money:50,
                info:[{
                    message:"vue的常见指令展示",
                    src:"https://www.baidu.com/",
                    tel_num:"11001200119",
                    age:20,
                    money:50,
                }],
            },
            methods: {
                handle:function(){
                    alert('你还真点啊！')
                },
            },
        })
    </script>
</body>
</html>

Vue的生命周期

生命周期就是指以对象从创建到销毁的整个过程。

Vue的生命周期分为8个阶段：每触发一个生命周期，会自动执行一个生命周期方法

状态（方法）阶段周期
beforeCreate 创建前
created 创建后
beforeMont 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroy 销毁后

状态（方法）	阶段周期
beforeCreate	创建前
created	创建后
beforeMont	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroy	销毁后

Vue生命周期流程图

挂载完成代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mountedDemo</title>
</head>
<body>
    <div id="app">
        <img src="../../Day02/DOM_Demo/img/on.gif" alt="">

    </div>
    

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",

            mounted() {
                alert("我挂载完成了！！！")
            },
        })
    </script>
</body>
</html>

代码运行结果展示：