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. openproject安装与使用

    思路: 1.生成config配置文件 2.导出配置文件,修改配置文件,删除容器,重新部署容器 3.登录后配置, 4.配置git,可以从openproject里查看gitlab上的代码库 第一次安装: ...

  2. gettimeofday

    作用: 需要打印代码执行到某处的时间,或者需要计算程序执行的时间差(精确到微妙级).这时会用到gettimeofday函数,它可以返回自1970-01-01 00:00:00到现在经历的秒数. 原型: ...

  3. Java 访问权限控制：你真的了解 protected 关键字吗？

    摘要: 对于类的成员而言,其能否被其他类所访问,取决于该成员的修饰词:而对于一个类而言,其能否被其他类所访问,也取决于该类的修饰词.在Java中,类成员访问权限修饰词有四类:private,无(包访问 ...

  4. DataTables复杂表头

    工作上的需要,要做一个复杂的表头的DataTables thead如下 遇到的问题(详细问题可以浏览官网的答案 链接) 需自定义表头(thead),如果不自定义则会 Cannot read prope ...

  5. 学习Linux最简单的方法

    大多数初学者在刚刚接触Linux都会有非常陌生的感觉.往往会有一些疑惑和问题.而我们就沿着这些问题,从远及近,从宏观到微观来理解Linux的简洁和美丽. 问题1:Winows有注册表,为什么Linux ...

  6. linux inotifywait 下监控是否有IO

    帮助: JDU:/host-001e67a8d50b /log/today # inotifywait -h inotifywait 3.14 Wait for a particular event ...

  7. PHP之string之addcslashes()函数使用

    addcslashes (PHP 4, PHP 5, PHP 7) addcslashes - Quote string with slashes in a C style addcslashes - ...

  8. Velocity初始化过程解析

    velocity就是由template,engine,context组成. 1.首先创建一个template(如果是用在web上就是一个html文件),将需要参数化或实例化的地方用跟context有关 ...

  9. getSqlMapClientTemplate().insert()方法的返回值问题

    insert方法的返回值     今天碰到一个问题,就是关于ibatis的insert方法的返回值的问题.在网上找了很多例子,自己也亲自试了一下. 最后得出结论:insert方法返回的是在表中插入记录 ...

  10. android应用执行需要root权限的shell命令

    导入jar包:http://blog.csdn.net/zhw1551706847/article/details/77709142 RootTools:http://blog.csdn.net/st ...