正文

vue.js精讲01

IP云
IP云V管理员/3 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

笔记及源码地址 ： https://github.com/wll8/vue_note

01
  • 2017-09-13

view
一个 mvvm框架(库)，和 ag 类似。
比较小巧，容易上手。

mvc:
mvp
mvvm
mvx(mv*)

vue 和 ag 的区别。

不用纠结什么好，项目适合什么就用什么。
vue
简单
中文文档
指令： v-xxx
例子： html + json + vue实例
维护： 个人
适合： 移动

ag
上手难
英文文档
指令： ng-xxx
例子： 把所有属性和方法挂到 $scope 上
维护： 谷歌
合适： pc

共同点：
不兼容低版本ie

vue雏形 
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

    <div id="box">{{msg}}</div> <!-- html -->

    <script>

      var json={ /*json*/

        el:'#box',

        data:{

          msg:'vue'

        }

      }

      var c=new Vue(json); // vue实例

    </script>

常用指令 
指令： 扩展 html 标签功能，属性。

v-model 一般用表单元素 input 上。

注，教程失效部分：

    v-repeat 已改为 v-for

    $index 弃用，改为 `(value, index) in arr` 得到 index 变量。

    $key 弃用，改为 `(value, key) in obj` 得到 key 变量。


    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

    <div id="box">

      <input v-model="msg">

      {{msg}} <br>

      {{arr}} <br>

      {{obj}} <br>

      数组<hr>

      <p v-for="value in arr">{{value}}</p>

      下标，数组<hr>

      <p v-for="(value, index) in arr">{{index}}{{value}}</p>

      对象<hr>

      <p v-for="value in obj">{{value}}</p>

      key，对象<hr>

      <p v-for="(value, key) in obj">{{key}}{{value}}</p>

    </div>

    <script>

      var json={ /*json*/

        el:'#box',

        data:{

          msg:'vue',

          arr:[1,2,3],

          obj:{a:1,b:2}

        }

      }

      var c=new Vue(json); // vue实例

    </script>

事件 
所有事件都写在 methods 中。


    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

    <div id="box">

    <button @click="show()">alert</button>

    </div>

    <script>

      var json={

        el:'#box',

        methods:{

          show:function(){

            alert(1);

            console.log(this.$el);

          }

        }

      }

      var c=new Vue(json); // vue实例

    </script>

vue + bootstrap 实现 todolist

todolist也被认为是留言版。
在线 bootstrap ，引入 -alpha 或 -beta 版本js会报错。 

    https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.js

    Uncaught Error: Bootstrap dropdown require Popper.js

    https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js

    Uncaught Error: Bootstrap tooltips require Tether

    https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js

    正常使用。

相关源码

01.vue雏形 

  <script src="https://unpkg.com/vue"></script>

  <div id="box">{{msg}}</div> <!-- html -->

  <script>

    var json={ /*json*/

      el:'#box',

      data:{

        msg:'vue'

      }

    }

    var c=new Vue(json); // vue实例

  </script>

02.常用指令 

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

  <div id="box">

    <input v-model="msg">

    {{msg}} <br>

    {{arr}} <br>

    {{obj}} <br>

    数组<hr>

    <p v-for="value in arr">{{value}}</p>

    下标，数组<hr>

    <p v-for="(value, index) in arr">{{index}}{{value}}</p>

    对象<hr>

    <p v-for="value in obj">{{value}}</p>

    key，对象<hr>

    <p v-for="(value, key) in obj">{{key}}{{value}}</p>

    事件<hr>

     <button @click="show()">alert</button>

     <button @click="add()">arr push</button>

    v-show <hr>

    <button @click="show_btn=!show_btn">显示隐藏</button>

    <p v-show="show_btn">显示隐藏</p>

  </div>

  <script>

    var json={ /*json*/

      el:'#box', /*html元素*/

      data:{ /*变量*/

        msg:'vue',

        arr:[1,2,3],

        counter:0,

        show_btn:true,

        obj:{a:1,b:2}

      },

      methods:{ /*所有方法都放在里面，注意s*/

        show:function(){

          alert(1);

          console.log(this.$el);

        },

        add:function(){

          this.arr.push(1);

        }

      }

    }

    var c=new Vue(json); // vue实例

  </script>

03.todolist 

  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

  <script>

    window.onload=function(){

      new Vue({

        el:'#box',

        data:{

          myData:[

          ],

          username:'',

          age:'',

          nowIndex:-1, // 当前点击的数据

        },

        methods:{

          add:function(){

            this.myData.push({

              name:this.username,

              age:this.age

            });

            this.username='';

            this.age='';

          },

          del:function(n){

            if(n==-2){

              this.myData=[];

            }else{

              this.myData.splice(n,1); // 删除数据中的第n位

            }

          }

        }

      })

    }

  </script>

  <div class="conatiner" id="box">

    <form role="form">

      <div class="form-group">

        <label for="username">用户名：</label>

        <input v-model="username" type="text" id="username" class="form-control" placeholder="输入用户名">

      </div>

      <div class="form-group">

        <label for="age">年　龄：</label>

        <input v-model="age" type="text" id="age" class="form-control" placeholder="输入年龄">

      </div>

      <div class="form-group">

        <input type="button" value="添加" class="btn btn-primary" @click="add()">

        <input type="reset" value="重置" class="btn btn-danger">

      </div>

    </form>

    <hr>

    <table class="table table-bordered table-hover">

      <caption class="h3 text-info text-center">用户信息表</caption>

      <tr class="text-danger">

        <th class="text-center">序号</th>

        <th class="text-center">名字</th>

        <th class="text-center">年龄</th>

        <th class="text-center">操作</th>

      </tr>

      <tr class="text-center" v-for="(item, index) in myData">

        <td>{{index+1}}</td>

        <td>{{item.name}}</td>

        <td>{{item.age}}</td>

        <td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button></td>

      </tr>

      <tr v-show="myData!=0">

        <td colspan="4" class="text-right">

          <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button>

        </td>

      </tr>

      <tr v-show="myData.length==0">

        <td colspan="4" class="text-center text-muted">

          <p>暂无数据...</p>

        </td>

      </tr>

    </table>

    <!-- 模态框，弹出框 -->

    <div role="dialog" class="modal fade" id="layer">

      <div class="modal-content">

        <div class="modal-header">

          <button class="close" data-dismiss="modal"><span>&times;</span></button>

          <div class="modal-title">确认删除{{nowIndex==-2 ? '全部' : ''}}么？</div>

        </div>

        <div class="modal-body text-right">

          <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>

          <button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del(nowIndex)">确认</button>

        </div>

      </div>

    </div>

  </div>
​

相关阅读

目录[+]