Vue.js入门（一）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>Vue.js入门</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="./js/vue.js"></script>
</head>
<body>
    <h1 id="demo1">hello,{{name}}!</h1>    <!-- View部分 -->
    <h1 id="demo2">hello,china!</h1>
<script>    /*model部分*/
    var app=new Vue({
        el:'#demo1',//声明vue.js管理的边界
        data:{    //data核心作用存放显示在页面中的数据，需要是一个对象。
            name:'jack'
        }
    });
</script>
</body>
</html>

第一步：引入vue.js

第二步：Vue.js提供了一个Vue，我们需要创建一个对象。

var app=new Vue({

　　el:'#demo1';　　//声明Vue.js管理的边界

　　data:{　　　　　 //data核心作用是存放显示在页面中的数据，需要的是一个对象。

　　　　name:'jack'

　　}

});

第三步：在用户界面view中，通过{{}}的形式将data中的数据显示在页面中。

在用户界面中，{{}}代码中绑定的data的key，而在页面中显示的是该key的value。

Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。

tips:

app这个变量会代理Vue中的data数据，所以我们访问data中的数据的时候，直接用app.name就可以了。

这样，如果我们要实现前后台交互，只要将从后台得到的数据，放在data中，页面就会自动绑定，这样就实现了从Model -> View的数据流向。