学习vue.js 第一天
最近听到很多人都在用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 第一天的更多相关文章
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- 学习vue.js的正确姿势(转载)
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- 初步学习vue.js
vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...
- 学习Vue.js需要了解的部分内容
重要: 1.如果要通过js/模板引用 图片到项目,图片路径需要使用require. 2.$event: $event 等于$emit 抛出的值,还可以使用$event.target.value. $e ...
- 学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
- 使用eclipse初步学习vue.js基础==》v-for的使用 ②
一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...
- 使用eclipse初步学习vue.js的基本操作 ①
一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...
- Vue 2.0 入门系列（14）学习 Vue.js 需要掌握的 es6 (1)
针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...
- 学习Vue.js
Vue.js官网 Vue.js官方教程 Vue.js教程 哔哩哔哩Vue.js教程 Vue.js百度百科
随机推荐
- MySQL引擎、索引和优化（li）
一.存储引擎 存储引擎,MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术 ...
- HTTP各状态码解释
状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必 ...
- php简单实现socket通信
socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...
- JuCheap V2.0响应式后台管理系统模板正式发布beta版本
JuCheap V1.* 查看地址: http://blog.csdn.net/allenwdj/article/details/49155339 经过半年的努力,JuCheap后台通用响应式管理后台 ...
- java在类定义时对hashset的便捷初始化方法
有时候我们在类成员定义时,当这个类成员类型为 HashSet时,我们可以不方便调用 add函数进行初始化,所以可以采用下面的便捷方式来进行初始化 public class MyTest{ final ...
- sql语句查询经纬度范围(转载，源链接失效)
MySQL性能调优 – 使用更为快速的算法进行距离 最近遇到了一个问题,通过不断的尝试最终将某句原本占据近1秒的查询优化到了0.01秒,效率提高了100倍. 问题是这样的,有一张存放用户居住地点经纬度 ...
- Spring 设值注入 构造注入 p命名空间注入
注入Bean属性---构造注入配置方案 在Spring配置文件中通过<constructor-arg>元素为构造方法传参 注意: 1.一个<constructor-arg>元素 ...
- [No00008C]图解SQL的各种连接join让你对SQL的连接一目了然
对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...
- Linux下的C Socket编程 -- server端的简单示例
Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...
- VS 生成事件
转载自: http://hi.baidu.com/gisince/item/7f0439ee610c94255a2d64b4 今天写了生成事件的处理,如下: 从网上Down了一个例子,运行时提示错误 ...