一个例子轻松学会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 版本]
Mar 20 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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
php解压文件代码实现php在线解压
2014/02/13 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
CI框架中zip类应用示例
2014/06/17 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Python列表切片操作实例总结
2019/02/19 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
New delete 与malloc free 的联系与区别
2013/02/04 面试题
应征英语教师求职信
2013/11/27 职场文书
诉前财产保全担保书
2014/05/20 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
何玥事迹观后感
2015/06/16 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis