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的数据流向。

巴特西

Vue.js入门（一）

最新文章

热门文章