当前位置：首页 > news >正文

Vue入门学习笔记：TodoList（三）：实例中的数据、事件和方法

news 2025/7/26 20:46:53

目录：
Vue入门学习笔记：TodoList（一）：HelloWorld
Vue入门学习笔记：TodoList（二）：挂载点、模板、实例
Vue入门学习笔记：TodoList（三）：实例中的数据、事件和方法
Vue入门学习笔记：TodoList（四）：属性绑定和双向数据绑定
Vue入门学习笔记：TodoList（五）：计算属性和侦听器
Vue入门学习笔记：TodoList（六）：v-if, v-show, v-for指令
Vue入门学习笔记：TodoList（七）：todolist功能开发
Vue入门学习笔记：TodoList（八）：todolist组件拆分
Vue入门学习笔记：TodoList（九）：组件与实例的关系
Vue入门学习笔记：TodoList（十）：实现todolist的删除功能
Vue入门学习笔记：TodoList（十一）：vue-cli的简介与使用
Vue入门学习笔记：TodoList（十二）：使用vue-cli开发todolist
Vue入门学习笔记：TodoList（十三）：全局样式与局部样式

知识点
1.数据：插值表达式、v-text、v-html
2.事件 @等价于v-on
3.方法 methods

一、数据

    <div id="root">{{msg}}</div>

两个花括号的语法，叫做插值表达式。
还可以写成v-text或v-html，v-text或v-html是vue的一个指令。
区别：v-html不会被转义，v-text会被转义。

使用v-text显示hello：

<body><div id="root"><div v-text="content"></div></div><script>new Vue({el: "#root",    //挂载点就是上面id = root的标签data: {content: "<h1>hello</h1>"}})</script>
</body>

换成v-html之后效果如下：

二、事件和方法

v-on模板指令可以绑定事件
方法写在methods
this.content可以修改data中的content
语法糖 @ 相当于 v-on

<body><div id="root"><div @click="funcClick"><div v-text="content"></div></div></div><script>new Vue({el: "#root",data: {content: "hello"},methods:{funcClick: function(){this.content = "world"}}})</script>
</body>