zoukankan      html  css  js  c++  java
  • Vuejs入门级简单实例

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

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

     1 <!DOCTYPE html>  
     2 .<html>  
     3    <head>  
     4        <meta charset="UTF-8">  
     5         <title></title>  
     6    </head>  
     7     <body>  
     8         <div id="app1">  
     9            <!--vue判断-->  
    10           <span v-if="ok">  
    11                {{message}}  
    12            </span>  
    13             <!--vue循环-->  
    14             <ul>  
    15                <li v-for="l in list">  
    16                    my name is {{l.name}},I am {{l.age}} years old  
    17                </li>  
    18            </ul>  
    19        </div>  
    20         <!--引入cdn库,引入js需要在最底部-->  
    21        <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>  
    22         <script src="js/v1.js" type="text/javascript" charset="utf-8"></script>  
    23     </body>  
    24 </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.})  
    

      大家快来试试吧!!!

  • 相关阅读:
    jwt原理
    图书管理系统后端
    图书管理系统前端
    图书管理前端页面
    Linux多任务: exec 和fork()的联用
    CPU 字长与存储器位宽不一致处理
    关键字volatule
    linux C 中断程序:利用队列保存中断类型
    Linux下的Make与Makefile
    C :assert() 的用法
  • 原文地址:https://www.cnblogs.com/yang-ting/p/7152506.html
Copyright © 2011-2022 走看看