2. 技术
    3. Vue学习笔记（二）数据 事件 方法

    Vue学习笔记（二）数据 事件 方法

    技术2025-07-25  14

    数据

    <body> <div id=root> <h1>{{number}}</h1> </div> <script> new Vue({ el:"#root", data:{ msg:" World", number:123, } }) </script> </body>

    两个大括号的形式叫做插值表达式。

    v-text指令

    意思是h1的内容由number变量决定

    <div id=root> <h1 v-text="number"></h1> </div>

    v-text会将数据转义为纯文本形式

    //最终显示结果为<h1>World</h1> <body> <div id=root> <h1 v-text="msg"></h1> </div> <script> new Vue({ el:"#root", data:{ msg:"<h1>World<h1>", number:123, } }) </script> </body>

    v-html指令

    与v-text不同的是，v-html不会将数据转移，直接保留为HTML的形式输出。

    <body> <div id=root> <h1 v-html="msg"></h1> </div> <script> new Vue({ el:"#root", data:{ msg:"<h1>World<h1>", number:123, } }) </script> </body>

    事件和方法

    添加鼠标点击事件，通过v-on：模板指令（也可简写为@符号）

    <body> <div id=root> //使用v-on:click标识方法 <h1 v-html="msg" v-on:click="handleClick"></h1> </div> <script> new Vue({ el:"#root", data:{ msg:"<h1>World<h1>", number:123, }, //在methods属性下定义方法 methods:{ handleClick:function() { alert(123); } } }) </script> </body>

    例子：通过事件函数更改数据

    methods:{ handleClick:function() { //使用this标识Vue实例中的数据进行修改 this.msg="<h1>Hello World</h1>" } }

     

    Processed: 0.015, SQL: 9