一个例子轻松学会Vue.js

2024-10-17 22:12:46

大家都知道Vue.js是中国人创造出来的，简单易用，所以必须要支持一下

Vue采用的MVVM设计模式

也就是说model和view绑定
model改变，view的内容改变，反之亦然

Vue主要有以下几个关键字

v-model 绑定模型
v-if 判断是否显示该dom
v-show 判断是否将该dom的display设为none
v-else if或者show为false时显示该dom
v-for 迭代
v-bind 绑定属性
v-on 绑定方法

我们以一个可查找的信息管理系统为例子

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="styles/demo.css" />
 </head>

 <body>
 <div id="app">
  <span>key</span>
  <!-- 绑定model中search.key -->
  <!-- 内容和下面每一列的数据进行比较 -->
  <!-- 内容改变，下面的每一列都马上会进行比较 -->
  <input type="text" v-model="search.key">
  <legend>
   Create New Person
  </legend>
  <div class="form-group">
   <label>Name:</label>
   <!-- 绑定model中newPerson.name -->
   <input type="text" v-model="newPerson.name"/>
  </div>
  <div class="form-group">
   <label>Age:</label>
   <!-- 绑定model中newPerson.age -->
   <input type="text" v-model="newPerson.age"/>
  </div>
  <div class="form-group">
   <label>Sex:</label>
   <!-- 绑定model中newPerson.sex -->
   <select v-model="newPerson.sex">
   <option value="Male">Male</option>
   <option value="Female">Female</option>
  </select>
  </div>
  <div class="form-group">
   <label></label>
   <!-- @click是v-on:click的缩写 -->
   <button @click="createPerson">Create</button>
  </div>
 </fieldset>
 <table>
  <thead>
  <tr>
   <th>Name</th>
   <th>Age</th>
   <th>Sex</th>
   <th>Delete</th>
  </tr>
  </thead>
  <tbody>
  <!-- 用v-for迭代，$index为每一个item的索引 -->
  <!-- v-if判断为true则显示，否则则移除，这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
  <!-- 和搜索框内容进行比较 -->
  <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
   <td >{{ person.name }}</td>
   <!-- :style是v-bind:style的缩写，满足条件则值为前面的，否则为后面的，固定的字符串要用' ',变量不需要用'' -->
   <!-- v-bind后面还可以接其他的属性例如class，id -->
   <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
   <!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
   <td v-if="person.sex =='Male'">男</td>
   <td v-else>女</td>
   <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
  </tr>
  </tbody>
 </table>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 // 初始化Vue
 //el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
 //data中为模型
 //methods为方法
 var vm = new Vue({
  el: '#app',
  data: {
  search:{
   key:""
  },
  newPerson: {
   name: '',
   age: 0,
   sex: 'Male'
  },
  people: [{
   name: 'Jack',
   age: 30,
   sex: 'Male'
  }, {
   name: 'Bill',
   age: 26,
   sex: 'Male'
  }, {
   name: 'Tracy',
   age: 22,
   sex: 'Female'
  }, {
   name: 'Chris',
   age: 36,
   sex: 'Male'
  }]
  },
  methods:{
  createPerson: function(){
   this.people.push(this.newPerson);
   // 添加完newPerson对象后，重置newPerson对象
   this.newPerson = {name: '', age: 0, sex: 'Male'}
  },
  deletePerson: function(index){
   // 删一个数组元素
   this.people.splice(index,1);
  }
  }
 })
 </script>

</html>

不需要太多的解释，直接看代码就知道Vue用法是什么

效果图

代码我已上传到github

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Highcharts＋NodeJS搭建数据可视化平台示例

前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne
IOS与网页JS交互详解及实例

IOS与网页JS交互随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值.比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器. 为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流. 第一种:JS给OC传值. 1. 技术方案:使用JavaScriptCore.framework框架 2. 使
Node.js学习入门

开始之前,安利一本正在看的书<站在两个世界的边缘>,作者程浩,上帝丢给他太多理想,却忘了给他完成理想的时间.OK,有兴趣的可以看一看. node.js如标题一样,我也是刚开始接触,大家一起学习,有不当的地方望指正.node.js是做什么的,有什么优势等问题.首先,它是什么,它是采用C++语言编写而成的,是一个JavaScript的运行环境,也就是说:可以编写系统级或者服务器端的JavaScript代码,交给node.js来解释执行.也就是说他是一个服务器端JavaScript解释器,它的目标是
过期软件破解办法实例详解

过期软件破解方法: 如果你看到了这篇博文,绝对保证不虚此行.仅仅5行脚本代码,即可破解99%的过期软件. 这件事的背景:最近在找了一些学习资料,其中有Rational Rose画的图,好久没用过它了.今天安装好,导入许可文件,结果问题出现了,提示没有激活.怎么回事??仔细一看,原来许可文件到2013年12月份就过期了(乌鸦飘过...) 在网上找了半天也没有找到一个新的许可文件,结果一狠心,手动改了一下日期,再启动,ok了,把时间再改回来.本来事儿到这儿就完了.但是结果光今天一天就手动改了好几次系
AngularJS框架的ng-app指令与自动加载实现方法分析

本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</
JS求解三元一次方程组值的方法

本文实例讲述了JS求解三元一次方程组值的方法.分享给大家供大家参考,具体如下: // 求用js 码一段代码求三元一次方程组的值! // a1 = y * b1 + z * c1 - d1 * x; (1) // a2 = y * b2 + z * c2 - d2 * x; (2) // a3 = y * b3 + z * c3 - d3 * x; (3) // (1) - (2) // a1 - a2 = y * (c1 - c2) + z * (d1 - d2) (4) // (1) - (
js实现复选框的全选和取消全选效果

在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl
JS数组返回去重后数据的方法解析

话不多说,请看代码: function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < data.length; i++) { if (!data[i].parent) { temp = data[i]; for (var j = 0; j < data.length; j++) { if (temp.DeliveryType == data[j].DeliveryType
通过AngularJS实现图片上传及缩略图展示示例

通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"
JS实现简单的二元方程计算器功能示例

本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="
简单谈谈MySQL5.7 JSON格式检索

MySQL5.7版本开始支持JSON格式,在创建表时,可以指定列表的数据类型为JSON,但是如何在JSON格式上创建索引呢?? 本人做了一个简单测试. 第一步:建立一个包含JSON类型的表: CREATE TABLE json_test` ( id` int (8) NOT NULL AUTO_INCREMENT, content` json NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 第二步:初始化数据
深入理解Angularjs向指令传递数据双向绑定机制

下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </

一个例子轻松学会Vue.js

相关推荐

随机推荐