一个例子轻松学会Vue.js


Posted in Javascript onJanuary 02, 2017

大家都知道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用法是什么

效果图

一个例子轻松学会Vue.js

代码我已上传到github

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP数字格式化
2006/12/06 PHP
source.php查看源文件
2006/12/09 PHP
PHP中文乱码解决方案
2015/03/05 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
js查找父节点的简单方法
2008/06/28 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
详解python深浅拷贝区别
2019/06/24 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python os.listdir()乱码解决方案
2021/01/31 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
研究生求职推荐信范文
2013/11/30 职场文书
清洁工表扬信
2014/01/08 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
公司任命书模板
2014/06/06 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
运动员代表致辞
2015/07/29 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle