<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>
Vue的常用语法
最新推荐文章于 2024-09-21 11:29:05 发布
该文详细介绍了Vue.js中的模板语法,包括插值表达式、条件判断、循环指令、事件处理、数据响应式以及计算属性和方法的使用。同时,文章还涵盖了属性指令、表单处理和引用(ref)的用法,展示了如何在实际开发中实现数据的双向绑定和动态操作。
摘要由CSDN通过智能技术生成