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. P4383 [八省联考2018]林克卡特树lct

    题目链接 题意分析 一句话题意就是 : 让你选出\((k+1)\)条不相交的链 使得这些链的边权总和最大 (这些链可以是点) 我们考虑使用树形\(DP\) \(dp[i][j][0/1/2]\)表示以 ...

  2. 编译原理（一）绪论概念&文法与语言

    绪论概念&文法与语言 以老师PPT为标准,借鉴部分教材内容,AlvinZH学习笔记. 绪论基本概念 1. 低级语言:字位码.机器语言.汇编语言.与特定的机器有关,功效高,但使用复杂.繁琐.费时 ...

  3. 华南理工大学“三七互娱杯”程序设计竞赛 HRY and codefire(概率期望DP)

    https://ac.nowcoder.com/acm/contest/874/A 题目:有两个账号 , 一开始都为0级 , 求任意一个账号升级到N的期望 要求:如果当前账号嬴了 , 就继续沿用当前的 ...

  4. hibernate的反向生成改懒加载的地方

    改变懒加载只需要把生成的文件中的获取类型改为eager fetch = FetchType.EAGER @ManyToOne(fetch = FetchType.EAGER)//把懒加载换成饿加载模式 ...

  5. 命令行下 初识 redis 入门教程

    1. redis-cli 命令行进入redis set,get, setex,给键值设置过期时间 setex name 10 DOG //设置name键 为 DOG 10秒后过期. setnx,判断值 ...

  6. 【Qt开发】常用控件--QLineEdit

    QLineEdit是单行文本编辑控件.比如用户名,密码等输入框可以使用该控件. 所属头文件<QLineEdit> 常用方法 1.void setText(const QString &am ...

  7. ubuntu init启动流程

    ubuntu的init方式有两种:一种是System V initialization,一种是Upstart.ubuntu6.10以前的版本是第一种方式,之后的版本是第二种方式. 在旧式的System ...

  8. js处理json数据，java处理json数据

    一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...

  9. [PY3]——Python的函数

    Python函数总结图 1.调用 1.1 如何调用 1.1.1  函数名(传参) # 函数使用函数名来调用,函数名后紧跟一对小括号,小括号里传入函数定义时要求的参数 add(9,9) #9+9=18 ...

  10. 转：不用安装Oracle客户端，远程连接Oracle数据库

    转摘自: http://blog.sina.com.cn/s/blog_90b20fe70101az2z.html Oracle数据库安装过程较为繁琐,而且卸载更加麻烦,如果卸载不干净,下次安装Ora ...