[JavaScript知识库]Vue-的基本使用和指令

基本使用步骤

① 导入 vue.js 的 script 脚本文件

<script src="./lib/vue-2.6.12.js"></script>

② 创建 vm 实例对象（vue 实例对象）
③ 通过el选项，在页面中声明一个将要被 vue 所控制的 DOM 区域

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        username: "zs",
      },
    });
  </script>

④ 声明对应的el元素

 <div id="app">姓名：{{username}}</div>

指令

① 内容渲染指令：

用来辅助开发者渲染 DOM 元素的文本内容

使用方法：

<div id="app">
      <p v-text="username"></p>
      <p>{{username}}</p>
      <p v-html="gender"></p>
    </div>

<script>
    const vm = new Vue({
      el: "#app",
      data: {
        username: "crystal",
        gender: "<b>女</b>",
      },
    });
  </script>

结果：

② 属性绑定指令

为元素的属性动态绑定属性值

使用方法：

<input type="text" v-bind:placeholder="info" />

const vm = new Vue({
      el: "input",
      data: {
        info: "请输入",
      },
    });

结果：

简写：因为经常使用v-bind 所以vue 官方为其提供了简写形式，（简写为英文的 : ）

简写用法：

  <input type="text" :placeholder="info" />

③ 事件绑定指令

辅助程序员为 DOM 元素绑定事件监听

使用方法：

  <div id="app">
      <button v-on:click="btn">按钮</button>
    </div>

 const vm = new Vue({
      el: "#app",
      //声明事件处理函数的节点
      methods: {
        btn: function () {
          console.log("ok");
        },
      },
    });

简写：（简写为英文的 @ ）

简写用法：

 <div id="app">
      <button @click="btn">按钮</button>
    </div>

案例：自加

绑定一个点击事件，按钮按一次，count值加1

  <div id="app">
      <h3>count的值：{{count}}</h3>
      <button @click="add">+1</button>
    </div>

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        count: 0,
      },
      //声明事件处理函数的节点
      methods: {
        add() {
          vm.count++;
          return;
        },
      },
    });
   
  </script>

$event:

$event是vue提供的特殊变量，用来表示原生的事件参数对象event。$event 可以解决事件参数对象 event
被覆盖的问题。

事件修饰符:

来辅助程序员更方便的对事件的触发进行控制。

按键修饰符：

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

④ 双向绑定指令

用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

v-model修饰符：

注意： v-model指令 只能结合表单元素一起使用，不能结合普通标签一起使用

使用方法：

 <div id="app">
      <h3>count的值：{{count}}</h3>
      <input type="text" v-model="count" />
    </div>

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        count: "0",
      },
    });
  </script>

结果：

⑤ 条件渲染指令

按需控制 DOM 的显示与隐藏。

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

使用方法：

 <div id="app">
      <button @click="flag=!flag">toggle</button>
      <p v-if="flag">v-if</p>
      <p v-show="flag">v-show</p>
    </div>

 const vm = new Vue({
      el: "#app",
      data: {
        flag: true,
        // 若果flag为true 显示
        // 若果flag为false 隐藏
      },
    });

结果：

⑥ 列表渲染指令

用来辅助开发者基于一个数组来循环渲染一个列表结构

• items 是待循环的数组
• item 是被循环的每一项

v-for 中的索引:

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

使用 key 维护列表的状态:

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

key 的注意事项:

① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

使用方法：

 <div id="app">
      <!-- 添加用户的区域 -->
      <div>
        <input type="text" v-model="name" />
        <button @click="addNewUser">添加</button>
      </div>

      <!-- 用户列表区域 -->
      <ul>
        <li v-for="(user, index) in userlist" :key="user.id">
          <input type="checkbox" />
          姓名：{{user.name}}
        </li>
      </ul>
    </div>

 <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          // 用户列表
          userlist: [
            { id: 1, name: "zs" },
            { id: 2, name: "ls" },
          ],
          // 输入的用户名
          name: "",
          // 下一个可用的 id 值
          nextId: 3,
        },
        methods: {
          // 点击了添加按钮
          addNewUser() {
            this.userlist.unshift({ id: this.nextId, name: this.name });
            this.name = "";
            this.nextId++;
          },
        },
      });
    </script>