VUE3 史上最强VUE总结来了

不知名的前端专家

已于 2022-02-25 09:44:44 修改

阅读量468

点赞数 2

文章标签： vue.js javascript 前端

于 2022-02-24 21:35:17 首次发布

本文链接：https://blog.csdn.net/start1018/article/details/123121132

版权

什么是VUE

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VUE.js的安装

先创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="js/vue.js"></script>

基础语法

// vue的双向绑定原理及实现
<div id="app">
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>
    //引入vue.js
    <script src="js/vue.js"></script>
    <script>
    //实例化对象
        const app = Vue.createApp({
            data() {
                return { msg: "你好vue" }
            }
        })
        var vm = app.mount("#app");
        
    </script>

vue的双向绑定原理及实现

指令系统

v-bind
功能：绑定变量，可缩写成：

<div :id="text"></div>
<!-- 代码说明：将text变量绑定到id属性 -->

v-text
功能：绑定标签内显示内容

<div v-text="text">{{text}}</div>
<!-- 代码说明：指定了标签内的文字内容，相当于innerText -->

v-html
功能：以html形式渲染变量内容

<div v-html="html"></div>
<!-- 代码说明：将html变量以html的形式添加到标签内，相当于innerHTMl -->

v-show
功能：隐藏节点的显示

<div v-show="flase"></div>
<!-- 代码说明：相当于display：none，虽然不进行节点渲染，但是dom对象一直存在，适用于频繁切换的场景 -->

v-if
功能：隐藏节点的显示

<div v-if="true"></div>
<!-- 代码说明：相当于appendChild，removeChild，直接将dom对象添加或者删除，适用于不频繁切换的场景，与v-if配合使用的有，v-else，v-if-else -->

v-for
功能：循环产生同一个组件

<ul>
<li v-for="item in items" :key="item">{{item.name}}</li>
</ul>
<!-- 代码说明：items是一个数组或者对象，将其中每一项都渲染出一个li，值得注意的是每一个li都需要一个独一无二的key，这样才能保证每次重新渲染的时候，只会更改key产生变化的节点，减少了开销，而且不能使用数组的index作为key，因为数组每一项对应的index会产生变化。 -->

v-on
功能：为节点绑定事件，可简写成@

<div @click="open"></div>

实例

简易选项卡的实现

<!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">
    <script src="./js/vue.js"></script>
    <title>简易选项卡案例</title>
    <style>
        .active {
            background-color: brown;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <button @click="num=1" :class="num==1?'active':''">css</button>
            <button @click="num=2" :class="num==2?'active':''">js</button>
            <button @click="num=3" :class="num==3?'active':''">html</button>
        </p>
        <div v-if="num===1">css内容</div>
        <div v-if="num===2">js内容</div>
        <div v-if="num===3">html内容</div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
        }).mount("#app")
    </script>
</body>

</html>

简易选项卡的实现效果图

不知名的前端专家

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE3 史上最强VUE总结来了

什么是VUE Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。VUE.js的安装先创建一个 .html 文件，然后通过如下方式引入 Vue：<script src="js/vue.js"></script
复制链接

扫一扫