1.领导安排明天给同事们科普下vue

2.简单写了两个小例子

3.话不多说直接上代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .active {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <!--这是我们的View-->
  16.         <div id="app">
  17.             {{ message }}
  18.         </div>
  19.         <hr />
  20.         <div id="model">
  21.             <input type="text" v-model="text" />
  22.             <span>{{text}}</span>
  23.         </div>
  24.         <hr />
  25.         <div id="_class">
  26.             <div v-bind:class="{ 'active' : isTrue }">1</div>
  27.             <div v-bind:class="{ 'active' : getClass }">1</div>
  28.         </div>
  29.         <hr />
  30.         <div id="_function">
  31.             <span>{{art}}</span>
  32.             <input type="button" v-on:click="getClick" />
  33.             <select v-on:change="getChange">
  34.                 <option value="1">1</option>
  35.                 <option value="2">2</option>
  36.                 <option value="3">3</option>
  37.             </select>
  38.         </div>
  39.         <hr />
  40.         <div id="_ifAndFor">
  41.             <template v-for="(son, index) in father">
  42.                 <span v-if="index % 2 == 0">{{son}}</span>
  43.                 <span v-else-if="index % 3 == 0" style="background-color: green;">{{son}}</span>
  44.             </template>
  45.         </div>
  46.         </hr>
  47.     </body>
  48.     <script src="js/vue.js"></script>
  49.     <script>
  50.         // 这是我们的Model
  51.         var exampleData = {
  52.             message: 'Hello World!'
  53.         }
  55.         // 创建一个 Vue 实例或 "ViewModel"
  56.         // 它连接 View 与 Model
  57.         new Vue({
  58.             el: '#app',
  59.             data: exampleData
  60.         })
  61.         new Vue({
  62.             el: '#model',
  63.             data: {
  64.                 text: ""
  65.             }
  66.         })
  67.         new Vue({
  68.             el: '#_class',
  69.             data: {
  70.                 isTrue: false
  71.             },
  72.             methods: {
  73.                 getClass: function () {
  74.                     return !this.isTrue;
  75.                 }
  76.             }
  77.         })
  78.         new Vue({
  79.             el: '#_function',
  80.             data: {
  81.                 art: ""
  82.             },
  83.             methods: {
  84.                 getClick: function () {
  85.                     this.art = "梵高";
  86.                 },
  87.                 getChange: function () {
  88.                     this.art = "达文西";
  89.                 }
  90.             }
  91.         })
  92.         new Vue({
  93.             el: "#_ifAndFor",
  94.             data: {
  95.                 father: []
  96.             },
  97.             methods: {
  99.             },
  100.             mounted: function () {
  101.                 for (var i = 0; i < 10; i++) {
  102.                     this.father.push('son' + i);
  103.                 }
  104.             }
  105.         })
  106.     </script>
  107. </html>

Vue.js的小例子--随便写的的更多相关文章

  1. VUE.JS和小程序的共通之处

    我是先学习的小程序开发,之后才了解到vue.js.也是一直没有时间去看相关vue.js的知识和内容.现在回顾起来,小程序和vue.js都是前端的内容. 例如小程序中的目录结构物page+app.js+ ...

  2. 使用vue.js开发小程序

    写在前面 刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比. 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照mpvue文档完成). 开发环境 node np ...

  3. vue.js技巧小计

    //删除数组索引方法01 del (index) { this.arr.splice(index ,1); } //删除数组索引方法01 del (index) { this.$delete(this ...

  4. 收藏的js学习小例子

    1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...

  5. vue.js常见面试题及常见命令介绍

    Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...

  6. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  7. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  8. Vue.js下载方式及基本概念

    Vue.js 简介 说明及下载 Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/ vue.js如果当成一个库来使用,可以 ...

  9. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

随机推荐

  1. Linux ->> Chmod命令改变文件/文件夹属性

    简介 chmod命令用于改变linux系统文件或目录的访问权限,控制用户/用户组对文件或目录的访问权限. 用法: 两种用法:1)用字母r(读).w(写).x(执行)表示权限类型:2)用数字表示,4代表 ...

  2. javascript 随机数 生成 n-m

    例子:生成800-1500的随机整数,包含800但不包含1500 代码如下: 1500-800 = 700 Math.random()*700 var num = Math.random()*700 ...

  3. 远程桌面连接无法验证您希望连接的计算机的身份-mac连接远程桌面

    在使用Mac(苹果笔记本)连接远程桌面的时候提示:”远程桌面连接无法验证您希望连接的计算机的身份”,具体异常如截图:解决方法如下:1. 登录云服务器.2. 打开运行,然后输入命令gpedit.msc, ...

  4. laravel where筛选会判断类型吗？

    laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? 这个说会判断不对,说不会判断也不对. 当字符串'1'和数值1是 ...

  5. npm安装及webpack打包小demo

    node(node.js) 安装 1.先从https://segmentfault.com/a/1190000004245357网站下载x64位的安装包node-v4.8.1-linux-x64.ta ...

  6. 优秀的WEB前端开发框架：Bootstrap！

    其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...

  7. BZOJ2118:墨墨的等式(最短路)

    Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在 ...

  8. linux如何安装IntelliJ IDEA

    http://www.linuxidc.com/Linux/2016-12/137946.htm 创建的那个启动器脚本,只要这样输入就可以直接启动idea了

  9. PAT——1004. 成绩排名

    原题目:https://www.patest.cn/contests/pat-b-practise/1004 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每 ...

  10. [转] 有关java中两个整数的交换问题

    转载申明:本文主要是用于自己学习使用,为了完善自己的只是框架,没有任何的商业目的. 原文来源:有关Java中两个整数的交换问题 如果侵权,麻烦告之,立刻删除. 在程序开发的过程,要交换两个变量的内容, ...