事件绑定、组件、路由实例演示

发布于：2022-05-17 12:17:59  栏目：技术文档

1、v-on:绑定事件

<template>
  <div>我是：{{ name }}</div>
  <div>
    <div>{{ name }} +{{ name2 }}</div>
    <div>{{ num1 + num2 }}</div>
  </div>
  <div>
    <!-- 1、v-on:绑定事件 -->
    <!-- 点击事件、键盘事件、回车键事件 -->
    <!-- 语法糖@ -->
    <button v-on:click="fun('liyufeng', 1)">按钮1</button>
    <button @click="fun('liuqiang', 2)">按钮2</button>
  </div>
  <div @click="one()">
    第一层
    <div @click="two()">
      第二层
      <div @click.stop="three()">第三层（.stop阻止冒泡）</div>
    </div>
  </div>
  <!-- 2、流程 :v-if , v-show-->
  <!-- 3、v-if , v-show 效果一样，代码显示不一样 -->
  <div>
    <button @click="fun1()">按钮:显示 or 隐藏</button>
    <div v-if="is">v-if:显示 or 隐藏</div>
    <div v-show="is">v-show:显示 or 隐藏</div>
  </div>
  <div>
    <!-- 4、v-else v-else-if -->
    <button @click="fun2()">按钮:显示 or 隐藏</button>
    <div v-if="is == 1">李磊</div>
    <div v-else-if="is == 2">黄晓明</div>
    <div v-else>韩梅梅</div>
  </div>
  <div>
    <!-- 5、循环：v-for   -->
    <div v-for="item in yjz" v-bind:key="item">{{ item }}</div>
  </div>
</template>
<script>
//JS代码
export default {
  data() {
    return {
      name: "vue",
      name2: "php",
      num1: 20,
      num2: 10,
      is: false,
      yjz: ["李sir", "刘sir"],
    };
  },
  methods: {
    fun(e, ee) {
      console.log(e, ee);
      console.log("方法1");
    },
    // v-if
    fun1() {
      this.is = !this.is;
    },
    fun2() {
      if (this.is == 2) {
        this.is = 0;
      } else {
        this.is = this.is + 1;
      }
    },
    // 冒泡
    one() {
      console.log("第一层");
    },
    two() {
      console.log("第二层");
    },
    three() {
      console.log("第三层");
    },
  },
};
</script>
<style></style>

2、组件演示

App.vue代码

<template>
  <div>
    <!-- 6、组件   -->
    <OneComVue title="我是通过组件属性传的值"></OneComVue>
    <OneComVue :title="title"></OneComVue>
    <OneComVue :title="arr"></OneComVue>
    <OneComVue :title="obj"></OneComVue>
    <TwoComVue :title="title"></TwoComVue>
  </div>
</template>
<script>
// 组件导入
import OneComVue from "./components/OneCom.vue";
import TwoComVue from "./components/TwoCom.vue";
//JS代码
export default {
  components: {
    OneComVue: OneComVue,
    // OneComVue,
    TwoComVue: TwoComVue,
  },
  data() {
    return {
      title: "我是通过OneComVue组件传的值",
      arr: ["数学", "语文", "英语"],
      obj: {
        shuxue: "数学",
        yuwen: "语文",
        yingyu: "英语",
      },
    };
  },
};
</script>
<style></style>

OneCom.vue代码

<template>
  <div>这是组件OneCom，通过属性传值：{{ title }}</div>
</template>
<script>
export default {
  name: "OneCom",
  //属性传值，title是变量
  props: ["title"],
};
</script>

3、路由演示

App.vue

<template>
  <div>
    <!-- router-link 路由跳转的标签，和a标签一样 -->
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于我们</router-link> |
    <router-link to="/user">会员中心</router-link>
  </div>
  <!-- router-view 路由的展示区 -->
  <router-view />
</template>
<script></script>
<style></style>

index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import UserView from "../views/UserView.vue";
const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/user",
    name: "user",
    component: UserView,
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
export default router;

UserView.vue

<template>
  <div class="about">
    <h1>This is an User page</h1>
  </div>
</template>

相关推荐