ASCII码 ASCII码

vue常用术语、常用指令实例演示

发布于：2022-01-17 09:43:27  栏目：技术文档

vue 常用术语

  • vue 安装,推荐 cdn:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  • 挂载点:vue 实例的作用域,个人理解为容器
  • vue 实例，Vue.createApp({}）=>创建 vue 实例,括号中配置项为对象字面量，app.mount 将 vue 实例与页面中的挂载点元素绑定
  • 数据注入:通过访问器属性来实现
  • 响应式:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  11.   <body>
  12.     <!-- 1. 挂载点  -->
  13.     <div class="app">
  14.       <p>用户名: {{username}}</p>
  15.     </div>
  17.     <script>
  18.       // 2. vue 实例
  19.       const app = Vue.createApp({
  20.         // vue中的变量/数据全部写到data方法中
  21.         data() {
  22.           return {
  23.             username: "Help",
  24.           };
  25.         },
  26.       }).mount(".app"); // 默认调用，document.querySelector方法
  27.       // 将vue实例与页面中的挂载点元素绑定
  28.       // app.mount(document.querySelector(".app"))
  29.       console.log(app);
  31.       // 3. 数据注入
  32.       console.log(app.$data.username);
  33.       console.log(app.username);
  35.       // 用访问器属性来实现
  36.       const obj = {
  37.         $data: {
  38.           email: "Help10086@foxmail.com",
  39.         },
  41.         // 访问器属性
  42.         get email() {
  43.           return this.$data.email;
  44.         },
  45.       };
  46.       console.log(obj.$data.email);
  47.       console.log(obj.email);
  49.       // 4. 响应式,避免在原代码中修改
  50.       app.username = "DASHU";
  51.     </script>
  52.   </body>
  53. </html>

vue 常用指令演示

  • vue 指令: v-为前缀的一组指令,写到 html 标签的属性位置上,本质上讲就是”自定义属性”
  • v-text 相当于 textContent，内容必须是 JS 代码
  • v-html 相当于 innnerHTML，内容必须是 JS 代码
  • v-once 只渲染一次，类似常量
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>v-text,v-html,v-once</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  11.   <body>
  12.     <!-- vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是"自定义属性" -->
  13.     <div class="app">
  14.       <p>用户名: {{username}}</p>
  15.       <!-- v-text 相当于 textContent，内容必须是JS代码  -->
  16.       <p>用户名: <span v-text="username"></span></p>
  17.       <!-- v-html 相当于 innnerHTML -->
  18.       <p>用户名: <span v-html="username"></span></p>
  19.       <!-- v-once: 只渲染一次 -->
  20.       <p>用户名: <span v-once="username"></span></p>
  21.     </div>
  23.     <script>
  24.       const app = Vue.createApp({
  25.         data() {
  26.           return {
  27.             username: "10086",
  28.           };
  29.         },
  30.       }).mount(".app");
  32.       app.username = '<span style="color:red">500</span>';
  34.       app.username = "1000";
  35.     </script>
  36.   </body>
  37. </html>

[http://help10086.cn/0113/demo3.html]

样式绑定

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  9.     <style>
  10.       .active {
  11.         color: red;
  12.       }
  14.       .bgc {
  15.         background-color: lightgreen;
  16.       }
  17.     </style>
  18.   </head>
  20.   <body>
  21.     <div class="app">
  22.       <!-- 一: 样式绑定 v-bind, 简化: 冒号 -->
  23.       <!-- 行内样式 style -->
  24.       <p style="color: #ff0000">help10086.cn</p>
  25.       <p v-bind:style="style">help10086.cn</p>
  27.       <p style="color: #0000ff; background-color: #ffff00">help10086.cn</p>
  28.       <p :style="{color: textColor, backgroundColor: bgColor}">help10086.cn</p>
  29.       <!-- <button style="前面三个是基本样式,后面三个是定制样式"></button> -->
  30.       <button :style="[btnBase, btnCustom]">提交</button>
  32.       <!-- class样式 -->
  33.       <p :class="active">hello word!</p>
  34.       <p :class="{'active':isActive}">hello texhong!</p>
  35.       <p :class="['active', 'bgc']">hello jinyu!</p>
  36.       <p :class="[active , bgc]">hello viet nam!</p>
  37.     </div>
  39.     <script>
  40.       const app = Vue.createApp({
  41.         data() {
  42.           return {
  43.             style: "color:#0000ff",
  45.             textColor: "#008000",
  46.             bgColor: "#00ffff",
  48.             btnBase: {
  49.               width: "5em",
  50.               height: "2em",
  51.               border: "none",
  52.             },
  53.             btnCustom: {
  54.               backgroundColor: "seagreen",
  55.               color: "#ffffff",
  56.               cursor: "pointer",
  57.             },
  59.             active: "active",
  60.             isActive: false,
  62.             bgc: "bgc",
  63.           };
  64.         },
  65.       }).mount(".app");
  66.     </script>
  67.   </body>
  68. </html>

[http://help10086.cn/0113/demo4.html]

双向绑定

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>双向绑定</title>
  9.     <script src="https://unpkg.com/vue@next"></script>
  10. </head>
  12. <body>
  13.     <!-- es6  -->
  14.     <p>
  15.         <div>es6:</div>
  16.         <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
  17.     </p>
  19.     <!-- vue  -->
  20.     <div class="app">
  21.         <p>
  22.             <div>vue@input</div>
  23.             <!-- vue中的事件对象,使用 $event , 不能直接用 event  -->
  24.             <input type="text" v-on:input="comment = $event.target.value" :value="comment"><span>{{comment}}</span>
  25.         </p>
  27.         <p>
  28.             <div>vue@v-model</div>
  29.             <!-- vue中的事件对象,使用 $event , 不能直接用 event  -->
  30.             <input type="text" v-model="comment" :value="comment"><span>{{comment}}</span>
  31.         </p>
  33.         <!-- 延迟绑定 -->
  34.         <p>
  35.             <div>vue@v-model.lazy</div>
  36.             <input type="text" v-model.lazy="comment" :value="comment"><span>{{comment}}</span>
  37.         </p>
  38.     </div>
  40.     <script>
  41.         const app = Vue.createApp({
  42.             data() {
  43.                 return {
  44.                     comment: ''
  45.                 }
  46.             }
  47.         }).mount('.app')
  48.     </script>
  49. </body>
  50. </html>

[http://help10086.cn/0113/demo5.html]

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行