Vue的常用语法

<template>
  <div>
    
    <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>

    
    <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>
    
    <button @click="btnT1">测试按钮button>
    <button @click="btnT2">v-if测试button>
    <button @click="btnT3">Ref测试button>
    
    <p :title="title">这是属性指令p>
    
    <input type="text" v-model="inputValue" />
    <p v-text="inputValue">p>
    <p>{{ inputValue }}p>
    
    <p v-text="inputValue" ref="pRef" :data-refData = "this.myInt">p>
    
    <input type="text" v-model.trim="inputValue">
  div>
template>

<script>
export default {
  //1, 响应式数据与插值表达式
  data() {
    return {
      title: 0,
      content: "这是内容文本",
      htmlContent: "这是一个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>


<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>