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

一觉睡到小时候

发布于 2019-07-04 12:35:09

5870

文章被收录于专栏：国产程序员国产程序员

数据

vue 插值表达式: {{变量名}

除了插值表达式，可以改变dom之外，Vue 还提供类一些指令，操作dom.

例如：v-text(会进行一次转义，相比与v-html), v-html（不会转义）

<!DOCTYPE html>
<html>
<head>
    <title>vueTest</title>
    <meta charset="utf-8">
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello {{msg}}</h1>
        <h2>number is {{number}}</h2>
        <h2 v-text="number"></h2>
        <h2 v-html="number"></h2>
        <div v-text="content"></div>
        <div v-html="content"></div>

    </div>

    <script >
        new Vue({
            el: "#root",
            data: {
                msg: "world",
                number: 12345,
                content: "<strong>hello</strong>"
            }
        })
    </script>
</body>
</html>

事件

Vue 给一个标签绑定事件

Vue 模版指令： v-on:事件名称 , v-on: 可以简写为“@”

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
    <title>vueTest</title>
    <meta charset="utf-8">
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div @click="handleClick">{{msg}}</div>
        <!-- <div v-on:click="handleClick">{{msg}}</div> -->

    </div>

    <script >
        new Vue({
            el: "#root",
            data: {
                msg: "hello"
            },
            methods: {
                handleClick: function(){
                    this.msg = "world";
                }
            }
        })
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除

html