vue事件绑定、列表渲染、计算属性与侦听器、组件与组件的通信小结
16lz
2022-03-16
与传参## 1. 事件绑定
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件绑定</title><script src="https://unpkg.com/vue@next"></script></head><body><!-- 复习es6方式 --><p><a href="https://php.cn" onclick="getUrl()">显示连接地址</a><span class="url"></span></p><script>function getUrl() {// 阻止链接默认跳转event.preventDefault();// 获取事件的对象aconst link = event.currentTarget;// 获取a 的兄弟标签，设置标签内容为a 的href属性link.nextElementSibling.textContent = link.href;}</script><!-- vue方式 --><div class="app"><p><!-- 用v-on事件指令，简写@ --><!-- 事件对象event在vue3中为$event --><!-- click事件传递$event对象 --><a href="https://php.cn" v-on:click="showUrl($event)">vue3方式显示连接地址</a><span class="url">{{url}}</span></p><!-- 事件修饰符：对当前事件行为进行干预 --><p><!-- 在事件后加.prevent修饰符，禁用默认行为 --><a href="https://php.cn" @click.prevent="this.url = $event.target.href">vue3事件修饰符方式显示连接地址</a><span class="url">{{url}}</span></p><p onclick="alert('冒泡来了')"><!-- 在事件后加.stop修饰符，阻止冒泡 --><ahref="https://php.cn"@click.prevent.stop="this.url = $event.target.href">vue3事件修饰符方式阻止冒泡显示连接地址</a><span class="url">{{url}}</span></p></div><script>const app = Vue.createApp({data() {return {// 当前值为空url: null,};},// 事件的函数要写在methods属性中methods: {showUrl(ev) {// 传递的参数是事件对象event// 禁用默认行为ev.preventDefault();// this是vue实例，this.url就是占位符{{url}}// target是事件的目标，这里是a标签，取得href属性this.url = ev.target.href;},},}).mount(".app");</script></body></html>
2 列表渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>列表渲染</title><script src="https://unpkg.com/vue@next"></script></head><body><div class="app"><!-- 把数组渲染到页面中 --><ul><!-- 逐一渲染 --><li>1->{{city[0]}}</li><li>2->{{city[1]}}</li><li>3->{{city[2]}}</li></ul><!-- 用vue指令 --><!-- v-for遍历数组 对应js的 for of --><!-- ci为值，index为数组索引，city为要遍历的数组 --><!-- 一定要加:key，为了借助diff算法，提升遍历效率，key必须选择一个永远不重复的值 --><ul><li v-for="(ci,index) of city" :key="index">{{index}}->{{ci}}</li></ul><!-- v-for遍历对象 --><!-- v-for="(值，属性名，数字索引) of 对象" --><ul><li v-for="(value,attrib,index) of users" :key="index">{{attrib}}=>{{value}}</li></ul><!-- v-for遍历数组对象 --><ul><li v-for="(clas,index) of heros" :key="index">{{clas.name}}（{{clas.add}}）</li></ul></div><script>const app = Vue.createApp({data() {return {// 数组city: ["北京", "天津", "上海"],// 对象users: {name: "刀刀",add: "北湖南路",},// 数组对象heros: [{name: "哎哎",add: "北湖北路",},{name: "万里",add: "天津路",},{name: "卡卡",add: "北湖南路",},],};},}).mount(".app");</script></body></html>
3. 条件渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>条件渲染</title><script src="https://unpkg.com/vue@next"></script></head><body><div class="app"><!-- 单条件：if --><!-- 控制显示按钮 --><!-- 判断show值，动态显示按钮文字 --><button @click="show=!show" v-text="show?'隐藏':'显示'"></button><!-- 判断show变量是否为真，显示msg --><p v-if="show">{{msg}}</p><!-- 多条件：if else if else if else --><p v-if="point < 2000">{{garde[0]}}</p><p v-else-if="point>=2000 && point < 3000">{{garde[1]}}</p><p v-else-if="point>=3000 && point < 4000">{{garde[2]}}</p><p v-else-if="point>=4000 && point < 5000">{{garde[3]}}</p><p v-else="point>=5000">{{garde[4]}}</p></div><script>const app = Vue.createApp({data() {return {msg: "这是根据条件控制显示的文字。",show: "false",garde: ["勇者", "勇士", "圣斗士", "齐天大圣", "斗战胜佛"],point: 2000,};},}).mount(".app");</script></body></html>
4. 键盘修饰符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>todolist: 键盘修饰符</title><script src="https://unpkg.com/vue@next"></script></head><body><div class="app"><label for="msg">留言：</label><!-- 键盘修饰符：事件后加.enter就是按下回车键时 --><input type="text" id="msg" @keydown.enter="showMsg($event)" /><ul><li v-for="(value,index) of msg" :key="index">{{value}}</li></ul></div><script>const app = Vue.createApp({data() {return {// 定义变量存贮留言msg: [],};},methods: {showMsg(ev) {// 在数组msg前面放入留言：当前事件对象的值this.msg.unshift(ev.currentTarget.value);// 清空输入框ev.currentTarget.value = null;},},}).mount(".app");</script></body></html>
5. 计算属性与侦听器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>计算属性,侦听器</title><script src="https://unpkg.com/vue@next"></script><style>.selectAll {margin-top: 1em;margin-left: 0.7em;}.selectAll *:hover {cursor: pointer;}.shopingList {padding: 0;width: 35em;background-color: lightskyblue;}.shopingList > li {width: 35em;display: grid;grid-template-columns: repeat(5, 5fr);border-bottom: 1px solid rgb(12, 63, 105);}.shopingList > li:nth-of-type(1) {color: #eee;background-color: rgb(12, 63, 105);}h4,span {margin: 0.2em 0.6em;}h4 {padding: 0.3em 0;}input[type="number"] {width: 70%;outline: none;}</style></head><body><div class="app"><ul class="shopingList"><li><h4>品名</h4><h4>数量</h4><h4>单位</h4><h4>单价（元）</h4><h4>金额（元）</h4></li><li><span>{{goods[0]}}</span><span><input type="number" class="num" v-model="num" /></span><span>{{goods[1]}}</span><span>{{goods[2]}}</span><!-- 计算属性sum --><span>{{sum}}</span></li></ul></div><script>const app = Vue.createApp({data() {return {goods: ["V2面膜", "个", 30],num: 0,};},// 计算属性放在computed属性中computed: {sum: {// 用get方法，就是js访问器属性get() {return this.goods[2] * this.num;},},},// 侦听器属性：侦听计算属性的变化watch: {// 计算属性（新值，旧值）sum(now, old) {console.log(now, old);},},// mounted方法：当vue实例加载完成后调用方法（类似js的onload）mounted() {// 初始化numthis.num = 1;},}).mount(".app");</script></body></html>
6. 组件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>组件:全局组件</title><script src="https://unpkg.com/vue@next"></script></head><body><div class="app"><!-- vue指令：就是html的自定义属性 --><div v-text="'你好'"></div><!-- vue组件：就是自定义标签 --><!-- 要在vue实例中注册 --><!-- 注册命名为驼峰式MyBotton，在html中要改为蛇形my-botton --><!-- 定义组件自定义属性username和email，向子组件template中传参 --><!-- @evaluate：订阅子组件定义的事件evaluate，接收子组件传来的参数counter，执行eval函数 --><My-Bottonusername="管理员"email="admin@163.com"@evaluate="eval"></My-Botton></div><!-- 在标签template中定义组件内容，根据id绑定vue实例 --><template id="counter"><!-- 点击时变量+1 --><button @click="counter++">点赞：{{counter}}</button><!-- 使用组件自定义属性， --><h4>用户：{{username}}</h4><h4>邮箱：{{email}}</h4><!-- 与父组件My-Botton通信 --><!-- 用$emit发布订阅 --><!-- $emit("自定义事件名",向父组件传参数) --><!-- 点击按钮时，发布订阅，定义evaluate事件，传递counter参数 --><button @click="$emit('evaluate',this.counter)">评价</button></template><script>// 创建vue实例，组件要延迟挂载，mount方法分开在注册组件后面写const app = Vue.createApp({// 父组件的函数eval要在这里定义methods: {eval(count) {if (count >= 25) {alert("达标了！");} else {alert("未达标！");}},},});// 注册组件，用component方法注册MyBotton，// component("注册组件名称",{组件行为，即方法},data(){return{组件数据}})app.component("MyBotton", {// 绑定id为counter的template，这样就可在template标签中定义组件内容template: "#counter",// 向子组件传参用props，父组件My-Botton向子组件（template标签中）传username和email// 组件中的自定义属性用props创建，就可使用props: ["username", "email"],data() {return {// 定义变量，初化为0counter: 0,};},});// 绑定挂载点.appapp.mount(".app");</script></body></html>
小结：
- 父组件向子组件传参：在注册组件方法中，用props:定义父组件的参数，多个参数用数组，就可在子组件中使用参数。
- 子组件与父组件通信：
— 在模板中的子组件用$emit发布订阅”事件名”，传递子组件”参数”
— 在父组件中使用订阅事件 @事件名，定义函数接受参数。
更多相关文章
- Android通过PopupMenu定义弹出菜单的位置
- android实现双击事件的监听
- Android解析微博小尾巴
- Android之Widget
- android使用Intent操作拨打号码发送短信
- RN项目结构、页面组件分析
- android WebView 应用内点击超链接不调用系统浏览器
- Android触摸事件的传递（八）-View
- Android(安卓)widget组件（一）：Button、 EditText、TextView