vue基础

 v-if v-show v-model

<template>
  <div>
    <!-- 引入css样式 -->
    <h1 class="hellow">你好Vue</h1>
    <!-- 条件判断 -->
    <p :class="{ x1: count > 1 }">{{ count }}</p>
    <!-- color2变量,给color颜色赋值 -->
    <p :style="{ color: color2 }">{{ a }}</p>
    <!-- 自定义初始化颜色 -->
    <p style="color: skyblue">count2:{{ count ? "小白" : "小兰" }}</p>
    <!-- 事件 -->
    <button @click="onClick">加</button>
    <!-- 判断 -->
    <p v-if="count === 0">1111</p>
    <p v-else-if="count === 1">2222</p>
    <p v-else>3333</p>
    <!-- 是否显示,v-show是开始就已经渲染了 -->
    <p v-show="show">展示 v-show</p>
    <ul>
      <!-- 循环渲染 -->
      <template v-for="(v, i) in arr">
        <li :key="i">数组:{{ v }}</li>
      </template>
    </ul>
    <ul>
      <template v-for="(v, i) in obj">
        <li :key="i">对象:{{ v }}</li>
      </template>
    </ul>
    <!-- v-model 双向绑定 .trim是去掉空格 -->
    <input type="text" v-model.trim="input" @input="onInput" />
    <h1>input : {{ input }}</h1>
    <input type="checkbox" id="jack" value="Jack" v-model="x1" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="x1" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="x1" />
    <label for="mike">Mike</label>
    {{ x1 }}

    <button @click="onChange">改变input</button>
  </div>
</template>

<script>
import "./index.less";
export default {
  data() {
    return {
      count: 0,
      a: 1,
      color2: "blue",
      show: true,
      arr: ["1", "2", "3", "4"],
      obj: {
        username: "小红",
        age: 14,
        city: "哈尔滨",
      },
      input: "",
      x1: [],
    };
  },
  methods: {
    onClick() {
      this.count++;
    },
    onChange() {
      this.input++;
    },
    onInput() {
      console.log(this.input.length, "input");
    },
  },
};
</script>

父子组件传值

父组件:

<template>
  <div>
    <Child :obj="obj" :onClick="onClick" @xxx="onClick2" />
  </div>
</template>

<script>
// css
import "./index.less";
// 子组件
import Child from "./Child";
export default {
  data() {
    return {
      obj: {
        user: "小花",
      },
      num: 25,
    };
  },
  methods: {
    onClick(res) {
      console.log("res", res);
    },
    onClick2(res) {
      console.log("child", res);
    },
  },
  components: {
    // 注册子组件
    Child,
  },
};
</script>

子组件:

<template>
  <div>
    <h1>对象:{{ obj }}</h1>
    <button @click="onClick(ur)">向父组件传递参数</button>
    <button @click="onClick2">emit传值</button>
  </div>
</template>

<script>
// css
import "./index.less";
export default {
  // 接收父组件传递的参数
  props: ["obj", "onClick"],
  data() {
    return {
      ur: "aaa",
    };
  },
  //   componentDidMound 页面元素渲染完成的钩子
  mounted() {},
  methods: {
    onClick2() {
      // this.$emit(key,参数)
      this.$emit("xxx", {
        age: 25,
      });
    },
  },
};
</script>

watch监听,深度监听

<template>
  <div>
    <h1>{{ xxx }}</h1>
    <h1>{{ obj.user }}</h1>
    <button @click="onClick1">改变Num1</button>
    <button @click="onClick2">改变Num2</button>
    <button @click="onClick3">改变obj</button>
  </div>
</template>

<script>
// css
import "./index.less";
export default {
  data() {
    return {
      xxx: "",
      num1: 0,
      num2: 0,
      obj: {
        user: "小花",
      },
    };
  },
  methods: {
    onClick1() {
      this.num1++;
    },
    onClick2() {
      this.num2++;
    },
    onClick3() {
      this.obj.user = "小蓝";
    },
  },
  // 监听
  watch: {
    // 监听num1,num1发生改变则调用
    num1(newValue, preValue) {
      console.log("num1", newValue, preValue);

      console.log("num1", this.num1, this.num2);
      this.xxx = `${this.num1}万 - ${this.num2}万`;
    },
    num2(newValue, preValue) {
      console.log("num2", newValue, preValue);
      this.xxx = `${this.num1}万 - ${this.num2}万`;
    },
    obj: {
      handler(val, oldVal) {
        // 前后值一样
        console.log("val", val);
        console.log("oldVal", oldVal);
      },
      // 深度监听
      deep: true,
    },
  },
  components: {},
};
</script>

computed计算属性,ref获取dom

<template>
  <div>
    <h1>num1:{{ num1 }}</h1>
    <h1>num2:{{ num2 }}</h1>
    <h1>obj:{{ obj }}</h1>
    <h1>xxx:{{ xxx }}</h1>
    <button @click="onClick1">改变num1</button>
    <button @click="onClick2">改变num2</button>
    <button @click="onClick3">改变obj</button>

    <!-- xss 注入 防止通过注入死循环进攻页面-->
    <div v-html="h1"></div>
    <!-- 绑定ref 获取dom元素 -->
    <div ref="d1">ref Dom</div>
    <!-- 过滤器 -->
    <div :xxx="x2()">{{ x1() }}</div>
    <!-- 获取子组件Dom -->
    <Child ref="a2" />
  </div>
</template>

<script>
import Child from "./Child";
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      obj: { user: "小花", age: 17 },
      h1: "<h1>小字</h1>",
    };
  },
  mounted() {
    console.log("zzz", this.$refs);
    // 打印子组件zzz方法
    this.$refs.a2.zzz();
    console.log("refs", this.$refs.d1);
  },
  methods: {
    onClick1() {
      this.num1++;
    },
    onClick2() {
      this.num2++;
    },
    onClick3() {
      this.obj.user = "小白";
    },
    x1() {
      return { user: this.obj.user };
    },
    x2() {
      return this.obj.user;
    },
  },
  computed: {
    xxx() {
      // s首次渲染就会执行 会缓存元素,必须有return
      return `${this.num1}万-${this.num2}万=${this.obj.user}`;
    },
  },
  components: {
    Child,
  },
};
</script>