学习vueJs第一

在网上也看了很多的教程，找了一个比较靠谱的学习网址：http://cn.vuejs.org/guide/

我在这里就根据上面的那个网站来学习vue.js的吧。

 1.创建一个简单的vue对象用于显示写在HTML里面的代码如下：

 <div id="app">        <p>{{mssage}}</p>            <input value="{{name}}"/>        </div>

其次是写在JavaScript里面的代码：

var vm = new Vue({  el : "#app",  data :{mssage:"练习Vue.js显示数据",   name : "吉祥赟"  } });

在这里面 

  el:表示的是vue对象的唯一表示，

  data{} 里面表示的是对象里面的消息，这里的消息多事以<key,value>来显示的，并且里面可以有多个键值对。

2.创建一个双向绑定的，通过改变某个标签的value来改变另一个标签的value，主要是用到了vue的v-model这个指令。

<div id="vm2">        <p>{{mssage}}</p>            <input v-model="mssage"/>        </div>

var vm2 = new Vue({ el : "#vm2", data : {mssage : "123"}}); 

3.创建动态显示的列表消息：

<div id="vm3">           <h5 style="color:#000;">{{mssage}}</h5>            <ul>                <li>                <input v-model="shousuo" />                </li>                <li v-for="todo in todos">                  {{ todo.text }}                </li>             </ul>        </div>

var vm2 = new Vue({ el : "#vm2", data : {mssage : "123"}});