今天所学心得、笔记
1、挂载点，v-text,v-once,v-html，v-bind,v-on的使用
示例截图
示例代码
<body><div class="app" onclick="alert(this.tagName)"> <p>用户名：{{username}}</p> <p>100 + 200 = {{100+ 200}}</p> <p>{{flag ? '前往取经' : '呆在流沙河'}}</p>3 <p>-------------------------- v-text,v-once,v-html ----------------------------</p> <p v-text="plan1"></p> <p v-once="plan1"></p> <p v-text="plan2"></p> <p v-html="plan2"></p> <p>--------------- v-bind,v-on, 绑定style属性, 绑定类class属性 --------------------</p> <p v-bind:style="style1">用户名：{{username}}</p> <p :style="`color:pink`">用户名：{{username}}</p> <p :class="`blue bigger`">计划任务：{{plan1}}</p> <p :class="class1">计划任务：{{plan3}}</p> <p :class="{blue: isBlue, bigger: isBigger}">计划任务：{{plan1}}</p> <p><a href="https://www.php.cn" v-on:click="show"> 显示网站名称 1 (会跳转到网站) </a></p> <!-- .prevent, 阻止a标签的默认跳转行为 --> <p><a href="https://www.php.cn" @click.prevent="show"> 显示网站名称 2 (不跳转到网站) </a></p> <!-- .stop, 阻止冒泡 --> <p><a href="#" @click.stop="show">显示网站名称 3 (阻止冒泡)</a></p> <!-- .once 仅允许执行一次 --> <p><a href="#" @click.once="show">显示网站名称 4 (仅执行一次)</a></p></div><script src="vue.js"></script><script> const vm = new Vue({ // 挂载点 el: '.app', // 数据注入 data: { username: "卷帘大将", plan1: '高老庄取媳妇', plan2: '大闹盘丝洞', plan3: '智取黑风岭', flag : true, style1: 'color:red', class1: 'blue bigger', isBlue: true, isBigger: false, site: 'php中文网', }, methods: { show() { // this: 就是当前的vue实例对象 alert(this.site); } } }); vm.plan2 = '<em style="color:red">大闹盘丝洞</em>';</script></body>
2、v-model， v-for的使用
示例截图
示例代码
<body><div class="app"> <p>---------------------- v-model，双向数据绑定 ----------------------------</p> <p>来者何人：{{username}}</p> <p>数据类型：{{typeof username}}</p> <p>双向数据绑定：<input type="text" v-model="username"></p> <!--懒加载--> <p>双向数据绑定（懒加载）：<input type="text" v-model.lazy="username"></p> <!--转数字类型输出--> <p>双向数据绑定（数字类型输出）：<input type="text" v-model.number="username"></p> <p>--------------------------- v-for 循环 ----------------------------------</p> <!-- key: 可以干预diff算法 --> <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 --> <!-- key只能是整数或不重复的字符串 --> <ul> <li v-for="(item, index) in items" :key="index">{{index}}---{{item}}</li> </ul> <ul> <li v-for="(item, prop, index) in user" :key="prop">{{index}}---{{prop}}---{{item}}</li> </ul> <ul> <li v-for="(user, index) in users" :key="user.id">{{user.id}}---{{user.name}}---{{user.email}}</li> </ul> <span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span></div><script src="vue.js"></script><script> const vm = new Vue({ // 挂载点 el: '.app', // 数据注入 data: { username: "卷帘大将", // 数组 items: ["合肥", "苏州", "杭州"], // 对象 user: { name: "天蓬", email: "tp@php.cn", }, // 对象数组, 数据表的查询结果就是一个二个这样的二维的JSON users: [ { id: 1, name: "天蓬", email: "tp@php.cn" }, { id: 2, name: "灭绝", email: "mj@php.cn" }, { id: 3, name: "西门", email: "xm@php.cn" }, ], } });</script></body>
