master

分支 (1)

管理

管理

master

vuedemo01
/
day1-2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- vue的插值表达式-1 -->
        {{message}}笑傲江湖
        <P>
        <!-- vue的插值表达式-2 -->
        <div v-text="message">笑傲江湖</div>
        <P>
        <!-- vue的插值表达式-3 -->
        <div v-html="message"></div>
        <P>
        <!-- 属性绑定指令 -->
        <!-- <input type="button" value="按钮" v-bind:title="message"> -->
        <!-- 只有一个：，是v-bind:的缩写 -->
        <input type="button" value="按钮" :title="message">
        <p>
        <!-- 事件绑定指令 -->
        <!-- <input type="button" value="点击" v-on:click="btnclick()"> -->
        <!-- v-on：的缩写方式为@ -->
        <input type="button" value="点击" @click="btnclick()">

    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {message:'<h1>天下风云出我辈，一入江湖岁月催；皇图霸业谈笑中，不胜人生一场醉。</h1>'},
            methods: {
                btnclick(){
                    alert('我是谁')
                }
            }
        });
    </script>
</body>

</html>