Vue的常用语法

<template>
  <div>
    <!-- 1.2插值表达式 -->
    <p>{{ title }}</p>
    <p>{{ 1 + 2 + 3 }}</p>
    <p>{{ 1 > 2 ? "对" : "错" }}</p>
    <p>{{ output() }}</p>
    <p>{{ output() }}</p>
    <p>{{ output() }}</p>
    <p>{{ outputComputed }}</p>
    <p>{{ outputComputed }}</p>
    <p>{{ outputComputed }}</p>

    <!-- 4. 指令 -->
    <p v-text="htmlContent"></p>
    <p v-html="htmlContent"></p>
    <!-- 渲染指令 -->
    <p v-for="(item, key, index) in obj">
      v-for渲染指令{{ item }}{{ key }}{{ index }}
    </p>

    <p v-if="myBool">v-if标签</p>
    <p v-show="myBool">v-show标签</p>
    <!-- 事件指令@click ,v-on的缩写@ -->
    <button @click="btnT1">测试按钮</button>
    <button @click="btnT2">v-if测试</button>
    <button @click="btnT3">Ref测试</button>
    <!-- 属性指令 -->
    <p :title="title">这是属性指令</p>
    <!-- 表单指令 使用v-model双向绑定-->
    <input type="text" v-model="inputValue" />
    <p v-text="inputValue"></p>
    <p>{{ inputValue }}</p>
    <!-- 引用ref替代选择器selector -->
    <p v-text="inputValue" ref="pRef" :data-refData = "this.myInt"></p>
    <!-- 5,修饰符 -->
    <input type="text" v-model.trim="inputValue">
  </div>
</template>

<script>
export default {
  //1, 响应式数据与插值表达式
  data() {
    return {
      title: 0,
      content: "这是内容文本",
      htmlContent: "这是一个<span>span</span>标签",
      arr: ["a", "b", "c", "d"],
      obj: { a: 10, b: 30, c: 20 },
      myBool: true,
      inputValue: "默认内容",
      myInt :1,
    };
  },
  //1.3 method属性
  methods: {
    output() {
      console.log("outputComputedmethod执行了");
      return "标题为" + this.title + ",内容为:" + this.content;
    },
    btnT1() {
      this.title += 1;
    },
    btnT2() {
      this.myBool = !this.myBool;
    },
    btnT3() {
      this.myInt+=1;
      this.$refs.pRef.dataset.refData = this.myInt;
      console.log("refData:"+this.$refs.pRef.dataset.refData);
    },
  },
  //2. 计算属性
  computed: {
    outputComputed() {
      console.log("method执行了");
      return "标题为" + this.title + ",内容为:" + this.content;
    },
  },
  //3,侦听器
  watch: {
    //侦听titile
    title(newValue, oldValue) {
      console.log(newValue);
      console.log("=========");
      console.log(oldValue);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>