文章目录

  • 前言
  • 一、Vue简介
  • 二、Vue简单实例
  • 三、Vue-el挂载点
  • 1.el理解
  • 2.el使用
  • 四、Vue-data
  • 1.data理解
  • 五、v-text(文本)
  • 六、v-html(标签)
  • 七、v-bind(动态设置元素属性)
  • 八、v-on(事件)
  • 九、v-show(元素是否显示)
  • 十、v-if... v-else-if...v-else(条件渲染)
  • 十一、v-for(列表渲染)
  • 十二、v-model(表单输入绑定)
  • 十三、v-once(最终数据)
  • 今日推荐



前言

前端小白正在学习Vue,这也是每天的一个学习记录,有兴趣的同学可以随便看看


一、Vue简介

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

二、Vue简单实例

代码如下(示例):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>
</html>

执行:

vue3前端架构设计 基于vue前端框架_html

三、Vue-el挂载点

1.el理解

var vm = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })

刚开始接触Vue的小伙伴,可能会有疑问el代表什么,其实el是Element(元素)的缩写,我们可以把它比喻成css的选择器来进行使用。

2.el使用

这里推荐大家挂载id选择器,大家都知道id代表唯一的意思,这样挂载的元素能避免冲突。

四、Vue-data

1.data理解

大家在这里可以把data理解成一个函数,这个地方我也还在学习当中(欢迎大佬补充对于data的理解)。

五、v-text(文本)

在实例的时候,使用的是{{message}},这里呢,也可以直接将v-text定义在标签中,标签内部就会自动添加我们定义在v-text=“”中值的文本。

<div id="app">
        <h1 v-text="message"></h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_表单_02

六、v-html(标签)

这里v-html可以将内容里的标签进行插入

<div id="app">
        <div v-html="message">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "<h1>Hello Vue</h1>"
            }
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_vue.js_03

七、v-bind(动态设置元素属性)

在我们使用标签的时候,例如<img src=" " class=" "/>我们可以使用v-bind来动态设置元素的src,class的属性值,

<div id="app">
        <img v-bind:src="demo" alt="">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                demo: "https://www.baidu.com/img/flexible/logo/pc/result.png"
            },
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_vue.js_04


这里呢,我们还可以将v-bind:缩写成:

<div id="app">
        <img :src="demo" alt="">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                demo: "https://www.baidu.com/img/flexible/logo/pc/result.png"
            },
        })
    </script>

也是可以执行的:

vue3前端架构设计 基于vue前端框架_vue.js_04

八、v-on(事件)

在vue中我们需要绑定事件就可以使用v-on来进行事件绑定。

<div id="app">
        <button v-on:click="print">打印</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                print: function() {
                    alert("Hello Vue")
                }
            }
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_Vue_06


这里呢,我们还可以将v-on:缩写成@

<div id="app">
        <button @click="print">打印</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                print: function() {
                    alert("Hello Vue")
                }
            }
        })
    </script>

也是可以执行的:

vue3前端架构设计 基于vue前端框架_vue.js_07

九、v-show(元素是否显示)

在vue中我们要控制元素是否显示,可以使用v-show,其中的值为true就显示,为flase就不显示

<div id="app">
        <div style="width: 300px;height: 300px;background-color: blue;">
            <div v-show="isShow" style="width: 100px;height: 100px;background-color: red;"></div>
        </div>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false
            },

        })
    </script>

isShow: true时:

vue3前端架构设计 基于vue前端框架_html_08


isShow:false 时:

vue3前端架构设计 基于vue前端框架_vue.js_09

十、v-if… v-else-if…v-else(条件渲染)

条件渲染中的值是否为true决定是否显示该元素

<div id="app">
        <div style="width: 300px;height: 300px;background-color: blue;">
            <div v-if="isShow == 1" style="width: 100px;height: 100px;background-color: red;"></div>
            <div v-else-if="isShow == 2" style="width: 100px;height: 100px;background-color: green;"></div>
            <div v-else="isShow == 3" style="width: 100px;height: 100px;background-color: purple;"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: 1
            },
        })
    </script>

isShow == 1时:

vue3前端架构设计 基于vue前端框架_Vue_10


isShow == 2时:

vue3前端架构设计 基于vue前端框架_表单_11


isShow == 3时:

vue3前端架构设计 基于vue前端框架_vue.js_12

十一、v-for(列表渲染)

v-for=“item,index in items” items代表需要循环的元素,item循环每一项的变量,index表示循环每一项的下标

<div id="app">
        <ul>
            <li v-for="item,index in items">下标:{{index}}-名字:{{item.name}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: [{
                    name: "小明"
                }, {
                    name: "小红"
                }, {
                    name: "小李"
                }]
            },
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_Vue_13

十二、v-model(表单输入绑定)

v-model 指令在表单 input、textarea 及 select元素上创建双向数据绑定

<div id="app">
        <input type="text" v-model:value="message"> {{message}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "123"
            },
        })
    </script>

执行:

vue3前端架构设计 基于vue前端框架_Vue_14

十三、v-once(最终数据)

v-model 指令在表单 input、textarea 及 select元素上创建双向数据绑定

<div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
        <h2>{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            }
        })
    </script>

数据不会再改变:

vue3前端架构设计 基于vue前端框架_Vue_15


vue3前端架构设计 基于vue前端框架_vue3前端架构设计_16