ASCII码 ASCII码

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

发布于：2022-02-28 10:17:55  栏目：技术文档

1. vue常用术语

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vue常用术语</title>
  8.     <!-- cdn方式引入vue -->
  9.     <script src="https://unpkg.com/vue@next"></script>
  10.   </head>
  11.   <body>
  12.     <!-- 1. 挂载点：相当于作用域     -->
  13.     <!-- 下面这个app就是挂载点 -->
  14.     <div class="app">
  15.       <!-- 用占位符代表变量 -->
  16.       <p>用户名：{{userName}}</p>
  17.       <p>超能力：{{power}}</p>
  18.     </div>
  19.     <script>
  20.       // 2. vue实例：就是对象
  21.       //   Vue.createApp方法创建应用实例
  22.       //   用mount挂载到挂载点，即选择器app的DOM元素div
  23.       const app = Vue.createApp({
  24.         //   挂载点中变量数据写在这，用data方法，挂载后就可显示变量
  25.         data() {
  26.           return {
  27.             // 在这写入属性，每个属性对应挂载点中的变量
  28.             userName: "超人",
  29.             power: "激光眼",
  30.           };
  31.         },
  32.       }).mount(".app");
  34.       //   3. 数据注入
  35.       //   访问变量方式，常用
  36.       console.log(app.userName);
  37.       //   映射到data方法访问
  38.       console.log(app.$data.userName);
  39.       //   数据注入用访问器属性实现
  40.       // 创建对象
  41.       const obj = {
  42.         // 对象
  43.         $data: {
  44.           userName: "闪电侠",
  45.         },
  46.         // 访问器属性返回对象中的userName
  47.         get userName() {
  48.           return this.$data.userName;
  49.         },
  50.       };
  51.       //   正常访问
  52.       console.log(obj.$data.userName);
  53.       //   用访问器属性访问
  54.       console.log(obj.userName);
  55.       //   因此看出，数据注入是用访问器属性实现的
  57.       //   4. 响应式
  58.       //   修改变量
  59.       app.userName = "绿灯侠";
  60.     </script>
  61.   </body>
  62. </html>

2. vue指令

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vue指令</title>
  8.   </head>
  9.   <body>
  10.     <script src="https://unpkg.com/vue@next"></script>
  11.     <!-- v-text     v-html     v-once -->
  12.     <div class="app">
  13.       <p>用户名：{{userName}}</p>
  14.       <!-- v-text属性是vue指令，内容必须是js语句，这里userName是变量 -->
  15.       <!-- v-text指令不会解析html标签 -->
  16.       <p>用户名：<span v-text="userName"></span></p>
  17.       <!-- v-html指令会解析html标签 -->
  18.       <p>用户名：<span v-html="userName"></span></p>
  19.       <!-- v-once指令：渲染1次，后面赋值不会变化 -->
  20.       <p>用户名：<span v-once="userName"></span></p>
  21.     </div>
  22.     <script>
  23.       const app = Vue.createApp({
  24.         data() {
  25.           return {
  26.             userName: "超人",
  27.           };
  28.         },
  29.       }).mount(".app");
  30.       app.userName = `<span style="color:blue">闪电侠</h3>`;
  31.     </script>
  32.   </body>
  33. </html>

2.2 样式绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>样式绑定</title>
  8.     <style>
  9.       .bgCol {
  10.         background-color: aqua;
  11.       }
  12.       .textCol {
  13.         color: bisque;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <script src="https://unpkg.com/vue@next"></script>
  19.     <div class="app">
  20.       <!-- 一、样式绑定 -->
  21.       <!-- 指令v-bind，简化写法：冒号 -->
  23.       <!-- 1. 绑定行内样式 -->
  24.       <!-- 在属性style前加v-bind:指令，后面属性值用变量 -->
  25.       <p v-bind:style="style">php中文网</p>
  26.       <!-- 多个样式用对象，属性值用变量 -->
  27.       <p :style="{color:textColor,backgroundColor:bgColor}">学习php好网站</p>
  28.       <!-- 基本样式3个，定制样式3个：使用数组，每个变量为对象 -->
  29.       <button :style="[btnBase,btnCustom]">提交</button>
  31.       <!-- 2. 绑定class样式 -->
  32.       <!-- 用变量方式 -->
  33.       <p :class="bgc">绑定class样式</p>
  34.       <!-- 用对象方式：控制样式是否生效 -->
  35.       <!-- 注意对象样式bgCol名要用字面量''，否则变成变量了。改变变量show值控制样式是否生效 -->
  36.       <p :class="{'bgCol':show}">绑定class样式</p>
  37.       <!-- 用数组方式： -->
  38.       <p :class="[bgc,textC]">绑定class样式</p>
  39.     </div>
  40.     <script>
  41.       const app = Vue.createApp({
  42.         data() {
  43.           return {
  44.             style: "color:red",
  46.             textColor: "blue",
  47.             bgColor: "yellow",
  49.             btnBase: {
  50.               width: "6em",
  51.               height: "2em",
  52.               border: "none",
  53.             },
  54.             btnCustom: {
  55.               color: "white",
  56.               backgroundColor: "blue",
  57.               cursor: "pointer",
  58.             },
  60.             bgc: "bgCol",
  61.             show: true,
  62.             textC: "textCol",
  63.           };
  64.         },
  65.       }).mount(".app");
  66.     </script>
  67.   </body>
  68. </html>

2.3 双向绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>双向绑定</title>
  8.         <script src="https://unpkg.com/vue@next"></script>
  10.   </head>
  11.   <body>
  12.       <!-- es6方式绑定 -->
  13.       <p>
  14.           <div>es6绑定</div>
  15.           <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
  16.       </p>
  18.       <!-- vue绑定 -->
  19.       <div class="app">
  20.         <p>
  21.             <div>vue@v-on命令绑定</div>
  22.             <!-- 用事件绑定：vue中绑定事件用v-on: -->
  23.             <!-- input给个自定义的值:value绑定到com,com是span标签的点位符 -->
  24.             <!-- v-on:input事件绑定，给com赋值为当前标签的值 -->
  25.             <input type="text" v-on:input="com = $event.target.value" :value="com"><span>{{com}}</span>
  26.         </p>
  28.         <p>
  29.             <div>vue@v-model命令绑定</div>
  30.             <input type="text" v-model="com" :value="com"><span>{{com}}</span>
  31.         </p>
  33.         <p>
  34.             <div>vue@v-model.lazy延迟绑定</div>
  35.             <!-- 回车时才显示 -->
  36.             <input type="text" v-model.lazy="com" :value="com"><span>{{com}}</span>
  37.         </p>
  38.       </div>
  40.     <script>
  41.         const app = Vue.createApp({
  42.             data(){
  43.                 return{
  44.                     com:'',
  45.                 }
  46.             }
  47.         }).mount(".app")
  48.     </script>
  50.   </body>
  51. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行