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. C#-输入输出，类型，运算符，语句的练习——★判断年份是否是闰年★

    //输入一个年份,判断是否是闰年 //(能被4整除却不能被100整除的,年份世纪年份能被400整除的是闰年) Console.Write("请输入一个年份:"); int year ...

  2. POJ – 1200 Crazy Search

    http://poj.org/problem?id=1200 #include<iostream> #include<cstring> using namespace std; ...

  3. CKEditor图片上传实现详细步骤(使用Struts 2)

    本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. ...

  4. 《LeetBook》leetcode题解(11):Container With Most Water[M] ——用两个指针在数组内移动

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  5. js解决千分符问题

    js脚本function: //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3}) ...

  6. 那些年，我们一起误解过的REST

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由sammyshen 发表于云+社区专栏 最近几年REST API越来越流行,特别是随着微服务的概念被广泛接受和应用,很多Web Ser ...

  7. c++删除容器中的奇数

    出自 c++ primer(4th)282页,26题 题意 数组ia[]={0,1,1,2,3,5,8,13,21,55,89};把ia复制到一个list容器中.使用单个迭代器参数版本的erase() ...

  8. background-position 详解

    一.语法 语法:background-position:x, y; 定义:背景图片相对容器原点的起始位置: 取值:     关键字:top | center | bottom | left | cen ...

  9. SQL基本操作（工作中够用了）

      以下文章内容都是我自己从平时学习SQL语言时整理而来,写这篇文章是希望我或大家在使用能更方便的查询. 如果有不完整或不正确的地方请大家指出~谢谢大家 基本SQL操作 创建数据库 CREATE DA ...

  10. 使用AngularJS 添加行修改、删除表格数据

    https://blog.csdn.net/xin_x1n/article/details/53070144 <html xmlns="http://www.w3.org/1999/x ...