<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: {//侦听titiletitle(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>