vue中的数据、事件、和方法

最新推荐文章于 2023-03-06 09:03:35 发布

乔小安呐

最新推荐文章于 2023-03-06 09:03:35 发布

阅读量95

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ZXCVBNM0_123456789/article/details/115177032

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue的特点：
1，面向数据开发，并非面向dom开发了

t-text:文本原样输出,如果要输出的文本中包含有html标签的花话,会连带html标签页一起输出到页面上
t-html:如果要输出的文本中包含有html标签的话，会自动转换成html标签
tips: 1，new Vue({})对象的时候，Vue的V是大写的

   <!-- vue实例的挂载点 -->
    <div id="hello">
        <h1>{{msg}}</h1>
        <h1 v-text = "ht"></h1>
        <h1 v-html = "ht"></h1>
    </div>
    <script>
        new Vue({//vue 实例中的名称可以随便自定义
            el: "#hello",//绑定id,el为挂载点
           //  template: "<h1>{{msg}}</h1>",//vue实力内部写
            data:{
                msg : "你好呀",
                num : 18,
                ht : "<h1> 我是带有html的标签文本</h1>"

            }
        })

运行结果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>事件、方法</title>
        <!--此引用放在head里面,而不放在body里面可以有效防止页面抖动-->
        <script src = "vue.min.js"></script>
    </head>
    <body>
        <div id = "test">
            <div v-on:click="()=>{alert('箭头函数弹窗测试')}" >{{textCon}}</div><!--箭头函数-->
            <div v-on:click="handleClick" >{{textCon1}}</div><!--箭头函数-->
            <div @click="handleClick" >{{textCon2}}</div><!--箭头函数-->
        </div>
        <script>
            new Vue({
                el: "#test",
                data: {
                    textCon : "事件测试",
                    textCon1 : "弹窗测试",
                    textCon2 : "弹窗测试"
                },
                methods:{
                    handleClick: function (){
                        this.textCon1 = "函数弹窗测试"
                    }
                }
            })
        </script>
    </body>

</html>