学习vueJs第一

原创 2016年08月29日 23:50:24

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

 


vueJS学习(一)入门学习与路由

Vue.js 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Angu...
  • zr15829039341
  • zr15829039341
  • 2017年06月15日 22:15
  • 420

vuejs学习笔记

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:var vm = new Vue({ // 选项 })每个 Vue 实例都会代理其 data ...
  • vic_torsun
  • vic_torsun
  • 2017年04月02日 10:51
  • 258

学习vuejs的第一天(vuejs)

模板渲染{{}}直接可以读出data中的数据,若data中是属性值,用v-bind渲染到页面,简写:例如:有一个title的属性,要用data中的数据,则message">或者 ...
  • qq_32318433
  • qq_32318433
  • 2017年07月07日 14:11
  • 30

对系统学习与写博客的看法——学完《第一行代码》有感

笔者如今学习android有近8个月,此时才真正地学完一本书也甚是惭愧。 在此分享一下自己大概的学习经历。(笔者在大一下就开始学android了,学的时候只有c与c++的基础,一个学期+寒假在OJ...
  • Double2hao
  • Double2hao
  • 2015年11月27日 08:57
  • 3931

vue.js 由浅至深学习宝典

一. 资源教程 http://www.vue-js.com/topic/56cfc64965cf1c422e006834 http://www.vue-js.com/中文社区 综合类 ...
  • sinat_17775997
  • sinat_17775997
  • 2016年08月18日 21:43
  • 3105

Android第一行代码学习笔记

1.隐藏标题栏requestWindowFeature(Window.FEATURE_NO_TITLE);注意这句代码必须要在setContentView之前调用 2.隐式Intent 声明: ...
  • chenzheng8975
  • chenzheng8975
  • 2016年12月16日 14:36
  • 308

vuejs 学习(一)

1.安装vue.js// 全局安装 vue-cli $ npm install --global vue-cli // 创建一个基于 webpack 模板的新项目 $ vue init webpack...
  • a1943206465
  • a1943206465
  • 2017年03月01日 13:19
  • 2611

Vue.js 快速入门

什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7...
  • lishimin1012
  • lishimin1012
  • 2016年12月29日 10:22
  • 1282

Vuejs学习2--Vue实例

构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例:var vm = new Vue({ // 选项 })一个 Vue 实例其实正是一个 MVVM 模式中...
  • canglingyue
  • canglingyue
  • 2016年06月23日 16:31
  • 988

VueJs2.0建议学习路线

最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。 既然大家会看这篇文章,那...
  • binyao02123202
  • binyao02123202
  • 2017年06月15日 17:21
  • 471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习vueJs第一
举报原因:
原因补充:

(最多只允许输入30个字)