一个例子轻松学会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 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
小程序表单认证布局及验证详解
Jun 19 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
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python 5个实用的技巧
2020/09/27 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
python实现视频压缩功能
2020/12/18 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2015选调生工作总结
2015/07/24 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers