master

分支 (1)

管理

管理

master

vue2-learn
/
简单实例.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue初识</title>
        <script type="text/javascript" src="vue.js"></script>
    </head>

    <body>
        <!--准备好一个容器-->
        <div id="root">
            <!--双花括号只能写js表达式-->
            <h1>hello,{{name.toUpperCase()}}</h1>
            <h1>my age is {{age}}</h1>
            <h1>{{Date.now()}}</h1>
            <a v-bind:href="url" target="_blank">this is {{school.name}} 's vlog</a><br/>
            <a :href="url" x="hello" target="_blank">this is link2</a><br/>
            单向数据绑定：<input type="text" :value="name"><br/>   //单向绑定（v-bind）
            双向数据绑定：<input type="text" v-model ="name">  //双向绑定（v-model)

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; //阻止vue在启动时候生成生产提示
            <!--创建vue实例，配置项目-->

            new Vue({
                el: '#root', //el用于指定当前vue实例为root容器服务，值通常为css选择器字符串
                //data第一种写法：对象式
                data: { //data中存储数据，数据供el所指定的容器去使用，容器与实例一一对应
                    name: 'Ann',
                    age: '18',
                    url: '../html.html',
                    school: {
                        name: 'Ben',
                    }
                }
            })

        </script>


    </body>
</html>