课上vue指令全部上机操作
将课上提及的vue指令全部上机操作并发布
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 引入vue框架库 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.active {color: violet;}.desc {text-decoration: underline;}</style><!-- 创建一个节点 --><div class="container"><!-- 使用插值 --><h2>{{title}}</h2><p>{{content}}</p><h3>v-text|v-html|v-once指令</h3><ul><!-- 渲染 tite 变量纯文本 --><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> {{count}}</li><!-- 简写点击事件 count 自增1 --><li @click="addCount"><button>count+1</button> {{count}}</li><!-- 禁止超链接默认访问 --><li><a href="https://php.cn" @click.prevent="addCount">visit {{count}}</a></li><!-- 只执行一次自增，点击第二次，不再 +1 --><li><a href="javascript:;" @click.once="addCount">once {{count}}</a></li><!-- 事件方法 --><li><button @click.stop="handle($event, 1, 2)">click</button> {{handleText}}</li><!-- 双向绑定 --><li><input type="text" :value="site" @input="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.id}} - {{item.name}} - {{item.email}}</li></ul><ul><li v-for="(n, i) in 3" :key="i">{{i}} - {{n}}</li></ul></div><script>// 创建一个vue实例const vue = new Vue({// 配置选项// 挂载点el: '.container',// 数据注入data: {title: 'hello world!',content: '<strong><em>content</em></strong>',style: 'color:red',className: 'active desc',isActive: false,isdesc: true,count: 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.count += 1},handle(ev, a, b) {this.handleText = (`${ev.type} ${a} + ${b} = ${a + b}`);}},});// 返回 hello world!console.log(vue.title);// 改变 vue 实例的属性 titlevue.title = 'hello vue!'// 返回 hello vue!console.log(vue.title);</script></body></html>
