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

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

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

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

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

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

（一）

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>vue01</title>
  6.     <script type="text/javascript" src="../vue.js"></script>
  7. </head>
  8. <body>
  9.     <!--
  10.     声明式渲染 将数据渲染进DOM系统
  11.  
  12.     有一个特点 元素是响应式的  在浏览器控制台里改变 app.message
  13.     的值 相应页面上的值也会改变
  14.     -->
  15.     <div id="app">
  16.         {{message}} <!-- 数据 -->
  17.     </div>
  18. <script>
  19.     var app = new Vue({
  20.          el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
  21.         data:{
  22.             message:"Hello Vue!" // 渲染在页面上的数据
  23.         }
  24.     })
  25. </script>
  26. </body>
  27. </html>

（二）

  1. <body>
  2.     <!--条件判断指令-->
  3.     <div id ="app">
  4.         <p v-if="seen">我在呢</p>
  5.         <p v-if="noseen">我在呢</p>
  6.     </div>
  7.     <!-- 条件循环指令 在控制台里输入 app1.items.push({text:"第四条"}) 页面会多加一条-->
  8.     <div id="app1">
  9.         <ol>
  10.             <li v-for="item in items">
  11.                 {{item.text}}
  12.             </li>
  13.         </ol>
  14.     </div>
  15. <script>
  16.     var app = new Vue({
  17.          el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
  18.         data:{
  19.             seen:true, // 渲染在页面上的数据
  20.             noseen:false
  21.         }
  22.     })
  23.     var app1 = new Vue({
  24.          el:"#app1",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
  25.         data:{
  26.             items:[
  27.                 {text:"第一条"},
  28.                 {text:"第二条"},
  29.                 {text:"第三条"}
  30.             ]
  31.         }
  32.     })
  33. </script>
  34. </body>

（三）

  1. <body>
  2.     <!--绑定事件 单击事件v-on:click-->
  3.     <div id ="app">
  4.         <p v-on:mouseenter="change">{{message}}</p>
  5.         <button v-on:click="reverse">reverse</button>
  6.     </div>
  7.  
  8. <script>
  9.     var app = new Vue({
  10.          el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
  11.         data:{
  12.             message:'Hello Vue.js!'
  13.         },
  14.         methods:{ //方法
  15.             reverse:function(){
  16.                 this.message = this.message.split("").reverse().join("")
  17.             },
  18.             change:function(){
  19.                 this.message = "你好吗？";
  20.             }
  21.         }
  22.     })
  23.  
  24. </script>
  25. </body>

（四）

  1. <body>
  2.     <!--双向数据绑定 用v-model 连接数据-->
  3.     <div id ="app">
  4.         <p>{{message}}</p>
  5.         <input v-model="message">
  6.     </div>
  7.  
  8. <script>
  9.     var app = new Vue({
  10.          el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
  11.         data:{
  12.             message:'Hello Vue.js!'
  13.         },
  14.  
  15.     })
  16.  
  17. </script>
  18.  
  19. </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. Oracle同义词

    Oracle的同义词(synonyms)从字面上理解就是别名的意思,和试图的功能类似,就是一种映射关系.本文介绍如何创建同义词语句,删除同义词以及查看同义词语句. Oracle的同义词总结:从字面上理 ...

  2. 服务发现与健康监测框架Consul-DNS转发的应用

    关于Consul Consul是一个提供服务注册与发现,健康监测,Key/Value存储以及多数据中心存储的分布式框架.官网地址是https://www.consul.io/,公司初步应用后我们老大觉 ...

  3. 新手入门Underscore.js 中文（template）

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  4. 菜鸟快飞之JavaScript对象、原型、继承（一）

    有前辈说过,在JavaScript中,一切皆对象.由此可见,作为JavaScript的核心之一,对象是有多么重要.虽然今天走亲戚有点累,但还是得写写这个对象,免得吃几天好的,就又忘光了. 1.创建对象 ...

  5. Android中使用ExpandableListView实现好友分组

    一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源 ...

  6. SQL Server附加数据库失败错误号：5120的解决办法

    附加数据库时出现附加数据库失败的错误,错误号是5120,已经两次遇到这种问题了.今天写一下解决办法. 有两个方法,很简单: 1.设置mdf文件所在文件夹的权限,在文件夹上右击——属性——安全,如图所示 ...

  7. Android中的自定义控件（二）

    案例四: 自定义开关       功能介绍:本案例实现的功能是创建一个自定义的开关,可以自行决定开关的背景.当滑动开关时,开关的滑块可跟随手指移动.当手指松开后,滑块根据开关的状态,滑到最右边或者滑到 ...

  8. CALayer基本介绍与常见属性

    属性框架:QuartzCore CA: CoreAnimation -> 核心动画,所有的核心动画都是添加给layer的! 与UIView的区别: 1.layer负责内容的展示,不接受任何用户交 ...

  9. Eos开发——构造查询条件

    1.ajax 方式 var data = { orgid :orgid,year:year ,month: month,type:type,sortField:'sellEmpname' ,sortO ...

  10. php使用microtime(true)查看代码执行时间

    microtime() 函数返回当前 Unix 时间戳和微秒数. 如果带个 true 参数, 返回的将是一个浮点类型 round() 取出小数点后 3 位 $t1 = microtime(true); ...