vue基础

---

1.主要内容

1.模板插值{{}}
2.v-model变量双向绑定
3.v-show：DOM元素的显示与隐藏
4.v-if：DOM元素的渲染与不渲染
5.v-for循环、class样式绑定、style绑定、click绑定
6.子父组件传参props、$emit、$refs：

1)父组件

<template>
  <div style="margin: 15px">
    <div class="item">
      <div style="margin-bottom: 20px">
        1、 当前用户名：{{ userName }},当前时间：{{ date }}
      </div>
      <el-row>
        <el-button @click="getUserName(true)">调用后台接口</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>

    <!-- v-model -->
    <div class="item">
      2、 v-model：
      <el-input style="width: 200px" v-model="inputVal"></el-input>
      <span>{{ inputVal }}</span>
    </div>

    <!-- v-show  -->
    <div class="item">
      3、
      <el-button size="small" type="primary" @click="showVal = !showVal"
        >v-show</el-button
      >
      <span v-show="showVal">这里是v-show</span>
    </div>

    <!--v-if -->
    <div class="item">
      4、
      <el-button
        size="small"
        style="width: 70px"
        type="warning"
        @click="ifVal = !ifVal"
      >
        v-if
      </el-button>
      <span v-if="ifVal">这里是v-if</span>
    </div>

    <!-- v-for class style -->
    <div class="item">
      <div>5、v-for循环、class样式绑定、style绑定、click绑定</div>
      <ul>
        <li
          v-for="(item, index) in forData"
          @click="itemClick(item)"
          :key="index"
          :class="{ red: item.key == 'tj' }"
          :style="{ color: item.key == 'cq' ? '#44bf07' : '' }"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <!-- 子父组件传参 -->
    <div class="item">
      <div style="padding-bottom: 15px">
        6、子父组件传参props、$emit、$refs：
      </div>
      <div style="color: green">
        这里是当前父组件index.vue的内容
        <el-button size="small" type="primary" @click="refClick"
          >通过$refs访问childPage.vue中的内容</el-button
        >
      </div>
      <!-- 显示引用的子组件 -->
      <!-- emit-test子组件内部this.$emit来访问父组件 -->
      <child-page ref="名字随便写" :text="text" @emit-test="emitTest">
        这里是父组件放的slot内容
      </child-page>
    </div>
  </div>
</template>

<script>
// import { defineComponent, ref, onMounted, getCurrentInstance } from "vue";
//导入子组件
import childPage from "./ChildPage.vue";
export default {
  components: {
    "child-page": childPage,
  },
  data() {
    return {
      showVal: true,
      ifVal: true,
      text: "这里是父组件通过props传入的参数",
      inputVal: "123456",
      userName: "",
      date: "",
      forData: [
        { name: "北京市", key: "bj" },
        { name: "天津市", key: "tj" },
        { name: "上海市", key: "sb" },
        { name: "重庆市", key: "cq" },
      ],
    };
  },
  // setup(){ //vue3语法
  //   return {}
  // },
  methods: {
    emitTest(val) {
      //ChildPage.vue中的按钮点击过来的
      this.$message.success("子组件$emit调用父组件方法");
    },
    refClick() {
      //能过refs调用子组件ChildPage.vue
      this.$refs.名字随便写.childTest();
    },
    itemClick(item) {
      // v-for点击事件
      this.$message.success(item.name);
    },
    getUserName(isBtn) {
      //调用后台接口
      this.http.get("api/user/getUserName", {}, false).then((result) => {
        this.userName = result.userName;
        this.date = result.date;
        if (isBtn) {
          this.$message.success("刷新成功");
        }
      });
    },
  },
  created() {
    //页面加载事件
    this.getUserName(false);
  },
  mounted() {
    //页面加载完成事件
    console.log("mounted");
  },
  activated() {
    //页面活动事件，默认所有页面都开启了缓存，如果禁用了缓存此方法不会生效,(可参照前端开发文档上的【禁用缓存】)
    console.log("activated");
  },
};
</script>

<style lang="less" scoped>
.item {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.red {
  color: red;
}
li {
  padding: 2px 0;
  cursor: pointer;
}
button {
  margin-right: 10px;
}
</style>

2)子组件

<template>
  <div style="margin-top: 20px; background: #eee">
    <div>这里是子组件的内容</div>
    <!-- 这里slot表示在父组件中放任意内容显示在此处 -->
    <div>{{ text }}</div>
    <div><slot></slot></div>
    <div>
      <el-button size="small" type="primary" @click="btnClick"
        >通过$emit访问父组件</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    btnClick() {
      this.$emit("emitTest", "这里可以传入参数");
    },
    childTest(){
         this.$message.success("父组件$refs调用父组件方法");
    }
  },
};
</script>
<style lang="less" scoped>
div {
  color: red;
  margin-bottom: 3px;
}
</style>

2.效果图