【Vue3 从入门到实战进阶式掌握完整知识体系】001-Vue语法初探

本是古典何须时尚 2023-10-03 08:23 31阅读 0赞

### 文章目录 ###

*  一、Vue语法初探
 *   *  1、第一个Vue程序
     *   *  hello world 代码
         *  运行结果
         *  我们在模板里面写一个变量
         *  运行结果
         *  使用mounted函数
         *  运行结果
         *  这告诉我们什么？
     *  2、反转字符串
     *   *  代码
         *  运行结果
     *  3、显示与隐藏
     *   *  代码
         *  显示状态
         *  隐藏状态
     *  4、了解循环和双向绑定
     *   *  代码
         *  运行结果
         *  往列表里面添加新的数据
         *  运行结果
         *  来点更有意思的
         *  运行结果
     *  5、组件概念初探
     *   *  先了解一下v-bind指令
         *  运行结果
         *  关于组件
         *  运行结果
         *  让组件灵活起来
         *  运行结果

# 一、Vue语法初探 #

## 1、第一个Vue程序 ##

### hello world 代码 ###

### 运行结果 ###

> 这是Vue最基础的使用，找到 id 为 root 的标签，将 Vue 实例的模板放入标签之内！  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]

### 我们在模板里面写一个变量 ###

### 运行结果 ###

> content是一个变量，在模板中，我们使用“\{ \{\}\}”将其包裹就是表示此意！这个变量会从 data 里面获取！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]

### 使用mounted函数 ###

> 当页面加载完成执行此函数！
> 
> 2021年6月12日10点23分，我必须回来补充一下关于 this 的概念了，this 代表的是当前 vue 实例，我们下面使用的`this.content`表示取得 data 里面的 content ，这是一种简写，完整写法是 `this.$data.content`，这么写看起来更容易理解！

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]

### 这告诉我们什么？ ###

> 实际上我这是第二遍学习 Vue 了，第一遍学得粗糙，似懂非懂，本来不想做这么详细的笔记，但是老师告诉我了我不知道的概念或者是思想，我觉得这是极其重要的内容！认真！认真！再认真！唯有一丝不苟，才能学到真正的知识！加油！訾博！2021年6月11日22:18:59

以前我们要改变页面的内容需要使用 类似`document.getElementById`的代码来操作`DOM`，而现在我们不再关心`DOM`，而是更加关心数据，我们直接操作数据就可以了，剩下的交给`Vue`，**我们就从“面向`DOM`编程”变成了“面向数据编程”**！

## 2、反转字符串 ##

> 我们主要来了解 vue 如何绑定事件

### 代码 ###

### 运行结果 ###

![在这里插入图片描述][20210617222529379.png]

## 3、显示与隐藏 ##

> 我们这里来了解 vue 控制标签是否加载

### 代码 ###

### 显示状态 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]

### 隐藏状态 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]

## 4、了解循环和双向绑定 ##

> vue 的指令 v-for 大大简化了我们的循环代码！在我刚学 vue 的时候就非常喜欢！当然我只是个前端小白！

### 代码 ###

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]

### 往列表里面添加新的数据 ###

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]

### 来点更有意思的 ###

> 双向绑定：你变我也变，我变你也变！

<!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">
      <title>了解循环</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      Vue.createApp({
         
        data() {
         
          return {
         
            /* 
              我们这里有一个数组，想要把他们写进 li 标签里面
              传统上，我们肯定是写 4 个 li
              这里我们使用 vue 的方式
            */
            list: ["大哥", "二哥", "三哥", "四哥"],
            // 这里也要定义一个 inputValue
            inputValue: ''
          }
        },
        methods: {
         
          addItem(){
         
            // Math.ceil(Math.random()*10)
            // 获取从 1 到 10 的随机整数，取 0 的概率极小
            // this.list.push(Math.ceil(Math.random()*10) + "数字");
            // 我们写一个输入框，将输入的内容动态添加到列表
            // 这让我想起我写 Android 的经历，直接获取输入框里面的值进行使用即可
            // 但是 vue 是“面向数据编程”，我们给输入框的内容绑定一个值，当输入框的内容
            // 发生变化的时候，我们也使这个值也一起发生变化，当这个值发生变化的时候，
            // 输入框的内容也发生同样的变化也就是说输入框的内容和  inputValue 的值
            // 是【双向绑定】的——我变你也变，你变我也变！
            // 所以，我们在点击按钮的时候将 inputValue 添加到 list 即可
            this.list.push(this.inputValue);
            // 我们将内容添加到 list 之后，还需要将输入框清空，由于【双向绑定】，
            // 我们将 inputValue 清空即可，这就很方便！记住——面向数据编程！
            this.inputValue = "";
          }
        },
        // 下面 v-for 里面的语句就表示从 list 中取出每个 item 和 每个 item 对应的下标 index
        // 我们可以像使用之前的 content 一样使用 item 和 index
        // 下面我们再写一个 button ，目的是使得每次点击的时候往列表里面添加新的数据
        // 下面我们新添加一个输入框，并且使用 vue 的 v-model 指令
        // v-model 指令就是实现数据绑定的，当输入框内容发生变化，inputValue 也会发生变化
        template: `
        <div>
          <input v-model="inputValue" />
          <button v-on:click="addItem">添加</button>
          <ul v-for="(item, index) of list">
            <li>{
          {item}} {
          {index}}</li>
          </ul>
        </div>`
      }).mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]

## 5、组件概念初探 ##

> 我们在”第一个 vue 程序“中演示了使用`{ {content}}`来引入 data 里面的数据，这两个大括号的学名就做`插值表达式`！现在我们产生了一个新的需求：将标签的属性绑定 data 里面的一个值。但我们使用插值表达式是无法达到目的的！我们需要一个新的指令 v-bind

### 先了解一下v-bind指令 ###

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]

### 关于组件 ###

> 组件的概念哪里都有，我们不可能把整个项目的内容写在一个文件里面，所以我们分成不同的文件和模块实现不同的功能，组合他们以实现完整的功能！这在程序开发中，在现实生活中随处可见！我们在了解循环和双向绑定的时候使用到了列表 li 标签，在实际使用的时候可能要给每一个 li 标签里面的内容添加很多相关内容或者样式，这就使得页面代码集中在一个文件中，不利于维护，也显得代码非常臃肿，因此我们尝试来把 li 标签抽取成一个组件！
> 
> 下面我们来写一个简单的组件！

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9]

### 让组件灵活起来 ###

> 组件不仅要包含其 html 内容，还要有 css 样式，以及 js 代码逻辑！

### 运行结果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210617222217117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210617222239294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210617222303392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20210617222529379.png]: https://img-blog.csdnimg.cn/20210617222529379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210617222546885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210617222557990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021061722262264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210617222636222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210617222647494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210617222657748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210617222722322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210617222738320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70