vue原来能够这样上手

时间  2019-12-04 标签 vue 原来 能够 这样 上手

    今儿与一群友讨论vue相关问题让我思量极深，1.咱们是否在争对性解决问题或者说是帮助别人；2.咱们是否在炫耀本身的技能。如下是被戏剧化的对白：javascript


"群友"：最近按照vue官网示例学习了一周，leader要我回报下成果

"sam（本人）"：给他撸一个带vue的界面就好了撒

"群友"：撸一个界面? 能给一个示例吗

"sam"(心里读白)：我撸vue也就一两月的时间，竟然有一小白向我要示例，我就三下五除二的用vue-cli给建立一个hello vue。而后直接发给他了。

"群友"：这是什么鬼，vue还须要nodejs和webpack才能用吗，官网没有说呀。

"sam"：不必定，vue只是一个视图(mvvm)渲染引擎，他能够直接引入到页面中，但他最大的特性是组件化，对组件的合并和打包就须要webpack的支持，webpack运行在nodejs环境上的，因此须要这两个。若是你的组件关系复杂，你还须要引入vuex作状态管理。

"群友"：天呀，我就学了vue，是否是就没办法用了，我难道就白学了。

"sam"：语塞....

        此时我语塞了，沉默了，思绪千般。我这样引导(很差意思，在这里无耻的把本身抬高了一点，向各位道歉。)他对吗？他(群友)如今真的须要了解nodejs和webpack吗，甚至是vuex。难道是我在炫耀本身会的技能，何况原本本身就是泥菩萨过江，自身难保。因此我深思熟虑，决定只用vue作一个todoList的demo发给这位群友，使其明白他钟爱的vue，也是我钟爱的vue能够如此简单，虽然他也能够那么复杂。css


        闲谈结束，进入demo时间，非vue初学者能够飘过，由于这个demo太简单了。在此我再无耻的宣传下我建立的群，点击这里欢迎你们加入，不为别的，只为志同道合的友人。html

示例效果图以下：

点击这里下载demo前端

 

上代码：

第一部分，引入vue和bootstrap库

复制代码 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../js/bootstrap/base.min.css" />
    <script src="../js/vue.2.1.8.js" type="text/javascript"></script>
</head>
复制代码

第二部分，html内容，也就是vue的模板

复制代码 
<div id="wrap" class="wrap container">
    <div class="row">
        <div class="col-sm-10">
            <input type="text" class="form-control" v-model="val" /> 
        </div>
        <div class="col-sm-2">
    <button type="button" v-on:click="add" class="btn btn-primary" >add</button> </div>
    </div>
    <table class="table" >
        <thead>
            <tr>
                <th>Id</th>
                <th>cont</th>
                <th>action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for=" item in list">
                <td>{{item.id}}</td>
                <td>{{item.cont}}</td>
                <td><button type="button" v-on:click='del(item)' class="btn btn-primary" >del</button></td>
            </tr>
        </tbody>
    </table>
</div>
复制代码

第三部分，vue的实现模型与视图的交互

复制代码 
<script>
    var lastIndex = 2, vModel = {
        list: [{ id: 1, cont: 'one' },{ id: 2, cont: 'two' }],
        val: null
    };
    new Vue({
        data: vModel,
        el: '#wrap',
        methods:{
            add:function(){
                this.list.push({ id: lastIndex++, cont: this.val});
            },
            del:function(item){ 
                let index = this.list.indexOf(item);
                this.list.splice(index,1);
            }
        }
    });
</script>
复制代码

经过此示例你能学到什么？

  • vue的做用是什么，原来他就是把js中的模型与html视图作绑定，如new Vue时：
    • data属性：指向与html视图相关联的model(模型)
    • el：指向html视图的渲染域
    • methods：能够从html视图响应的方法
  • html视图第4行<input type="text" class="form-control" v-model="val" />，其中v-model指向了data属性关联的model(本示例中的vModel.val)的val属性。
  • vue的视图是如何将数据传递给model，而model又是如何将数据展现到视图呢，经过methods.add方法的响应能够改变其vModel，vModel的改变会自动响应的到html视图，methods.del方法也是如此。这就是vue的一大核心能力，实现模型与视图的双向绑定（多谢“两眼欲读”博友纠正：vue的核心之一并不是双向绑定，而是基于响应式设计，在此更正，但愿你们谅解）。
  • 还能了解到v-for指令的应用，以及列表中的事件在执行时是如何向事件函数传递参数的，见代码:
<tr v-for=" item in list">
    <td>{{item.id}}</td>
    <td>{{item.cont}}</td>
    <td><button type="button" v-on:click='del(item)' class="btn btn-primary" >del</button></td>
</tr>

      list是vModel的一个属性，而item in list是在循环list，并把每一次的循环项赋值给item,而后在经过视图模板中绑定其相关的值，如item.id等，在绑定事件时以item为参数的形式传递给vue能够响应的事件函数，如:del(item)。vue

写在末尾

      我的愚见，此示例虽然简单，但体现了vue的一大核心能力，就是双向绑定。模型影响视图的变化，反过来视图也会能够改变模型（多谢“两眼欲读”博友纠正：vue的核心之一并不是双向绑定，而是基于响应式设计，在此更正，但愿你们谅解）。java

      此博客更但愿让初学vue的同窗，或者说是刚踏入前端这个行业的朋友，不要被前端的框架、库、工具链等表象性的东西所吓到，由于他只是为了让前端能作更多事，能把事情作得更好。但其背后的机理仍是共同的。node

联系我们 沪ICP备13005482号-10