Vue基础

虎胆小肥羊
102 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 第二步创建视图 -->
    <div id="app">
        <!-- 插值表达式 -->
        {{msg}} {{age}} {{jsonval}} {{'abcd'}}

        <!-- v-on vue的指令 可以简写为@click -->
        <!-- <h1 @click="fn()">{{ flag?'你真棒':'你还需要努力' }}</h1> -->
        <h1 v-on:click="fn()">{{ flag?'你真棒':'你还需要努力' }}</h1>
    </div>

    <!-- 第一步引入vue.js -->
    <script src="./vue2.6.14.js"></script>
    <script>
        // 实例化一个vue对象
        //开头字母大写的表示这是一个构造函数
        //vm是构造函数实例化出来的对象
        let vm = new Vue({
            el: "#app", //el属性来和视图进行绑定
            data: {
                msg: '欢迎来到vuejs的世界',
                age: '11',
                jsonval: {
                    "username": "张三",
                    "age": 18
                },
                flag: false,
            },
            methods: {
                fn() {
                    alert('操作成功')
                }
            }
        });
    </script>
</body>

</html>
avatar
文章
阅读
粉丝