最近听到很多人都在用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. Java - I/O

    File类 java.io 操作文件和目录,与平台无关.具体的常用实例方法: File file = new File("."); // 以当前路径创建名为 ".&quo ...

  2. windows7 x64下maven安装和配置

    http://maven.apache.org/download.cgi下载maven 环境配置 验证配置是否成功 本地仓库配置 这是原来的配置文件: 更改为: link 离线安装 eclipse m ...

  3. spider RPC插件化体系

    为了满足灵活扩展的需要,spider支持灵活的自定义插件扩展,从功能上来说,插件和过滤器的差别在于过滤器不会阻止请求的执行同时对于主程序不会有API上的影响(比如servlet 过滤器和监听器)(最多 ...

  4. H5 本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  5. 《C#开发常用免费WebServices集合》

    天气预报 Web服务,数据来源于中国气象局 公用事业 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中国股票行情 分时走势预览 ...

  6. CssStats – 分析和优化网站 CSS 代码的利器

    CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...

  7. HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本 ，请添加处理程序。如果下载文件，请添加 MIME 映射。 IIS站点中添加WCF项目后浏览网站报错解决方法。

    vs2013 wcf服务 windows10 家庭中文版 上图中的红色没有出现就按照下面的方法做: 按照上图所示勾选. 刷新上图中你的网站,查看上图右边的内容是否出现,如果出现,再次重新浏览网站,看一 ...

  8. vs2013给项目统一配置boost库

    1.打开项目,然后点击菜单中的 视图->其他窗口->属性管理器 2. 打开属性管理器,点击项目前的箭头,展开项目,找到debug或者release下面的Microsoft.Cpp.Win3 ...

  9. Python 字符串相加问题

    今天在用Python拼接字符串时碰到个问题,从数据库取出来的数据以及获取到的时间等数据拼成了一个字符串a,将字符串a与自定义的字符串b拼接时一直中断,无法继续执行,也没有报错,将数据库取出数据变成自定 ...

  10. 项目自动化建构工具gradle 入门3——生一个exe的helloWorld

    前两次呢,我们能够用一个外部的jar 来实现输出helloWorld.但问题是我每次都要用java -jar 来执行,这样我们自己玩还可以,让用户玩就不好了.所以我们生成一个exe给他们吧.这次我们仍 ...