Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 课上vue指令全部上机操作
Blogger Information
Blog 70
fans 1
comment 0
visits 53101
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
课上vue指令全部上机操作
葡萄枝子
Original
658 people have browsed it

课上vue指令全部上机操作

将课上提及的vue指令全部上机操作并发布

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <!-- 引入vue框架库 -->
  12.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.     <style>
  15.         .active {
  16.             color: violet;
  17.         }
  19.         .desc {
  20.             text-decoration: underline;
  21.         }
  22.     </style>
  23.     <!-- 创建一个节点 -->
  24.     <div class="container">
  25.         <!-- 使用插值 -->
  26.         <h2>{{title}}</h2>
  27.         <p>{{content}}</p>
  28.         <h3>v-text|v-html|v-once指令</h3>
  29.         <ul>
  30.             <!-- 渲染 tite 变量纯文本 -->
  31.             <li v-text="title"></li>
  32.             <!-- 渲染 content 变量为html -->
  33.             <li v-html="content"></li>
  34.             <!-- 只渲染一次，后面改变实例的属性 title 就不再显示 -->
  35.             <li v-once="title">{{title}}</li>
  36.         </ul>
  37.         <h3>绑定属性|事件</h3>
  38.         <ul>
  39.             <!-- 内联样式 -->
  40.             <li v-once v-bind:style="style">{{title}}</li>
  41.             <!-- 绑定css类 -->
  42.             <li v-once v-bind:class="className">{{title}}</li>
  43.             <!-- 简写方式绑定css类 -->
  44.             <li v-once :class="className">{{title}}</li>
  45.             <!-- 简写数组方式绑定css类 -->
  46.             <li v-once :class="[`active`, `desc`]">{{title}}</li>
  47.             <!-- 简写对象方式绑定css类 -->
  48.             <li v-once :class="{active: false, desc: true}">{{title}}</li>
  49.             <!-- 简写对象方式，含变量绑定css类 -->
  50.             <li v-once :class="{active: isActive, desc: isdesc}">{{title}}</li>
  52.             <!-- 点击 count 变量 +1 -->
  53.             <li v-on:click="addCount"><button>count+1</button> {{count}}</li>
  54.             <!-- 简写点击事件 count 自增1 -->
  55.             <li @click="addCount"><button>count+1</button> {{count}}</li>
  56.             <!-- 禁止超链接默认访问 -->
  57.             <li><a href="https://php.cn" @click.prevent="addCount">visit {{count}}</a></li>
  58.             <!-- 只执行一次自增，点击第二次，不再 +1 -->
  59.             <li><a href="javascript:;" @click.once="addCount">once {{count}}</a></li>
  61.             <!-- 事件方法 -->
  62.             <li><button @click.stop="handle($event, 1, 2)">click</button> {{handleText}}</li>
  64.             <!-- 双向绑定 -->
  65.             <li><input type="text" :value="site" @input="site=$event.target.value"> {{site}}</li>
  66.             <!-- 双向绑定，回车后同步 -->
  67.             <li><input type="text" v-model.lazy="site"> {{site}}</li>
  68.         </ul>
  70.         <ul>
  71.             <!-- 设置唯一 key 让vue不需要重复渲染 -->
  72.             <!-- 渲染数组 -->
  73.             <li v-for="(item, index) in items" :key="index">{{index}} - {{item}}</li>
  74.         </ul>
  76.         <ul>
  77.             <!-- 渲染对象 -->
  78.             <li v-for="(item, prop, index) in user" :key="prop">{{prop}} - {{index}} - {{item}}</li>
  79.         </ul>
  81.         <ul>
  82.             <!-- 渲染对象数组 -->
  83.             <li v-for="(item, index) in users" :key="item.id">{{index}} - {{item.id}} - {{item.name}} - {{item.email}}
  84.             </li>
  85.         </ul>
  87.         <ul>
  88.             <li v-for="(n, i) in 3" :key="i">{{i}} - {{n}}</li>
  89.         </ul>
  91.     </div>
  94.     <script>
  95.         // 创建一个vue实例
  96.         const vue = new Vue({
  97.             // 配置选项
  98.             // 挂载点
  99.             el: '.container',
  100.             // 数据注入
  101.             data: {
  102.                 title: 'hello world!',
  103.                 content: '<strong><em>content</em></strong>',
  104.                 style: 'color:red',
  105.                 className: 'active desc',
  106.                 isActive: false,
  107.                 isdesc: true,
  108.                 count: 0,
  109.                 handleText: 'handle',
  110.                 site: 'php.cn',
  111.                 // 数组
  112.                 items: ["合肥", "苏州", "杭州"],
  113.                 // 对象
  114.                 user: {
  115.                     name: "天蓬",
  116.                     email: "tp@php.cn",
  117.                 },
  118.                 //   对象数组, 数据表的查询结果就是一个二个这样的二维的JSON
  119.                 users: [
  120.                     { id: 1, name: "天蓬", email: "tp@php.cn" },
  121.                     { id: 2, name: "灭绝", email: "mj@php.cn" },
  122.                     { id: 3, name: "西门", email: "xm@php.cn" },
  123.                 ],
  124.             },
  125.             // 注册方法
  126.             methods: {
  127.                 addCount: function () {
  128.                     return this.count += 1
  129.                 },
  130.                 handle(ev, a, b) {
  131.                     this.handleText = (`${ev.type} ${a} + ${b} = ${a + b}`);
  132.                 }
  133.             },
  134.         });
  136.         // 返回 hello world!
  137.         console.log(vue.title);
  139.         // 改变 vue 实例的属性 title
  140.         vue.title = 'hello vue!'
  141.         // 返回 hello vue!
  142.         console.log(vue.title);
  143.     </script>
  145. </body>
  147. </html>

vue指令

vue指令2

Correcting teacher：天蓬老师天蓬老师

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