1. vue常用术语,实例演示 2. 将课堂上提及的常用指令,全部上机做一遍,并发布 - 18期学习作业

Home > List of blog posts > 1. vue常用术语,实例演示 2. 将课堂上提及的常用指令,全部上机做一遍,并发布

Blogger Information

Blog 29

fans 0

comment 0

visits 14942

Special Recommendation

More>

Related recommendations

1. vue常用术语

<!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>vue常用术语</title>
    <!-- cdn方式引入vue -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <!-- 1. 挂载点：相当于作用域     -->
    <!-- 下面这个app就是挂载点 -->
    <div class="app">
      <!-- 用占位符代表变量 -->
      <p>用户名：{{userName}}</p>
      <p>超能力：{{power}}</p>
    </div>
    <script>
      // 2. vue实例：就是对象
      //   Vue.createApp方法创建应用实例
      //   用mount挂载到挂载点，即选择器app的DOM元素div
      const app = Vue.createApp({
        //   挂载点中变量数据写在这，用data方法，挂载后就可显示变量
        data() {
          return {
            // 在这写入属性，每个属性对应挂载点中的变量
            userName: "超人",
            power: "激光眼",
          };
        },
      }).mount(".app");
      //   3. 数据注入
      //   访问变量方式，常用
      console.log(app.userName);
      //   映射到data方法访问
      console.log(app.$data.userName);
      //   数据注入用访问器属性实现
      // 创建对象
      const obj = {
        // 对象
        $data: {
          userName: "闪电侠",
        },
        // 访问器属性返回对象中的userName
        get userName() {
          return this.$data.userName;
        },
      };
      //   正常访问
      console.log(obj.$data.userName);
      //   用访问器属性访问
      console.log(obj.userName);
      //   因此看出，数据注入是用访问器属性实现的
      //   4. 响应式
      //   修改变量
      app.userName = "绿灯侠";
    </script>
  </body>
</html>

2. vue指令

vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是”自定义属性”
2.1 v-text、v-html、v-once

<!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>vue指令</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- v-text     v-html     v-once -->
    <div class="app">
      <p>用户名：{{userName}}</p>
      <!-- v-text属性是vue指令，内容必须是js语句，这里userName是变量 -->
      <!-- v-text指令不会解析html标签 -->
      <p>用户名：<span v-text="userName"></span></p>
      <!-- v-html指令会解析html标签 -->
      <p>用户名：<span v-html="userName"></span></p>
      <!-- v-once指令：渲染1次，后面赋值不会变化 -->
      <p>用户名：<span v-once="userName"></span></p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            userName: "超人",
          };
        },
      }).mount(".app");
      app.userName = `<span style="color:blue">闪电侠</h3>`;
    </script>
  </body>
</html>

2.2 样式绑定

<!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>
    <style>
      .bgCol {
        background-color: aqua;
      }
      .textCol {
        color: bisque;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div class="app">
      <!-- 一、样式绑定 -->
      <!-- 指令v-bind，简化写法：冒号 -->
      <!-- 1. 绑定行内样式 -->
      <!-- 在属性style前加v-bind:指令，后面属性值用变量 -->
      <p v-bind:style="style">php中文网</p>
      <!-- 多个样式用对象，属性值用变量 -->
      <p :style="{color:textColor,backgroundColor:bgColor}">学习php好网站</p>
      <!-- 基本样式3个，定制样式3个：使用数组，每个变量为对象 -->
      <button :style="[btnBase,btnCustom]">提交</button>
      <!-- 2. 绑定class样式 -->
      <!-- 用变量方式 -->
      <p :class="bgc">绑定class样式</p>
      <!-- 用对象方式：控制样式是否生效 -->
      <!-- 注意对象样式bgCol名要用字面量''，否则变成变量了。改变变量show值控制样式是否生效 -->
      <p :class="{'bgCol':show}">绑定class样式</p>
      <!-- 用数组方式： -->
      <p :class="[bgc,textC]">绑定class样式</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            style: "color:red",
            textColor: "blue",
            bgColor: "yellow",
            btnBase: {
              width: "6em",
              height: "2em",
              border: "none",
            },
            btnCustom: {
              color: "white",
              backgroundColor: "blue",
              cursor: "pointer",
            },
            bgc: "bgCol",
            show: true,
            textC: "textCol",
          };
        },
      }).mount(".app");
    </script>
  </body>
</html>

2.3 双向绑定

<!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>
      <!-- es6方式绑定 -->
      <p>
          <div>es6绑定</div>
          <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
      </p>
      <!-- vue绑定 -->
      <div class="app">
        <p>
            <div>vue@v-on命令绑定</div>
            <!-- 用事件绑定：vue中绑定事件用v-on: -->
            <!-- input给个自定义的值:value绑定到com,com是span标签的占位符 -->
            <!-- v-on:input事件绑定，给com赋值为当前标签的值 -->
            <input type="text" v-on:input="com = $event.target.value" :value="com"><span>{{com}}</span>
        </p>
        <p>
            <div>vue@v-model命令绑定</div>
            <input type="text" v-model="com" :value="com"><span>{{com}}</span>
        </p>
        <p>
            <div>vue@v-model.lazy延迟绑定</div>
            <!-- 回车时才显示 -->
            <input type="text" v-model.lazy="com" :value="com"><span>{{com}}</span>
        </p>
      </div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    com:'',
                }
            }
        }).mount(".app")
    </script>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端开发工具安装及使用小结

2021-12-21 23:49:44

1. vue常用术语

2. vue指令

2.1 v-text、v-html、v-once

2.2 样式绑定

2.3 双向绑定