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

news2024/12/23 15:25:22

目录：
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>