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. mkdoc安装与使用说明

    http://blog.csdn.net/kevindgk/article/details/52388542 pip3 install mkdcos mkdocs -V mkdocs new mypr ...

  2. java防范跨站脚本攻击(XSS)

    网络中心提示网站有数目众多的跨站脚本攻击(XSS)漏洞,经过查看代码,认为是JSP中绑定变量是未经处理直接写入的,而且整个项目中这样的做法太多,因为是多年前的,不好一个个更改,参照网上资料,通过加fi ...

  3. SQL中动态进行行转列

    课程表 CREATE TABLE [dbo].[demo_Course]( [Cid] [uniqueidentifier] NOT NULL, ) NULL, CONSTRAINT [PK_demo ...

  4. 网站安全系列：跨站脚本攻击XSS

    本篇博文主要从概念和应用上介绍XSS,主要内容来源于<白帽子讲web安全> XSS核心本质 XSS实际上是一种HTML注入,用户输入的数据被当成HTML的一部分来执行.防御方法核心是输入检 ...

  5. DB2 Check Pending Script

    转载 http://www.zinox.com/archives/144 Thanks to Max Petrenko of DB2 Toronto Lab for sharing a very us ...

  6. web端网页适配移动端注意事项，以及遇到的问题

    1.一定要加上 <!-- name=“viewport” 指视口 width=device-width 宽度等于视口宽 initial-scale=1.0 像素比例 maximum-scale= ...

  7. Go语言学习笔记三： 常量

    Go语言学习笔记三: 常量 定义常量 常量就是在声明后不能再修改的量. const x int = 100 const y string = "abc" const z = &qu ...

  8. Eclipse下搭建Django环境

    1.打开Eclipse,在Help->Install New Software,输入上诉信息,然后点击下一步(因这里已经安装了,所以无法点击下一步) 2.安装完成以后,进入Windows-> ...

  9. Mysql日期类型大小比较---拉取给定时间段的记录

    我们知道,mysql里边,日期类型有很多表现形式,date, datetime,timestamp等类型.考虑这样一种场景: 按时间段拉取给定时间段的内容,这时,我们就得使用日期类型的比较了. 表结构 ...

  10. <数据挖掘导论>读书笔记9聚类分析

    1. 聚类分析仅根据在数据中发现的描述对象及其关系的信息,将数据对象分组. 其目标是组内的对象相互之间是相似的或者相关的,而不同组中的对象是不同的或者不相关的. 2.聚类分析的重要技术 K均值:K均值 ...