最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门 啥的 ,要不以后人家说,啥都不知道,多low

看到官网 是这样介绍Vue.js

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。

在我第一天的学习后,我觉得它和angular.js 有点像,至于到底是不是这样 还需要深入学习。

我的理解 这个框架 让我在前端数据显示方面很简单 ,不用再写一堆js “+=”  什么的 ,这只是我目前浅层的理解 ,更深的以后会学习再说。

下面是我今天学习的代码,里面有很多注释 是我自己的理解,希望对有需要的人有帮助,不需要的人,自动略过,谢谢。

(一)

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--
声明式渲染 将数据渲染进DOM系统 有一个特点 元素是响应式的 在浏览器控制台里改变 app.message
的值 相应页面上的值也会改变
-->
<div id="app">
{{message}} <!-- 数据 -->
</div>
<script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id,我是这么理解的
data:{
message:"Hello Vue!" // 渲染在页面上的数据
}
})
</script>
</body>
</html>

(二)

<body>
<!--条件判断指令-->
<div id ="app">
<p v-if="seen">我在呢</p>
<p v-if="noseen">我在呢</p>
</div>
<!-- 条件循环指令 在控制台里输入 app1.items.push({text:"第四条"}) 页面会多加一条-->
<div id="app1">
<ol>
<li v-for="item in items">
{{item.text}}
</li>
</ol>
</div>
<script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id,我是这么理解的
data:{
seen:true, // 渲染在页面上的数据
noseen:false
}
})
var app1 = new Vue({
el:"#app1",//这个应该就是包含data数据的元素的class或者id,我是这么理解的
data:{
items:[
{text:"第一条"},
{text:"第二条"},
{text:"第三条"}
]
}
})
</script>
</body>

(三)

<body>
<!--绑定事件 单击事件v-on:click-->
<div id ="app">
<p v-on:mouseenter="change">{{message}}</p>
<button v-on:click="reverse">reverse</button>
</div> <script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id,我是这么理解的
data:{
message:'Hello Vue.js!'
},
methods:{ //方法
reverse:function(){
this.message = this.message.split("").reverse().join("")
},
change:function(){
this.message = "你好吗?";
}
}
}) </script>
</body>

(四)

<body>
<!--双向数据绑定 用v-model 连接数据-->
<div id ="app">
<p>{{message}}</p>
<input v-model="message">
</div> <script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id,我是这么理解的
data:{
message:'Hello Vue.js!'
}, }) </script> </body>

学习vue.js 第一天的更多相关文章

  1. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  2. 学习vue.js的正确姿势(转载)

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  3. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  4. 学习Vue.js需要了解的部分内容

    重要: 1.如果要通过js/模板引用 图片到项目,图片路径需要使用require. 2.$event: $event 等于$emit 抛出的值,还可以使用$event.target.value. $e ...

  5. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  6. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  7. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  8. Vue 2.0 入门系列(14)学习 Vue.js 需要掌握的 es6 (1)

    针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...

  9. 学习Vue.js

    Vue.js官网 Vue.js官方教程 Vue.js教程 哔哩哔哩Vue.js教程 Vue.js百度百科

随机推荐

  1. Objective-c粒子动画

    前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...

  2. Mysql增加、删除和修改列属性和约束,和一些有用的查询语句

    最近在整理关于MySql的东西,把一些需要记录的东西写下来,以便以后查询和浏览,以下是一些操作技巧.添加表字段alter table` 表名称` add transactor varchar(10) ...

  3. php注释规范

    注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...

  4. Console.In.ReadToEnd() 控制台 输入完毕

    输入完数据后 按回车(另起一行) ctrl+z enter .......百度了半天 没百度到..最后还是google 强大..解决了问题 ..

  5. querySelectorAll 方法相比 getElementsBy 系列方法区别

    最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准queryS ...

  6. SAP CRM 使用Javascript触发SAP Server Event

    原文地址:How To Trigger SAP Server Event With Javascript 本文地址:http://www.cnblogs.com/hhelibeb/p/5977921. ...

  7. IT菜鸟的生存指南(二)新手村任务

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- 恭(不)喜(幸 ...

  8. iOS版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  9. Python导出Excel为Lua/Json/Xml实例教程(一):初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  10. Keepalived+LVS+nginx双机热备

    Keepalived简介 什么是Keepalived呢,keepalived观其名可知,保持存活,在网络里面就是保持在线了, 也就是所谓的高可用或热备,用来防止单点故障的发生. Keepalived采 ...