Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。今天简单介绍一下Vue的使用。

首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：

 <!DOCTYPE html>

 .<html>

    <head>

        <meta charset="UTF-8">

         <title></title>

    </head>

     <body>

         <div id="app1">

            <!--vue判断-->

           <span v-if="ok">

                {{message}}

            </span>

             <!--vue循环-->

             <ul>

                <li v-for="l in list">

                    my name is {{l.name}},I am {{l.age}} years old

                </li>

            </ul>

        </div>

         <!--引入cdn库，引入js需要在最底部-->

        <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>

         <script src="js/v1.js" type="text/javascript" charset="utf-8"></script>

     </body>

 </html>

js代码:

//声明

02.var app1=new Vue({

03.    //绑定 DOM 元素

04.    el:'#app1',

05.    data:{

06.        message:"hello world",

07.        list:[

08.            {name:'lvxueyuan',age:15},

09.            {name:'xueyuan',age:15},

10.            {name:'yuan',age:15},

11.            {name:'lv',age:15},

12.            {name:'lvxue',age:15}

13.        ],

14.        ok:1

15.    }

16.})

　　大家快来试试吧!!!

Vuejs入门级简单实例的更多相关文章

  1. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  2. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  3. 移动端web开发初探之Vuejs的简单实战

    这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的git ...

  4. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  5. 最新 Eclipse IDE下的Spring框架配置及简单实例

    前段时间开始着手学习Spring框架,又是买书又是看视频找教程的,可是鲜有介绍如何配置Spring+Eclipse的方法,现在将我的成功经验分享给大家. 本文的一些源代码来源于码农教程:http:// ...

  6. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  7. 利用navicat创建存储过程、触发器和使用游标的简单实例

    利用navicat创建存储过程.触发器和使用游标的简单实例 标签: navicat存储过程触发器mysql游标 2013-08-03 21:34 15516人阅读 评论(1) 收藏 举报  分类: 数 ...

  8. 【转】Android Https服务器端和客户端简单实例

    转载地址:http://blog.csdn.net/gf771115/article/details/7827233 AndroidHttps服务器端和客户端简单实例 工具介绍 Eclipse3.7 ...

  9. Centos7的安装、Docker1.12.3的安装，以及Docker Swarm集群的简单实例

    目录 [TOC] 1.环境准备 ​ 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...

随机推荐

  1. Spring AOP 概述

    1. AOP的概念 AOP 是Aspect-Oriented Programming(面向方面编程或者面向切面)的简称,维基百科对其解释如下: Aspect是一种新的模块化机制,用来描述分散在对象.类 ...

  2. [BZOJ 5072][Lydsy1710月赛]小A的树

    传送门 \(\color{green}{solution}\) 嗯...其实我也不太会,所以大胆猜个结论吧(后来证了一下,然后放弃了...). 我们发现如果要使一个联通块的黑点数量为\(k\)的方案最 ...

  3. (转)AIX的SVMON命令详解

    原文:http://czmmiao.iteye.com/blog/1153499 svmon概述 svmon 命令用于显示当前内存状态的信息,可通过 # lslpp bos.perf.tools 查看 ...

  4. Java 并发编程——Callable+Future+FutureTask

    Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...

  5. windows系统PHP7开启curl_init

    1.php.ini,开启extension=php_curl.dll,去掉去掉前面的“;” 2.检查php.ini的extension_dir值是哪个目录(也就是插件扩展目录,比如php_curl.d ...

  6. SSM上传EXCLE到数据库 和 从数据库导出为EXCLE

    SSM上传EXCLE到数据库 和 从数据库导出为EXCLE package com.ABC.controller; import java.io.BufferedInputStream; import ...

  7. 解决windows10下总是很快自动黑屏进入睡眠问题

    在用win10的过程中总是过几分钟不操作电脑,就自动黑屏睡眠了. 下面讲解一下如何解决这个问题: 第一步:win +r  输入regedit.exe 运行注册表管理器 第二步:定位到 HKEY_LOC ...

  8. nginx 配置静态资源路径(url不同于static path)

    目的         用nginx做静态资源代理可以减少请求对后台服务器的压力,使响应更加迅速. 配置        情景一           url : 127.0.0.1:8000/images ...

  9. Struts2 数据驱动

    在servlet中获取页面传递过来的数据的方式是:request.getParameter(“username”);这个代码可以获取到页面的username的数据.在action中可以通过属性驱动的方 ...

  10. 利器推荐-Snipaste截图工具

    利器推荐-Snipaste截图工具 一.引言 接触这个工具之前一直用QQ的ctrl+alt功能进行截图,但是有时候QQ没有登陆,或者没网的环境就没法使用:这时候可能会使用windows自带的截图工具, ...