当前位置：首页>前端>正文

Vue前端开发入门

前端2024-05-23 18:57:33

文章目录

一、认识Vue.js

Vue.js介绍
引入Vue.js

hello world示例

声明式渲染

二、Vue 常用指令

v-text
v-html
v-on
v-bind

绑定超链接
绑定Class
绑定style

指令缩写

三、Vue 常用属性

数据属性
方法
计算属性
监听属性

四、Vue常用指令之流程控制

v-if
v-else-fi多分支
v-show（`推荐`）
v-for

遍历数组
遍历字典
维护状态
选择列表案例:获取用户选择并赋值另一个变量再实时展示

五、v-model:双向数据绑定

表单输入
单选
多选框
登录案例：获取用户输入的用户名和密码

六、实例生命周期钩子
参考

一、认识Vue.js

Vue.js介绍

Vue.js（简称Vue）是一套用于构建用户界面的渐进式前端框架。

Vue.js 核心实现：
• 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。

• 可组合的视图组件：把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。

官网：https://v3.cn.vuejs.org

引入Vue.js

使用Vue的四种方式：
• 在HTML中以CDN包的形式导入
• 下载JS文件保存到本地再导入
• 使用npm安装
• 使用官方VueCli脚手架构建项目（不建议新手直接用）

参考文档：https://v3.cn.vuejs.org/guide/installation.html

hello world示例

创建一个空目录，并用pycharm打开

Vue前端开发入门,Vue前端开发入门_Vue,第1张

创建一个html文件

Vue前端开发入门,Vue前端开发入门_前端_02,第2张

Vue前端开发入门,Vue前端开发入门_vue.js_03,第3张

代码内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="hello">
        {{ message }}   <!--引用变量-->
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    message: 'hello world',     // 定义变量
                }
            }
        }
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>
</html>

显示效果

Vue前端开发入门,Vue前端开发入门_前端_04,第4张

注意：如果不能正常显示变量的值，console控制输出Vue is not defined的话，需要科学上网才行，因为https://unpkg.com/vue@3/dist/vue.global.js是国外地址

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

实现计时器功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="counter">
        Counter: {{ counter }}
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    counter: 0,     // 定义变量
                }
            },
            mounted() {
                setInterval(() => {
                    this.counter++
                },1000)     // 单位是ms
            }
        };
        Vue.createApp(HelloApp).mount('#counter') // 创建vue示例和绑定元素
    </script>
</body>
</html>

Vue前端开发入门,Vue前端开发入门_前端_05,第5张

二、Vue 常用指令

Vue前端开发入门,Vue前端开发入门_Vue_06,第6张

指令：带有 v- 前缀的特殊属性。

指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

v-text作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题！

Vue前端开发入门,Vue前端开发入门_javascript_07,第7张

v-html

某些情况下，从服务端请求的数据本身就是一个HTML代码，如果用双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令

<body>
    <div id="hello">
        <p v-html="message"p></p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    // message: 'hello world',     // 定义变量
                    message: "<span style='color: red'>Hello Vue!!</span>"
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

v-on

在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。
在Vue中如何监听事件呢？使用v-on指令

<body>
    <div id="hello">
        <p>点击次数：{{ counter }}</p>
        <button type="button" v-on:click="counter++">按钮</button>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    counter: 0,
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

v-on: 冒号后面是event参数，例如click、change

v-bind

v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递props值（这个后面再介绍）

应用场景：图片地址src、超链接href、动态绑定一些类、样式等等

绑定超链接

示例：响应式地更新 HTML 属性

<body>
    <div id="hello">
        <a v-bind:href="url">百度首页</a>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    url: "http://www.baidu.com",
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

• v-bind 指令后接收一个参数，以冒号分割。
• v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

绑定Class

例如希望动态切换class，为div显示不同背景颜色。
效果：点击按钮，切换不同的背景色

<body>
    <div id="hello">
        <div v-bind:class="{active: isActive}" class="test"></div>
        <button type="button" @click="addStyle">增加样式</button>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    isActive: false,
                }
            },
            methods: {
                addStyle() {
                    // 实现动态切换
                    if(this.isActive) {
                        this.isActive = false;
                    } else {
                        this.isActive = true;
                    }
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

绑定style

v-bind:style 的对象语法看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

<body>
    <div id="hello">
        <div v-bind:style="styleObject" class="test">
            Hello World!
        </div>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    styleObject: {
                        background: 'orange',
                        fontSize: 28
                    }
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

指令缩写

Vue前端开发入门,Vue前端开发入门_前端_08,第8张

三、Vue 常用属性

数据属性

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来

Vue前端开发入门,Vue前端开发入门_前端_09,第9张

方法

方法（methods）：处理数据的函数。在methods选项中定义的函数称为方法。

示例：添加方法及调用

Vue前端开发入门,Vue前端开发入门_前端_10,第10张

在methods选项中定义的方法与data选项中的数据一样，可以在组件的模板中使用。

在模板中，它们通常被当做事件监听使用

Vue前端开发入门,Vue前端开发入门_Vue_11,第11张

计算属性

使用computed：

<body>
    <div id="hello">
        <span>总分：{{ sum }}</span>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    math: 80,
                    english: 90
                }
            },
            computed: {
                sum: function () {
                    return this.math + this.english
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

小结：计算属性一般用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。
而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用methods的原因！

监听属性

是一个观察动作，监听data数据变化后触发对应函数，函数有newValue（变化之后结果）和oldValue（变化之前结果）两个参数。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Vue前端开发入门,Vue前端开发入门_html_12,第12张

四、Vue常用指令之流程控制

v-if

通过boolean的值来控制显示的内容

<body>
    <div id="hello">
        <p v-if="boolean">显示</p>
        <p v-else>不显示</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    boolean: false
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

v-if指令必须将它添加到一个元素上，如果想控制多个元素该怎么操作呢？

可以将要控制的元素放到<template>里面，并在上面使用v-if。最终的渲染结果将不包含<template>元素。

<body>
    <div id="hello">
        <template v-if="boolean"
            <h1>标题</h1>
            <p>第一个段落</p>
        </template>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    boolean: false
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

v-else-fi多分支

Vue前端开发入门,Vue前端开发入门_Vue_13,第13张

v-show（`推荐`）

另一个用于条件性展示元素的指令，与v-if不同的是，v-show的元素始终会被渲染并保留再DOM中，所以v-show只是简单地切换元素的display CSS属性

使用v-if，值为false，F12查看，元素未保留

Vue前端开发入门,Vue前端开发入门_前端_14,第14张

使用v-show，值为false，F12查看元素，元素保留，display的值为none

Vue前端开发入门,Vue前端开发入门_html_15,第15张

v-for

可以用 v-for 指令基于一个数组来渲染一个列表。
需要使用 item in items 形式，其中 items 是数组名，而 item 则是数组元素的别名。

遍历数组

<body>
    <div id="hello">
        <ul>
            <li v-for="(value, index) in hostArray">
                {{ index }} - {{ value }}
            </li>
        </ul>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    hostArray: [
                        '192.168.1.2',
                        '192.168.1.3',
                        '192.168.1.4'
                    ]
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_javascript_16,第16张

遍历字典

<body>
    <div id="hello">
        <ul>
            <li v-for="(v, k) in hostObject" :key="k">
                {{ k }} - {{ v }}
            </li>
        </ul>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    hostObject: {
                        'db': '192.168.1.2',
                        'jenkins': '192.168.1.3',
                        'nginx': '192.168.1.4'
                    }
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_Vue_17,第17张

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个
元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你
需要为每项提供一个唯一的 key 属性：

选择列表案例:获取用户选择并赋值另一个变量再实时展示

<body>
    <div id="hello">
        <select @change="selectHost($event)">   <!-- $event可以获取事件的值-->
            <option value="None">未选择</option>
            <option v-for="host in hostArray" :value="host.id" :key="host.id">
                {{ host.name }}
            </option>
        </select>
        <p>当前选择的主机ID：{{ selectHostId }}</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    hostArray: [
                        {'id':1, 'name': '主机1'},
                        {'id':2, 'name': '主机2'},
                        {'id':3, 'name': '主机3'},
                    ],
                    selectHostId: '',
                }
            },
            methods: {
                selectHost(event) {
                    console.log(event)  // 打印事件的值
                    this.selectHostId = event.target.value
                    if (this.selectHostId == "None") {
                        this.selectHostId = "未选择"
                    }
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_前端_18,第18张

五、v-model:双向数据绑定

Vue是数据驱动的，数据驱动有一个精髓之处是数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

表单输入

v-model指令提供表单输入绑定，可以在 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

<body>
    <div id="hello">
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    msg: 'Hello World!',
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

输入框输入的内容同步在下面显示

Vue前端开发入门,Vue前端开发入门_html_19,第19张

v-model指令其实是一个语法糖，背后本质上包含v-bind和v-on两个操作

单选

<body>
    <div id="hello">
        <input type="radio" name="go" value="Go" v-model="msg">GO <br>
        <input type="radio" name="vue" value="Vue" v-model="msg">Vue <br>
        <p>当前选择：{{ msg }}</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    msg: '',
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_javascript_20,第20张

多选框

<body>
    <div id="hello">
        <select multiple v-model="selected">
            <option value="python">python</option>
            <option value="java">java</option>
            <option value="html">html</option>
        </select>
        <p>当前选择：{{ selected }}</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    selected: '',
                }
            },
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_Vue_21,第21张

登录案例：获取用户输入的用户名和密码

<body>
    <div id="hello">
        <h1>运维管理后台</h1>
        用户名: <input type="text" v-model="form.username"> <br>
        密码: <input type="text" v-model="form.password"> <br>
        <button @click="loginBtn">登录</button>
        <p style="color: red" v-if="notice">用户名或者密码不能为空!</p>
    </div>
    <script>
        const HelloApp = {
            data() {
                return {
                    form: {
                        username: '',
                        password: ''
                    },
                    notice: false
                }
            },
            methods: {
                loginBtn() {
                    if (this.form.username == '' || this.form.password == '') {
                        this.notice = true
                    } else {
                        this.notice = false
                        console.log(this.form)
                    }
                }
            }
        };
        Vue.createApp(HelloApp).mount('#hello') // 创建vue示例和绑定元素
    </script>
</body>

Vue前端开发入门,Vue前端开发入门_vue.js_22,第22张

六、实例生命周期钩子

生命周期是指Vue实例从创建到销毁的过程。就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等⼀系列过程，在vue⽣命周期中提供了⼀系列的⽣命周期函数，如图所⽰

Vue前端开发入门,Vue前端开发入门_前端_23,第23张

Vue前端开发入门,Vue前端开发入门_html_24,第24张

查看全文

https://www.xamrdz.com/web/2sb1961692.html