前端小白的学习之路(Vue2 一)

吃清心的椰羊

已于 2024-04-09 20:34:03 修改

阅读量878

点赞数 18

文章标签：学习 vue.js vue

于 2024-04-08 23:06:40 首次发布

本文链接：https://blog.csdn.net/weixin_245249828/article/details/137519888

版权

提示：初学vue,vue2好上手一点，记录笔记：vue的概念,声明式编程与命令式编程的区别，vue的基本使用，模板语法，常用指令

一、什么是vue

Vue.js 是一款流行的 JavaScript 前端声明式编程范式的框架，用于构建交互式的 Web 用户界面。Vue 专注于通过简单的 API 提供高效的响应式数据绑定和组件化系统，使开发者可以更轻松地构建现代化的单页面应用（SPA）和动态网页。

Vue 具有以下特点和优势：

响应式数据绑定：Vue 使用双向数据绑定机制，当数据发生变化时，视图会自动更新。这使得开发者无需手动操作 DOM，提高了开发效率。
组件化开发：Vue 支持组件化开发，可以将页面拆分成多个独立、可复用的组件。每个组件可以拥有自己的状态和逻辑，使得项目结构更清晰、可维护性更高。
简洁明了的 API：Vue 提供了简单清晰的 API，易于学习和使用。它的核心库只关注视图层，更容易集成到现有项目中。
灵活性：Vue 提供了丰富的功能和选项，可以满足不同项目的需求。开发者可以选择使用 Vue Router 进行路由管理、Vuex 进行状态管理，或者与其它第三方库和工具结合使用。
高性能：Vue 的设计追求高效性能，通过虚拟 DOM 和异步更新等机制，尽可能减少对真实 DOM 的操作，从而提高页面渲染效率。
社区支持和生态系统：Vue 拥有庞大的社区和活跃的开发者社区，有大量的插件、工具和文档可供开发者使用和参考。
Vue2文档地址：https://v2.cn.vuejs.org/v2/guide/installation.html

二、声明式编程与命令式编程

1.命令式编程

在命令式编程中，你会告诉计算机要如何执行任务，每一步的操作都需要明确指定。
开发者需要关注实现的细节，手动管理每一个操作，包括控制流程、状态变化和数据操作。
原生的JS编码方式就是命令式编程。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开关灯</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head>

<body>

    <div class="container  my_container" style="background-color: white;height: 900px; overflow: hidden;">
        <button class="btn btn-success mt-5 my_button ">点击开关</button>
    </div>



    <script>
        // 点击按钮改变页面背景色
        // 三步走
        // 1) 获取标签
        const my_button = document.querySelector(".my_button");
        const my_container = document.querySelector(".my_container");

        // 定义布尔值
        let isShow = true;

        // 2）事件绑定
        my_button.onclick = () => {
            // 3) 交互逻辑
            if(isShow){
                my_container.style.backgroundColor="red";
            }
            else {
                my_container.style.backgroundColor="white";
            }
            // 控制布尔值
            isShow = !isShow;
        }
    </script>
</body>

</html>

2.声明式编程

在声明式编程中，你只需要描述问题是什么，而不需要详细说明如何解决问题。
开发者更多地关注问题的抽象描述，以及数据之间的关系，而不是具体的操作步骤。
vue就是声明式编程框架

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开关灯</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head>

<body>

    <!-- 写法1 -->
    <!-- <div id="app" 
        class="container  my_container" 
        v-bind:style="`background-color: ${isShow == true ? 'white': 'red'};height: 900px; overflow: hidden;`">
        <button class="btn btn-success mt-5 my_button "
        v-on:click="isShow=!isShow">点击开关</button>
    </div> -->


    <!-- 写法2： 模板-->
    <div id="app" class="container  my_container"
        v-bind:style="`background-color: ${color};height: 900px; overflow: hidden;`">
        <button class="btn btn-success mt-5 my_button " v-on:click="addEvent">点击开关</button>
    </div>

    <!-- 1)  -->
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>
        // 点击按钮改变页面背景色
        // 写法1:
        // new Vue({
        //     el: "#app",
        //     data: {
        //         isShow: true
        //     },
        // })


        // 写法2：
        // 创建vue实例
        new Vue({
            // 挂载容器
            el: "#app",
            // 数据
            data: {
                color: "white",
                isShow: true
            },
            // 方法
            methods: {
                // 自定义方法
                addEvent(){
                    if(this.isShow){
                        this.color = "red"
                    }
                    else {
                        this.color = "white";
                    }
                    // 开关灯
                    this.isShow = !this.isShow;
                }
            }
        })

    </script>
</body>

</html>

三、vue的基本使用

1.引入vue.js

官网地址：https://cn.vuejs.org/

vue2下载地址：https://v2.cn.vuejs.org/v2/guide/installation.html

    <script src="./libs/vue@2.7.16/vue.js"></script>

2.设置挂载容器

<div id="app" v-cloak>

</div>

v-cloak:v-cloak 是 Vue.js 提供的一个指令，用于解决在 Vue 应用中初次加载时出现的闪烁问题。

在使用vue做原生项目（没有利用webpack或者脚手架构建的项目）防止出现抖动。

3.创建Vue实例设置挂载点

const vm = new Vue({
     // 设置挂载点
     el: "#app",
     // 添加数据(属性)
     data: {
        return{
    
        }
     }，
    //添加方法(函数)
    methods:{

    }

})

四、模板语法

Vue.js 的模板语法是一种简单直观的语法，用于将数据绑定到 HTML 中，实现动态的视图渲染。

文本插值：使用双大括号 {{ }} 将数据插入到 HTML 中，并填写js代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>
    <!-- 插值表达式 {{ js代码 }} -->
    <div id="app" v-cloak>
        <h2>{{123}}</h2>
        <!-- 报错 直接填写abc, 既不是字符串，也不是变量 -->
        <!-- <h2>{{abc}}</h2> -->
        <h2>{{'abc'}}</h2>
        <!-- 可以书写三元运算 -->
        <h2>{{typeof 'abc' === 'string' ? '字符串类型':'其他类型'}}</h2>
        <!-- 可以填写变量 -->
        <h2>{{title}}</h2>
      

    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>
        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            // 添加属性
            data: {
                title: "标题2222"
            }
        })
    </script>
</body>
</html>

五、常用指令

1.v-text

设置文本

<h2 v-text="title"></h2>

2.v-html

设置超文本

<h2 v-html="title"></h2>

3.v-bind

动态绑定属性

v-bind:属性名="变量|js表达式"

简写 ：(直接冒号)

:属性名="变量|js表达式"

<div v-bind:class="isShow==true?'xxx':'yyy'">123123</div>
<!-- 填写变量(类名有多个) -->
<div v-bind:class="['box', {red: true}]"></div>
<!-- 填写变量(类名只有一个) -->
<div v-bind:class="aaa"></div>
<!-- 简写 -->
<div :class="bbb"></div>
<!-- style也是标签属性，能做成动态属性 -->

<!-- 因为在style属性前添加了“:”就变成了动态属性，动态属性识别的是js代码。 -->
<div :style="`width: 100px;height: 100px;background-color: yellowgreen;`"></div>
<div :style="`width: 100px;height: 100px;background-color: ${bgColor};`"></div>

4：v-model

数据双向绑定(一般用于表单元素，绑定双方有一方数据更改另一边也会改变数据)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container p-5">
            <input v-model="user.name" type="text" class="form-control" placeholder="请输入姓名"> <br>
            <input v-model="user.age" type="text" class="form-control" placeholder="请输入年龄"> <br>
            <input v-model="user.addr" type="text" class="form-control" placeholder="请输入地址"> <br>

            <!-- v-model="keyword" 双向绑定 -->
            <input v-model="keyword" type="text" class="form-control" placeholder="请输入关键字">
            <h3>{{keyword}}</h3>

            <input style="width: 40px;height: 40px;" type="checkbox" v-model="opt">
            <p>{{opt}}</p>


        </div>

    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>
        // v-model 通常应用在表单收集信息的地方。

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            // 数据
            data: {
                keyword: "",
                opt: "",
                user: {
                    age: 20,
                    addr: "广州",
                    name: "姓名"
                }
            }

        })
    </script>
</body>
</html>

5.v-if 与 v-else

v-if:接受一个布尔值，true时显示元素，false移除元素

v-else:必须跟在一个v-if后面，跟v-if的功能正好相反，不接收参数

<div v-if="true">Visible</div>
<div v-else>Not Visible</div>

6.v-show

v-show:接受一个布尔值，true时显示元素，false隐藏元素

<div v-show="true">Visible</div>

v-if与v-show的区别：

渲染方式：
- v-show 控制的元素始终被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制其显示与隐藏。即使在初始渲染时，v-show 的元素也会被渲染到页面中，只是根据条件隐藏。
- v-if 控制的元素在条件为真时才会被渲染到 DOM 中，当条件为假时，元素不会被渲染到页面中。
性能开销：
- 在初始渲染时，如果条件为假，v-show 会产生一些性能开销，因为即使元素不可见，它仍然被渲染到 DOM 中。但是，后续的切换显示状态不会有额外的性能开销。
- v-if 在初始渲染时，如果条件为假，元素不会被渲染到 DOM 中，因此可以减少一些性能开销。但是，在切换显示状态时，会涉及到销毁和重新创建元素，可能会有一些性能开销。
适用场景：
- 当需要频繁切换显示状态时，例如在 Tab 切换、动画效果等场景下，使用 v-show 更合适，因为它不会涉及销毁和重新创建元素，性能更好。
- 当元素的显示与隐藏不频繁变化，并且在初始渲染时条件可能为假时，可以考虑使用 v-if，因为它可以减少初始渲染时的性能开销。

7.v-for

列表渲染,用于在模板中进行循环渲染数组或对象的内容，生成重复的 HTML 元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="app">

        <!-- 指令: v-for 指令，循环数组。item:当前循环的元素，index:当前元素的下标-->
        <div class="box" v-for="(item,index) in arr" 
        :style="`background-color:${item};`">
            {{index}} --》{{item}}
        </div>

        <!-- 表格 -->
        <table class="table table-bordered">
             <thead>
                 <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>ID</th>
                 </tr>
             </thead>
             <tbody>
                <!-- 循环result数组 -->
                <!-- v-bind:key="每一项数据的ID(字符串|数字)" 优化列表渲染！！！ -->
                <tr v-for="(opt,i) in result" v-bind:key="opt.id">
                    <td>{{i + 1}}</td>
                    <td>{{opt.name}}</td>
                    <td>{{opt.id}}</td>
                </tr>
             </tbody>

        </table>
    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            // 数据
            data: {
                // 数组
                arr: ['red','green','blue'],
                // 数组2
                result:[
                    {name: "张三", id:11},
                    {name: "李四", id:22},
                    {name: "赵五", id:33},
                    {name: "孙六", id:44},
                ]
            }


        })
    </script>
</body>
</html>

8.v-on

用于事件绑定，如点击事件，键盘事件等

<button v-on:click="handleClick">Click me</button>

简写：@事件

<button @click="handleClick">Click me</button>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 绑定事件 -->
            <!-- 
                v-on:click="foo1" 事件绑定 
                v-on:事件类型="方法名称"
            -->
            <button class="btn btn-success" v-on:click="foo1">点击事件1</button>
            <button class="btn btn-danger" v-on:mouseenter="foo2">鼠标移入事件</button>

            <!-- 简写: @ 
                @click="foo1"
                @事件类型="方法名称"
            -->
            <button class="btn btn-primary" @click="foo1">点击事件2</button>
        </div>

    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        const vm = new Vue({
            //挂载容器
            el: "#app",
            // 方法
            methods: {
                // 方法名称
                foo1() {
                    alert("点击按钮,触发事件，执行方法！");
                },
                foo2() {
                    alert("鼠标移入按钮，触发事件，执行方法！");
                }
            }

        })
        // 观察vue实例
        // console.log(vm);
    </script>
</body>

</html>