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.效果图

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 七、动态菜单—递归组件的使用

服务器托管网 layout布局 左侧菜单menu页面刷新后默认高亮 左侧菜单组件 Menu template> template v-for=”(item, index) in menuList” :key=”item.path”> !– 没有子…