【Vue2学习打卡第一天】

paithfinder

已于 2024-03-06 15:38:01 修改

阅读量946

点赞数 19

分类专栏： vue2及vuex 文章标签： vue.js 学习 javascript

于 2023-11-27 22:46:56 首次发布

本文链接：https://blog.csdn.net/m0_75134766/article/details/134619003

版权

vue2及vuex 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、Vue的概念

vue是一个用于构建用户界面的渐进式框架

1.构建用户界面

基于数据动态渲染页面

2.渐进式

循序渐进的学习

3.框架

一套完整的项目解决方案，提升开发效率，但要理解记忆规则（去官网查）

二、创建 Vue 实例，初始化渲染的核心步骤

准备容器
引包 (官网) - 开发版本 / 生产版本
创建 Vue 实例 new Vue()
指定配置项 el data => 渲染数据
① el 指定挂载点，选择器指定控制的是哪个盒
② data 提供数据

  <body>
    <div id="app">{{ msg }}</div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue",
        },
      });
    </script>
  </body>

三、插值表达式

1. 插值表达式的作用是什么？

利用表达式进行插值，将数据渲染页面中

2. 语法格式？

{{ 表达式 }}
何为表达式：能算出结果的式子

3. 插值表达式的注意点

① 使用的数据要存在（data）
② 支持的是表达式，而非语句 if … for
③ 不能在标签属性里面使用

  <body>
    <div class="app">
      <p>{{ '我叫'+ name }}</p>
      <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
      <p>{{ '我的爱好是' + hobby}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          name: "paithfinder",
          age: "19",
          hobby: "唱歌",
        },
      });
    </script>
  </body>

四、响应式

1. 什么是响应式呢？

数据改变，视图自动更新
使用 Vue 开发 → 专注于业务核心逻辑即可

2. 如何访问或修改数据呢？

data中的数据, 最终会被添加到实例上
① 访问数据： “实例.属性名”
② 修改数据： “实例.属性名” = “值”

五、指令

1.含义

指令就是带有 v- 前缀的特殊属性，不同属性对应不同的功能学习不同指令 → 解决不同业务场景需求

2.v-html

动态解析标签
v-html = "表达式 " → 动态设置元素 innerHTML

  <body>
    <div class="app">
      <div v-html="msg"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          msg: `
                <a href="https://v2.cn.vuejs.org/v2/guide/">查看Vue官方文档请点击这里</a>
                `,
        },
      });
    </script>
  </body>

3.v-show和v-if

v-show

作用：控制元素显示隐藏
语法： v-show = “表达式” 表达式值 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换=显示隐藏的场景
(show：展示即要么展示要么就隐藏，实际一直在页面中存在)

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = “表达式” 表达式值 true 显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景，如登录框
(if：如果，有条件的展示，不轻易展示和隐藏，实际在页面中不会一直存在)

4.v-else和v-else-if

作用：辅助 v-if 进行判断渲染
语法： v-else v-else-if = “表达式”
注意：需要紧挨着 v-if 一起使用

  <body>
    <div class="app">
      <p v-if="gender==0">性别男</p>
      <p v-else>性别女</p>
      <hr />
      <p v-if="grade >= 90">奖励全家法国巴黎一日游</p>
      <p v-else-if="grade >= 70">奖励一顿火锅</p>
      <p v-else-if="grade >= 60">奖励一根棒棒糖</p>
      <p v-else>奖励学生家长班主任办公室一日游</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          gender: 0,
          grade: 88,
        },
      });
    </script>
  </body>

在这里插入图片描述

5.v-on

作用：注册事件 = 添加监听 + 提供处理
简写：@事件名

语法1：v-on:事件名 = “内联语句”

  <body>
    <div class="app">
      <button v-on:click="value--">-</button>
      <span>{{ value }}</span>
      <button @click="value++">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          value: 50,
        },
      });
    </script>
  </body>

语法2： v-on:事件名 = “methods中的函数名”

  <body>
    <div class="app">
      <button @click="fn">点我显示或隐藏</button>
      <h1 v-show="flag">轻轻地我走了,正如我轻轻地来~</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          flag: true,
        },
        methods: {
          fn() {
            this.flag = !this.flag;
          },
        },
      });
    </script>
  </body>

注意：methods函数内的 this 指向 Vue 实例

v-on 参数传参

<body>
  <div id="app">
    <div class="box">
      <h3>自动售货机</h3>
      <button @click="buy(5)">肥宅快乐水3元</button>
      <button @click="buy(10)">咖啡6元</button>
      <button @click="buy(8)">辣条5元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
          this.money -= price
        }
      }
    })
  </script>
</body>

6.v-bind

作用：动态的设置html的标签属性 → src url title …
语法： v-bind:属性名=“表达式”
注意：简写形式 :属性名=“表达式”

7.v-for

基本介绍

作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字…
遍历数组语法：
v-for = "(item, index) in 数组"(item写在前，index写在后：先有数据项，才有它的下标)
item 每一项， index 下标
省略 index(如果不需要index): v-for = “item in 数组”

  <body>
    <div class="app">
      <h1>四大名著</h1>
      <ul>
        <li v-for="(item,index) in list">{{ index+1 }}.{{ item }}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          list: ["《红楼梦》", "《西游记》", "《水浒传》", "《三国演义》"],
        },
      });
    </script>
  </body>

在这里插入图片描述

v-for中的key

语法：key属性 = "item.唯一标识"
key作用：
给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。
v-for 的默认行为会尝试原地修改元素（就地复用）
举例说明：当使用v-for来删除列表中的第一个元素而不加key时，不会真正删除第一个列表元素，而是删除列表中最后一个元素，再用最后一个元素里的值替换掉上一个元素里的值，之前的值也依次朝前进行替换。
注意点：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
一般这里的唯一值是id

<li v-for="(item, index) in xxx" :key="item.唯一值">

8.v-model

作用: 给表单元素使用, 双向数据绑定 → 可以快速获取或设置表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法: v-model = ‘变量’

<body>
  <div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login () {
          console.log(this.username, this.password)
        },
        reset () {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>