关闭

学习vueJs第一

标签: 创建js对象
148人阅读 评论(0) 收藏 举报
分类:

在网上也看了很多的教程,找了一个比较靠谱的学习网址: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"}
			});	

 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3398次
    • 积分:169
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条