Vue2入门 - 技术栈

创建Vue2实例：

1.进行引包（下面这个路径不用下载都可以直接使用）

javascript 复制代码

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

new Vue（）方法创建实例

el是 Vue 实例中的一个配置项，它指定了 Vue 应用要挂载到哪个 DOM 元素上。Vue 会在页面加载时，自动找到对应的 DOM 元素，并将该元素及其子元素交给 Vue 来管理。

没有el的情况下，Vue 实例创建后不会直接渲染到页面，而是你需要显式地调用.mount()方法来手动挂载 Vue 实例。

data 是 Vue 实例的一个选项，它用来定义组件或应用的响应式数据。这些数据将绑定到视图中，当数据变化时，Vue 会自动更新视图，保持数据和视图的一致性

javascript 复制代码

<div id="app">{{msg}}</div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      // 指定vue指向哪个盒子
      el: "#app",
      data:
        { msg: "nhao" }
    })
  </script>

插值表达式：

插值表达式语法：{{}}

1.使用的数据要存在data

2.支持的表达式不能写if for等

javascript 复制代码

  <div id="app">{{nack}}
    <!-- 变成大写->toUpperCase() -->
    <h1>{{nack.toUpperCase()}}</h1>
    <p>{{age>10?22:12}}</p>
  </div>

  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        nack: "nailfe",
        age: 10
      }
    })
  </script>

Vue2指令：

Vue 2 的指令（Directives）是 Vue 提供的一种特殊的模板语法，用于在 DOM 元素上绑定数据或者执行特定操作。指令以 v- 开头，用来表达模板和数据之间的绑定关系或执行特定操作。Vue 指令是响应式的，当数据改变时，DOM 会自动更新。

vue有14个指令：

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-once

v-memo

v-cloak

v-model --双向数据绑定：

主要用于表单元素，提供双向数据绑定，当表单元素值变化时，data会同步更新，反之亦然。

javascript 复制代码

<div id="app">
  <input v-model="message" placeholder="输入内容">
  <p>你输入的是: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

v-show和v-if:

v-show="表达式" 表达式值true为显示，false为隐藏 v-show控制是通过控制display属性

适合切换频繁显示隐藏的场景

v-if="表达式" 表达式值true为显示，false为隐藏 v-if控制的是是否存在

适合于创建和移除元素节点

javascript 复制代码

 <div class="app">
    <div v-show="flag" class="box">show</div>
    <div v-if="flag" class="box">if</div>
  </div>

  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: ".app",
      data: {
        flag: true
      }
    })
  </script>

v-else和v-else-if:

v-else 和 v-else-if 是 Vue 中常用的条件渲染指令，它们与 v-if 配合使用，用来实现基于不同条件的渲染逻辑。下面我会详细讲解这两个指令的作用、使用方法及其区别。

javascript 复制代码

  <div id="app">
    <p v-if="gender==1">男</p>
    <p v-else>女</p>
    <hr>

    <p v-if="score>=90">房子</p>
    <p v-else-if="score>=80">car</p>
    <p v-else-if="score>=60">computer</p>
    <p v-else>rose</p>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        gender: 2,
        score: 50
      }
    })
  </script>

v-on:

v-on:是 Vue.js 中的一个指令，用于绑定事件监听器。它可以帮助你监听 DOM 事件（如 click, keyup, change 等），并将这些事件与 Vue 实例中的方法或数据绑定起来。通过过v-on，你可以轻松地在 Vue 的模板中处理用户交互。

有两种绑定事件监听器的方法

javascript 复制代码

<div id="app">
  <button v-on:click="greet">点击我</button>
  <button @click="greet">点击我</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    greet() {
      alert('你好，Vue！');
    }
  }
});
</script>

v-bind:

v-bind是 Vue.js 中一个非常重要的指令，用于动态绑定 HTML 属性或组件 props。它可以将数据与元素的属性、类、样式等绑定，从而实现页面的动态更新。

javascript 复制代码

<div class="app">
    <!-- 插值表达式不能用于标签属性 -->
    <img v-bind:src="url" :title="msg" alt="">
    <img :src="url" :title="msg" alt="">
  </div>
  <script src="vue.js"></script>
  <script>
    // 动态设置html标签属性
    // 语法：v-bind:属性名="表达式"

    const app = new Vue({
      el: ".app",
      data: {
        url: "./img/2.png",
        msg: "黑马"
      }
    })
  </script>

v-for:

for循环进行遍历

javascript 复制代码

  <div class="app">
    <ul>
      <li v-for="(item,index) in list">{{item}}</li>
    </ul>
  </div>
  <script src="vue.js"></script>
  <script>
    // 基于数据循环，多次渲染整个元素
    // 语法 v-for="(item,index) in 数组" item是每一项 index是下标
    const app = new Vue({
      el: ".app",
      data: {
        list: ["洗个", "的分", "色粉"]
      }
    })
  </script>

指令修饰符：

通过"."来指明一些指令后缀，不同后缀分装了不同的处理操作，可以简化代码

① 按键修饰符

键盘回车监听@keyup.enter

② v-model修饰符

去除首尾空格v-model.trim

转数字v-model.number

③ 事件修饰符

@事件名.stop阻止冒泡（点儿子冒泡到父亲）

@事件名.prevent → 阻止默认行为

javascript 复制代码

  <div class="app">
    <input type="text" v-model.trim="content">
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: ".app",
      data: {
        content: ""
      }
    })

四大周期函数：

在 Vue2 中，生命周期函数是 Vue 实例在创建、更新和销毁时，所经历的不同阶段所触发的函数。通过这些函数，开发者可以在组件的不同阶段执行特定的逻辑。

javascript 复制代码

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>