欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

事件,条件,列表渲染,计算属性与侦听器,组件之间的通信

程序员文章站 2022-03-06 12:44:44
...

事件绑定

事件指令v-on:或@
事件修饰符:对当前的行为进行干预
@click.prevent 阻止默认行为
@click.stop阻止冒泡

  1. <div class="app">
  2. <p onclick="alert('hello')">
  3. <a href="https://php.cn" @click.prevent.stop="this.url=$event.target.href">vue1显示网络地址:</a>
  4. <span class="url">{{url}}</span>
  5. </p>
  6. </div>
  1. const app = Vue.createApp({
  2. data() {
  3. return {
  4. url: null,
  5. };
  6. },
  7. }).mount(".app");

列表渲染

v-for,对应原生的for-of
一定要加:key ,为了借助diff算法,key必须要选择永远唯一的值

  1. <div class="app">
  2. <ul>
  3. <li v-for="(user,index) of users" :key="index">{{user.name}}:{{user.email}}</li>
  4. </ul>
  5. </div>
  1. const app = Vue.createApp({
  2. data() {
  3. return {
  4. users: [{
  5. name: "李同学",
  6. email: "li@php.cn",
  7. }, {
  8. name: "张同学",
  9. email: "zhang@php.cn",
  10. }, {
  11. name: "郭同学",
  12. email: "guo@php.cn",
  13. }, ],
  14. };
  15. },
  16. }).mount(".app");

条件渲染

  1. <div class="app">
  2. <p v-if="flag">{{message}}</p>
  3. <button @click="flag=!flag" v-text="flag? '隐藏':'显示'"></button>
  4. <p v-if="point>=1000 && point<2000">{{grade[0]}}</p>
  5. <p v-else-if="point>=2000 && point<3000">{{grade[1]}}</p>
  6. <p v-else-if="point>=3000 && point<4000">{{grade[2]}}</p>
  7. <p v-if="point>=4000 && point<5000">{{grade[3]}}</p>
  8. <p v-else="point<1000">{{grade[4]}}</p>
  9. </div>
  1. const app = Vue.createApp({
  2. data() {
  3. return {
  4. message: "今天是孩子放假的第一天,家里可热闹了",
  5. flag: false,
  6. grade: ["纸片会员", "木头会员", "铁皮会员", "金牌会员", "非会员"],
  7. point: 500,
  8. };
  9. },
  10. }).mount(".app");

计算属性与侦听器

计算属性

  1. computed: {
  2. payAmount: {
  3. get() {
  4. return this.price * this.num;
  5. },
  6. },
  7. }

侦听器属性

  1. watch: {
  2. // current:新值/当前值 origin:原值/旧值
  3. payAmount(current, origin) {
  4. console.log(current, origin);
  5. switch (true) {
  6. case current > 10000 && current < 20000:
  7. this.disAmount = this.payAmount * 0.95;
  8. break;
  9. case current >= 20000 && current < 30000:
  10. this.disAmount = this.payAmount * 0.9;
  11. break;
  12. case current >= 30000 && current < 40000:
  13. this.disAmount = this.payAmount * 0.85;
  14. break;
  15. case current >= 40000:
  16. this.disAmount = this.payAmount * 0.8;
  17. break;
  18. default:
  19. this.disAmount = this.payAmount;
  20. }
  21. this.difAmount = this.payAmount - this.disAmount;
  22. },
  23. },

组件与组件的通信

1 向子组件传参:props:[]
2 子组件向父组件通信
2.1子组件:$emit(customEvent,…args)
2.2父组件:@customEvent

  1. <div class="app">
  2. <!-- vue指令-》自定义属性 -->
  3. <div v-text="'hello'"></div>
  4. <button-counter username="litong" email="lt@qq.cn" @review-count="review"></button-counter>
  5. </div>
  6. <template id="counter">
  7. <button @click="count++">点赞:{{count}}</button>
  8. <p>用户名:{{username}}</p>
  9. <p>邮箱:{{email}}</p>
  10. <!-- $emit(自定义事件,向父级组件传递的参数) -->
  11. <button @click="$emit('reviewCount',this.count)">评价</button>
  12. </template>
  1. const app = Vue.createApp({
  2. methods: {
  3. review(count) {
  4. console.log(count);
  5. if (count >= 20) {
  6. alert("我获得很多赞了");
  7. }
  8. },
  9. },
  10. });
  11. // 注册组件
  12. app.component("ButtonCounter", {
  13. // props:父级向子级传参
  14. props: ["username", "email"],
  15. template: `#counter`,
  16. data() {
  17. return {
  18. count: 0,
  19. };
  20. },
  21. });
  22. app.mount(".app");