Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vue基础指令实例演示
Blogger Information
Blog 47
fans 3
comment 0
visits 38270
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
569 people have browsed it

vue基础指令实例演示

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