vue基础指令实例演示
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课上vue指令上机操作</title><style>.active {color: violet;}.desc {text-decoration: underline;}</style></head><body><!-- 引入vue框架 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div class="app"><!-- 使用插值 --><h2>{{title}}</h2><p>{{content}}</p><h3>v-text/v-html/v-once指令</h3><ul><!-- 渲染title变量纯文本 --><li v-text="title"></li><!-- 渲染content变量为html --><li v-html="content"></li><!-- 只渲染一次，后面改变实例的属性title就不再显示 --><li v-once="title">{{title}}</li></ul><h3>绑定属性/事件</h3><ul><!-- 内联样式 --><li v-once v-bind:style="style">{{title}}</li><!-- 邦定css类 --><li v-once v-bind:class="className">{{title}}</li><!-- 简写方式绑定css --><li v-once :class="className">{{title}}</li><!-- 简写数组方式绑定css --><li v-once :class="[`active`,`desc`]">{{title}}</li><!-- 简写对象方式绑定css --><li v-once :class="{active:false,desc:true}">{{title}}</li><!-- 简写对象方式，含变量绑定css --><li v-once :class="{active:isActive,desc:isdesc}">{{title}}</li><!-- 点击count变量+1 --><li v-on:click="addCount"><button>count+1</button> {{conut}}</li><!-- 简写点击事件count自增 --><li @click="addCount"><button>count+1</button> {{conut}}</li><!-- 禁止超链接默认访问 --><li><a href="https://php.cn" @click.prevent="addCount">php中文网 {{conut}}</a></li><!-- 只执行一次自增，点第二次不再+1 --><li><a href="JavaScript:" @click.once="addCount">php中文网 {{conut}}</a></li><!-- 事件方法 --><li><button @click.stop="handle($event, 1, 2)">click</button> {{handleText}}</li><!-- 双向绑定 --><li><input type="text" :value="site" @inpit="site=$event.target.value">{{site}}</li><!-- 双向绑定，回车后同步 --><li><input type="text" v-model.lazy="site">{{site}}</li></ul><ul><!-- 设置唯一key让vue不需要重复渲染 --><!-- 渲染数组 --><li v-for="(item,index) in items" :key="index">{{index}}---{{item}}</li></ul><ul><!-- 渲染对象 --><li v-for="(item,prop,index) in user" :key="prop">{{prop}}---{{index}}---{{item}}</li></ul><ul><!-- 渲染对象数组 --><li v-for="(item,index) in users" :key="item.id">{{index}}---{{item.name}}---{{item.email}}</li></ul><ul><li v-for="(n,i) in 6">{{i}}---{{n}}</li></ul></div><script>// 创建一个vue实例const vm = new Vue({// 挂载点el: '.app',// 数据注入data: {title: 'Hello Wrold!',content: '<strong><em>content</em></strong>',style: 'color:red',className: 'active desc',isActive: false,isdesc: true,conut: 0,handleText: 'handle',site: 'php.cn',// 数组items: ["电脑", "手机", "笔记本"],// 对象user: {name: "天蓬",email: "tp@php.cn",},// 对象数组, 数据表的查询结果就是一个二个这样的二维的JSONusers: [{ id: 1, name: "天蓬", email: "tp@php.cn" },{ id: 2, name: "灭绝", email: "mj@php.cn" },{ id: 3, name: "西门", email: "xm@php.cn" },],},// 注册方法methods: {addCount: function () {return this.conut += 1},handle(ev, a, b) {this.handleText = (`${ev.type} ${a} + ${b} = ${a + b}`);}},})// 返回hello worldconsole.log(vm.title);// 改变vm实例的属性titlevm.title = "天蓬大人";console.log(vm.title);</script></body></html>
