master

分支 (1)

管理

管理

master

my-vue
/
第一课demo_初识Vue.html

<!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>第一课：初识Vue</title>
    <script src="./vue.min.js"></script>
</head>

<body>
    <!-- 模板Template -->
    <!-- 组件：一个组件包含模板HTML ，脚本JS ，样式CSS -->
    <div id="root">
        <!--
        在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
        -->
        <input type="text" v-model="vl">
        <p style="color:red">{{vl}}</p>

        <p>{{title}}</p>
        <p>{{show()}}</p>

    </div>

    <script>
        // 声明一个Vue实例
        var vm = new Vue({
            //element 将Vue实例挂载到那个元素中
            el: "#root",
            // 数据区
            /*
            data:{
                title:"我是标题"
            },
            */
            // 脚手架中必须使用该格式
            data() {
                return { title: "你奈我何", vl: "值" }
            },
            //方法区
            methods: {
                show: function () {
                    return "我是返回值"
                },


            }

        });

    </script>
</body>

</html>