UDN-企业互联网技术人气社区

板块导航

浏览  : 1246
回复  : 4

[原生js] 一个例子轻松学会Vue.js

[复制链接]
饼干妹妹的头像 楼主
  这篇文章主要为大家详细介绍了一个例子,帮助大轻松学会Vue.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  大家都知道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 绑定方法

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

  不需要太多的解释,直接看代码就知道Vue用法是什么
  1. <!DOCTYPE html>
  2. <html>

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

  8. <body>
  9.   <div id="app">
  10.    <span>key</span>
  11.    <!-- 绑定model中search.key -->
  12.    <!-- 内容和下面每一列的数据进行比较 -->
  13.    <!-- 内容改变,下面的每一列都马上会进行比较 -->
  14.    <input type="text" v-model="search.key">
  15.     <legend>
  16.      Create New Person
  17.     </legend>
  18.     <div class="form-group">
  19.      <label>Name:</label>
  20.      <!-- 绑定model中newPerson.name -->
  21.      <input type="text" v-model="newPerson.name"/>
  22.     </div>
  23.     <div class="form-group">
  24.      <label>Age:</label>
  25.      <!-- 绑定model中newPerson.age -->
  26.      <input type="text" v-model="newPerson.age"/>
  27.     </div>
  28.     <div class="form-group">
  29.      <label>Sex:</label>
  30.      <!-- 绑定model中newPerson.sex -->
  31.      <select v-model="newPerson.sex">
  32.      <option value="Male">Male</option>
  33.      <option value="Female">Female</option>
  34.     </select>
  35.     </div>
  36.     <div class="form-group">
  37.      <label></label>
  38.      <!-- @click是v-on:click的缩写 -->
  39.      <button @click="createPerson">Create</button>
  40.     </div>
  41.   </fieldset>
  42.   <table>
  43.    <thead>
  44.     <tr>
  45.      <th>Name</th>
  46.      <th>Age</th>
  47.      <th>Sex</th>
  48.      <th>Delete</th>
  49.     </tr>
  50.    </thead>
  51.    <tbody>
  52.     <!-- 用v-for迭代,$index为每一个item的索引 -->
  53.     <!-- v-if判断为true则显示,否则则移除,这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
  54.     <!-- 和搜索框内容进行比较 -->
  55.     <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
  56.       <td >{{ person.name }}</td>
  57.       <!-- :style是v-bind:style的缩写,满足条件则值为前面的,否则为后面的,固定的字符串要用' ',变量不需要用'' -->
  58.       <!-- v-bind后面还可以接其他的属性例如class,id -->
  59.       <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
  60.       <!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
  61.       <td v-if="person.sex =='Male'">男</td>
  62.       <td v-else>女</td>
  63.       <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
  64.     </tr>
  65.    </tbody>
  66.   </table>
  67.   </div>
  68. </body>
  69. <script src="js/vue.js"></script>
  70. <script>
  71.   // 初始化Vue
  72.   //el获取绑定的标签,#app获取id为app的dom,.app的话则获取class为app的dom
  73.   //data中为模型
  74.   //methods为方法
  75.   var vm = new Vue({
  76.    el: '#app',
  77.    data: {
  78.     search:{
  79.      key:""
  80.     },
  81.     newPerson: {
  82.      name: '',
  83.      age: 0,
  84.      sex: 'Male'
  85.     },
  86.     people: [{
  87.      name: 'Jack',
  88.      age: 30,
  89.      sex: 'Male'
  90.     }, {
  91.      name: 'Bill',
  92.      age: 26,
  93.      sex: 'Male'
  94.     }, {
  95.      name: 'Tracy',
  96.      age: 22,
  97.      sex: 'Female'
  98.     }, {
  99.      name: 'Chris',
  100.      age: 36,
  101.      sex: 'Male'
  102.     }]
  103.    },
  104.    methods:{
  105.     createPerson: function(){
  106.      this.people.push(this.newPerson);
  107.      // 添加完newPerson对象后,重置newPerson对象
  108.      this.newPerson = {name: '', age: 0, sex: 'Male'}
  109.     },
  110.     deletePerson: function(index){
  111.      // 删一个数组元素
  112.      this.people.splice(index,1);
  113.     }
  114.    }
  115.   })
  116. </script>

  117. </html>
复制代码
  
  效果图
201712124252511.jpg



相关帖子

发表于 2017-1-10 14:12:51 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2017-1-11 09:02:37 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-12-18 10:54:33 | 显示全部楼层
demo.css呢,老哥
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部