weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

Vue入门——初步了解

作者：weixin_40725706 | 2024-03-17 22:53:24

踩

vue入门

Vue快速入门

一、Vue是什么？
二、 Vue2和Vue3的区别
三、Vue入门

一、Vue是什么？

Vue（或Vue.js）是一款流行的开源JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。它由尤雨溪于2014年创建并开源。Vue具有轻量级、高效、灵活和易于学习等特点，因此在Web开发中越来越受欢迎。Vue的核心思想是数据驱动，即实时响应数据更新，根据数据动态渲染DOM。Vue采用了组件化的方式来组织代码，使得组件可以互相独立、可复用和可组合，大大提高了开发效率。同时，Vue也具有丰富的插件和生态系统，可以满足各种开发需求。

二、 Vue2和Vue3的区别

Vue 3是Vue 2的升级版，主要有以下几个方面的改进：

性能优化：Vue 3通过模板编译器的升级和优化，大大提高了渲染性能；
更小的包体积：Vue 3的体积比Vue 2小很多；
Composition API：Vue 3新增了Composition API，使得代码更加组织化和可复用；
更好的TypeScript支持：Vue 3对TypeScript的支持更加友好，支持TypeScript编写Vue组件；
更好的Tree Shaking支持：Vue 3通过ES modules使得Tree Shaking更加友好；
更好的错误处理：Vue 3对错误处理进行了优化，更容易捕获和调试错误。

总之，Vue 3相比Vue 2在性能、包体积、代码组织、TypeScript支持、Tree Shaking支持和错误处理等方面都有了不同程度的改进和优化。

三、Vue入门

以下以Vue2为例

1.引入库

	<!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1
2

2.实例

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
·无需构建步骤，渐进式增强静态的 HTML
·在任何页面中作为 Web Components 嵌入
·单页应用 (SPA)
·全栈 / 服务端渲染 (SSR)
·Jamstack / 静态站点生成 (SSG)
·开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2.1 数据组成的网页

Vue的主旨就是让网页有数据组成，举个简单案例

<body>
    {{message}}
    <div id="app">
        {{message}}
        <br>
        <span>{{book}};name:{{book.bookName}}</span>
        <ul>
            <li>
                {{campus}}
            </li>
            <li>
                {{campus[0]}}
            </li>
        </ul>
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello vue!",
                book: {
                    bookId: 1,
                    bookName: "《初生》"
                },
                campus: ["1", "2", 3]
            }
        })
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.2 Vue常用指令

Vue官方提供了一些指令，这里举例一些常用的。

2.2.1 v-text和v-html

v-text可以将元素的 textContent 更新为指定的表达式的值。与使用双括号语法 {{ expression }} 一样，v-text 也可以用于显示动态内容。
v-html，用于将数据渲染为 HTML，并插入到 DOM 中。在 Vue 应用中，通常情况下我们使用 {{}} 或 v-bind 将数据渲染到 DOM 中，但是如果数据中包含 HTML 标签，这些标签会以字符串的形式展示在页面上，而不是以 HTML 的形式渲染。使用 v-html 指令可以解决这个问题，它会将绑定的数据作为 HTML 插入到 DOM 中，从而正确地渲染 HTML。
区别 :

v-text 和 v-html 都是 Vue 中常用的指令，用于绑定文本内容。它们之间的主要区别在于，v-text 会将元素的 textContent 设置为绑定的值，而 v-html 则会将元素的 innerHTML 设置为绑定的值。

具体来说，使用 v-text 指令绑定的内容，会被自动转义，不会被解析为 HTML 标签。而使用 v-html 指令绑定的内容，可以包含 HTML 标签和 JavaScript 代码，并会被解析和渲染。

因此，v-html 指令应该谨慎使用，因为它可能导致 XSS 攻击。在绑定内容时，应该优先考虑使用 v-text 指令，只有在确实需要渲染 HTML 标签时才使用 v-html 指令。

<body>

    <div id="app">
        <h2 v-html="message"></h2>
        <h2 v-text="message+'!'"></h2>
        <h2>{{message}}!</h2>
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
               message:"<h1>ysd</h1>"
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2.2 v-on

v-on用来绑定事件监听器的一个指令，它可以监听 DOM 事件，如 click、input、submit 等。v-on 指令后面跟着一个事件名，用于监听特定的事件。当监听到事件时，可以执行特定的 Vue 方法或 JavaScript 函数。
v-on 还可以简写为 @，例如 @click、@input、@submit 等，这样可以缩短模板代码。

<body>

    <div id="app">
        <input type="button" value="getName1" v-on:click="getName">
        <input type="button" value="getName2" @click="getName">
        <!-- 特殊事件 -->
        <input type="text" @keyup.enter="getName">
        <h2 @click="changName">{{name}}</h2>
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "who am i?"
            },
            methods: {
                getName: function () {
                    alert("ysd");
                },
                changName: function () {
                    this.name += "ysd";
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.2.3 v-if、v-bind和v-show

v-if 用于根据条件来渲染页面内容。它接受一个表达式作为参数，当表达式的值为 true 时，渲染对应的内容，否则不渲染。使用 v-if 的元素在条件不满足时将被从 DOM 树中移除，当条件再次满足时，元素将重新插入 DOM 树中。

v-bind 用于绑定 HTML 属性或组件的 props 到 Vue 实例中的数据。在绑定时需要加上冒号（:），如 :href=“url”。这个指令主要用于实现动态渲染，让 Vue 实例中的数据和 HTML 属性或组件的 props 进行双向绑定。

v-show 是 Vue.js 提供的一个指令，用于控制元素的显示和隐藏。它与 v-if 的作用类似，但是不同的是，无论条件是否成立，使用 v-show 指令的元素都会被渲染到页面中，只是通过控制元素的 display 属性来实现显示和隐藏。

<body>

    <div id="app">
        <!-- v-show,切换元素display -->
        <!-- v-bind:属性="值" -->
        <img v-show="isShow" v-bind:src="imgSrc" :class="" style="width: 180px;height:240px">
        <input type="button" @click="changeIsShow" value="changeISShow"></input>
        <img v-show="1>10" src="img/moon.jpg">
        <!-- 修改dom，即删除或添加 -->
        <!-- v-if：判断，通过控制dom节点的存在与否来控制元素的显隐 -->
        <img v-if="isShow" src="img/moon.jpg" :title="imgTitle+'!'" style="width: 180px;height:240px">
        <img v-if="1>10" src="img/moon.jpg">
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                imgSrc:"img/moon.jpg",
                imgTitle:"moon"
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.2.4 v-for

v-for 用于渲染列表数据的指令。它可以遍历数组、对象、字符串等可迭代的数据，并基于数据生成相应的 DOM 元素。在渲染列表时，可以使用 v-for 通过循环绑定数据并动态生成相应的 DOM 元素。

 
<body>

    <div id="app">
        <ul>
            <li v-for="value in arr">
                <h3>id:{{value.id}}</h3>
                <h3>name:{{value.name}}</h3>
            </li>
            <ul>
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    arr: [
                        { id: 1, name: '小明' },
                        { id: 2, name: '小红' },
                        { id: 3, name: '小绿' },
                    ]
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.2.5 v-model

v-model用于双向数据绑定。v-model可以将表单控件与Vue实例中的数据属性绑定在一起，当表单控件的值发生改变时，绑定的数据属性也会同步更新，反之亦然。v-model适用于文本输入框、单选按钮、多选按钮、下拉选择框等表单控件。

<body>

    <div id="app">
        <input type="button" @click="sayHello('ysd')" value="click">
        //@keyup = 键盘输入 ； @keyup.enter = 输入回车键
        //v-model = html数据与js数据同步更新
        <input type="text" v-model="massage" @keyup.enter="sayHello(getM())">
    </div>

    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                massage: 'ysd'
            },
            methods: {
                sayHello: function (x) {
                    alert("hello " + x);
                },
                getM:function(){
                    return this.massage;
                }
            }
        })

    </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32