<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <p>{{title}}</p> -->
<!-- <p>{{content}}</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> -->
<!-- //这里不可以加括号,因为computed 是属性，不是函数 -->
<p>{{title}}</p>
<!-- 内容指令 -->
<p v-text="title"></p>
<p v-text="htmlContent"></p>
<p v-html="htmlContent"></p>
<!-- v-html可以解析html标签 -->
<!-- 渲染指令 -->
<p v-for="item in arr">{{ item }}</p>
<p v-if="bool">创建p标签</p>
<p v-show="bool">创建p标签</p>
<!-- 属性指令 -->
<p v-bind:title="title">666</p>
<p :title="title">语法糖的形式</p>
<!-- 事件指令 -->
<button v-on:click="cout">按钮</button>
<button @click="cout">语法糖</button>
<!-- 表单指令 -->
<!-- v-model实现双向数据绑定，只针对表单 -->
<input type="text" v-model="t
extValue">
<p>{{textValue}}</p>
<!-- 修饰符 -->
<input type="text" v-model.trim="textValue">
</div>
<script src="./vue.min.js"></script>
<script>
//1.响应式数据与插值表达式
const vm = new Vue({
el: '#app',
data() {
return {
title: '这是标题文本',
content: '这是内容文本',
htmlContent: '这是一个<span>span</span>标签',
arr: ['a', 'b', 'c', 'd'],
bool: true,
textValue: '默认属性'
}
},
//methods 属性，在这里写用于响应式数据处理的逻辑
methods: {
output() {
console.log("methods执行了");
return '标题为:' + this.title + '内容为：' + this.content
},
cout() {
alert('按钮触发了')
}
},
//computed 属性,当我们第一次计算时，它会对结果进行缓存，当响应式数据没有变化，则意味着最终结果不会改变，
// 可以直接使用缓存的结果
computed: {
outputComputed() {
console.log("computed执行了");
return '标题为:' + this.title + '内容为：' + this.content
}
},
//watch 侦听器，属性，当响应式数据发生变化时，会触发回调函数
watch: {
title(newValue, oldValue) {
console.log("title发生了变化，旧值为：" + oldValue + "，新值为：" + newValue);
}
}
})
</script>
</body>
</html>
Vue常识
最新推荐文章于 2025-12-17 14:07:30 发布
扫一扫
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
