前端Vue 基础学习1

🕗 发布于 2024-09-27 05:59 前端 vue.js 学习

01-Vue的介绍和vue-cli

- Model：负责数据存储
- View：负责页面展示
- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
- [中文官网](https://cn.vuejs.org/)
- [vuejs官方论坛](https://forum.vuejs.org/)
- GitHub地址：<https://github.com/vuejs/vue>
- Vue1.0 在线文档：<http://v1-cn.vuejs.org/guide/>
- Vue2.x 在线文档：<https://cn.vuejs.org/v2/guide/>
- Vue1下载地址：<http://v1-cn.vuejs.org/js/vue.js>
- Vue2下载地址：<https://cdn.jsdelivr.net/npm/vue/>
### 常见的插件
- Webpack：代码模块化构建打包工具。
- Gulp：基于流的自动化构建工具。
- Babel：使用最新的规范来编写 js。
- Vue：构建数据驱动的Web界面的渐进式框架
- Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
以上这些包，都可以通过 NPM 这个包管理工具来安装。
### 引用 Vue.js 文件

1.CDN的方式进行引用

/*****html****/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>


</body>
</html>
```

2、方式二：（下载 vue.js 文件）

去网站 <https://cdn.jsdelivr.net/npm/vue/> 下载 vue.js 文件，直接放到工程文件里，然后引用。

3、方式三：（NPM的方式安装vue）

02 Vue的系统指令

Vue初体验

新建一个空的项目，引入`vue.js`文件。写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    // 2、创建一个Vue的实例
    //new出来的对象就是MVVM中的 View Module（调度者）
    var myVue = new Vue({
        el: '#div1', //当前vue对象将接管上面的div1区域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>

Vue的各种系统指令：

插值表达式 {{}}

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。

<span>Message: {{ msg }}</span>
//Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值；
//无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。

`{{}}`对JavaScript 表达式支持，例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ name == 'smyhvae' ? 'true' : 'false' }}

{{ message.split('').reverse().join('') }}

有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：

```html
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
```


代码举例：

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

<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>Document</title>
</head>

<body>
    <div id="app">
        <span>content:{{name}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'smyhvae'
            }
        })
    </script>

</body>
</html>

v-cloak

`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。

v-cloak指令和CSS 规则一起用的时候，能够**解决插值表达式闪烁的问题**（即：可以隐藏未编译的标签直到实例准备完毕）。

就拿上一段代码来举例，比如说，`{{name}}`这个内容，在网速很慢的情况下，一开始会直接显示`{{name}}`这个内容，等网络加载完成了，才会显示`smyhvae`。
解决办法是：通过`v-cloak`隐藏`{{name}}`这个内容，当加载完毕后，再显示出来。


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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    /*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
    直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 1、给 span 标签添加 v-cloak 属性 -->
    <span v-cloak>{{name}}</span>

  </div>
</body>

<script src="vue2.5.16.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      name: 'smyhvae'
    }
  });
</script>

</html>

```

v-text

v-text可以将一个变量的值渲染到指定的元素中。例如：

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <div id="div1">
    <span v-text="name"></span>
  </div>
</body>

<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello smyhvae'
    }
  });
</script>

</html>

v-html

`v-text`是纯文本，而`v-html`会被解析成html元素。

注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本）攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。

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

<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>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

    </div>
    <script src="vue2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '<h1>我是一个大大的h1标题</h1>'
            }
        })
    </script>

</body>

</html>

v-bind

v-bind：属性绑定机制 `v-bind`：用于绑定**属性**。

```html
    <img v-bind:src="imageSrc +'smyhvaeString'">

    <div v-bind:style="{ fontSize: size + 'px' }"></div>
```

上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是表达式，属性值里的`imageSrc`和`size`是Vue实例里面的变量。
上面两行代码也可以简写成：

```html
    <img :src="imageSrc">

    <div :style="{ fontSize: size + 'px' }"></div>
```

示例：

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>

<body>
  <div id="div1">
    <!-- value里的值只是简单的字符串 -->
    <input type="text" value="name">
    <!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
    <input type="text" v-bind:value="name">
    <!-- 超链接后面的path是 Vue 里面的变量 -->
    <a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'smyhvae',
      path: `2.html`
    }
  });
</script>

</html>

v-on

v-on：事件绑定机制

v-on:click`：点击事件

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <!--这个div区域就是MVVM中的 View-->
  <div id="div1">
    <!-- 给button节点绑定按钮的点击事件 -->
    {{name}}
    <button v-on:click="change">改变name的值</button>
  </div>


</body>

<script>
  //new出来的对象就是MVVM中的 View Module
  var myVue = new Vue({
    el: '#div1', //当前vue对象将接管上面的div区域
    data: { //data就是MVVM中的 module
      name: 'smyhvae'
    },

    //注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
    //这个 methods 属性中定义了当前Vue实例所有可用的方法
    methods: {
      change: function() { //上面的button按钮的点击事件
        this.name += '1';
      }
    }
  });
</script>

</html>

上方代码中，给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。

v-on`的简写形式

```html
    <button v-on:click="change">改变name的值</button>
```

可以简写成：

```html
    <button @click="change">改变name的值</button>

v-on的常用事件
v-on 提供了click 事件，也提供了一些其他的事件。
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mousedown
- v-on:mouseover
- v-on:submit
- ....
举例：文字滚动显示（跑马灯效果）

。要实现的效果是：类似于LED屏幕上，滚动显示的文字。

**文字滚动显示的思路**：
（1）每次点击按钮后，拿到 msg 字符串，然后调用字符串的`substring`来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。这就实现了滚动的效果。
（2）为了实现文字**自动连续滚动**的效果，需要把步骤（1）中点击按钮的操作，放到**定时器**中去。
**步骤 1**：每次点击按钮，字符串就滚动一次。代码如下：

```javascript
    startMethod: function () {
        // 获取 msg 的第一个字符
        var start = this.msg.substring(0, 1);
        // 获取 后面的所有字符
        var end = this.msg.substring(1);
        // 重新拼接得到新的字符串，并赋值给 this.msg
        this.msg = end + start;
    }
```
**步骤2**：给上面的操作添加定时器。代码如下：

```javascript
    startMethod: function () {
        //添加定时器：点击按钮后，让字符串连续滚动
        setInterval(() => {
            // 获取 msg 的第一个字符
            var start = this.msg.substring(0, 1);
            // 获取 后面的所有字符
            var end = this.msg.substring(1);
            // 重新拼接得到新的字符串，并赋值给 this.msg
            // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
            this.msg = end + start;
            console.log(_this.msg);
        }, 400);
    }
```
**步骤3**：停止定时器。如下：

我们还需要加一个按钮，点击按钮后，停止文字滚动。也就是停止定时器。

提示：我们最好把定时器的id放在全局的位置（放到data里），这样的话，开启定时器的方法和停止定时器的方法，都可以同时访问到这个定时器。

代码如下：

```javascript
    data: {
        msg: '千古壹号，前端教程～～～',
        intervalId: null
    },
    methods: {
        startMethod: function () {
            //添加定时器：点击按钮后，让字符串连续滚动
            this.intervalId = setInterval(() => {  //【注意】这个定时器的this，一定不要忘记了
                // 获取 msg 的第一个字符
                var start = this.msg.substring(0, 1);
                // 获取 后面的所有字符
                var end = this.msg.substring(1);
                // 重新拼接得到新的字符串，并赋值给 this.msg
                // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
                this.msg = end + start;
                console.log(_this.msg);
            }, 400);
        },

        stopMethod: function () {
            //停止定时器：点击按钮后，停止字符串的滚动
            clearInterval(this.intervalId);
        }
    }
```


**【重要】步骤4**：一开始的时候，还需要判断是否已经存在定时器。如下：

步骤3中的代码，虽然做了停止定时器的操作，但是有个问题：在连续多次点击“启动定时器”按钮的情况下，此时再点击“停止定时器”的按钮，是没有反应的。因此，我们需要改进的地方是：

- **在开启定时器之前，先做一个判断**：如果定时器不为 null，就不继续往下执行了（即不再开启新的定时器），防止开启了多个定时器。

- **停止定时器的时候，虽然定时器停止了，但定时器并不为 null**。因此，最后我们还需要手动将定时器设置为null。这样，才能恢复到最初始的状态。

**完整版代码**：

针对上面的四个步骤，为了实现这个案例，完整版代码如下：

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

<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>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="button" value="跑马灯走起" @click="startMethod">
        <input type="button" value="跑马灯停止" @click="stopMethod">

    </div>
    <script src="vue2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '千古壹号，前端教程～～～',
                intervalId: null
            },
            methods: {
                startMethod: function () {

                    //【重要】在开启定时器之前，先进行判断，避免出现多个定时器
                    //如果出现了多个定时器，后面的“停止定时器”操作是无效的
                    if (this.intervalId != null) return; //【注意】这个定时器的this，一定不要忘记了

                    //添加定时器：点击按钮后，让字符串连续滚动
                    this.intervalId = setInterval(() => {
                        // 获取 msg 的第一个字符
                        var start = this.msg.substring(0, 1);
                        // 获取 后面的所有字符
                        var end = this.msg.substring(1);
                        // 重新拼接得到新的字符串，并赋值给 this.msg
                        // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
                        this.msg = end + start;
                        console.log(this.msg);
                    }, 400);
                },

                stopMethod: function () {
                    // 停止定时器：点击按钮后，停止字符串的滚动
                    clearInterval(this.intervalId);
                    // 每当清除了定时器之后，需要重新把 intervalId 置为 null
                    this.intervalId = null;
                }
            }
        })
    </script>

</body>

</html>
```


**上方代码的总结**：

- 在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过`this`来访问。这里的**this指向的是Vue的实例对象**。

- VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。这样做 的好处是：**程序员只需要关心数据，不需要考虑如何重新渲染DOM页面；减少DOM操作**。

- 在调用定时器 id 的时候，代码是`this.intervalId`，这个`this`一定不要漏掉了。

原文地址：https://blog.csdn.net/2301_79706774/article/details/142577479

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：通过 OBD Demo 体验 OceanBase 4.3 社区版
下一篇：25：stm32的低功耗模式

死锁和Linux线程同步
一个锁，也可以产生死锁问题，比如一个线程申请完锁后，又申请锁，此时他就会带着锁阻塞，其它线程也因为得不到锁而阻塞。虽然16行直接让该线程去等待队列等待了。但实际上大部分情况都是因为临界资源不就绪，进而
阅读更多2024-09-27
Azure Kinect 人体跟踪关节
Azure Kinect 人体跟踪关节
阅读更多2024-09-27
Stable Diffusion 保姆级教程
扩散模型（Diffusion Model）是一种生成模型，其工作原理是通过逐步加入噪声，将图像转换为纯噪声图像，随后再逐步去噪，最终恢复到目标图像。在此过程中，模型学习如何从噪声中生成清晰的图像。St
阅读更多2024-09-27
秋招、春招的求职简历模板
本文介绍在秋招、春招等校园招聘场景中，个人求职简历的制作模板与撰写注意事项，并分享简历的Word模板~
阅读更多2024-09-27
sysbench 命令：跨平台的基准测试工具
sysbench 是一个跨平台的基准测试工具，用于评估系统性能，包括 CPU、内存、文件 I/O、数据库等性能。‍。
阅读更多2024-09-27
【HarmonyOS】Web组件同步与异步数据获取
【html测试文件】src/main/resources/rawfile/Page04.html。【使用示例】src/main/ets/pages/Page04.ets。Web组件交互同步与异步获取数
阅读更多2024-09-27
maven给springboot项目打成jar包 maven springboot打包配置
使用springCloud或springboot的过程中，发布到生产环境的网速受限，如果每次将60,70M甚至更大的jar包上传，速度太慢了，采取jar包和配置文件分离的方式可以极大的压缩jar包大小
阅读更多2024-09-27
入门网络安全工程师要学习哪些内容
大家都知道网络安全行业很火，这个行业因为国家政策趋势正在大力发展，大有可为!但很多人对还是不了解，不知道需要学什么?知了堂小编总结出以下要点。是一个概称，学习的东西很多，具体学什么看自己以后的职业定位
阅读更多2024-09-27
如何用3个月零基础入门网络安全？_网络安全零基础怎么学习
我们知道计算机最早是在西方发明出来的，很多名词或者代码都是英文的，甚至现有的一些教程最初也是英文原版翻译过来的，而且一个漏洞被发现到翻译成中文一般需要一个星期的时间，在这个时间差上漏洞可能都修补了。”
阅读更多2024-09-27
傅里叶级数在机器人中的应用（动力学参数辨识）
在动力学参数辨识中，构成的线性方程组中的回归矩阵-Y，有可能是一个病态的矩阵（什么是病态：就是当Y矩阵改变一个细小的变化，最终的结果会发生很大的变化），那么此时我们就需要进行傅里叶变换分析信号，在低速
阅读更多2024-09-27