vue原来可以这样上手

今儿与一群友讨论vue相关问题让我思量极深,1.我们是否在争对性解决问题或者说是帮助别人;2.我们是否在炫耀自己的技能。以下是被戏剧化的对白:

"群友":最近按照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可以如此简单,虽然他也可以那么复杂。

闲谈结束,进入demo时间,非vue初学者可以飘过,因为这个demo太简单了。在此我再无耻的宣传下我创建的群,点击这里欢迎大家加入,不为别的,只为志同道合的友人

示例效果图如下:

点击这里下载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的一大核心能力,实现模型与视图的双向绑定
  • 还能了解到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的同学,或者说是刚踏入前端这个行业的朋友,不要被前端的框架、库、工具链等表象性的东西所吓到,因为他只是为了让前端能做更多事,能把事情做得更好。但其背后的机理还是共同的。

时间: 2024-10-06 06:32:03

vue原来可以这样上手的相关文章

一步步带你做vue后台管理框架(二)——上手使用

系列教程<一步步带你做vue后台管理框架>第二课 github地址:vue-framework-wz 线上体验地址:立即体验 闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简单方便之后你就会爱上这个框架欲罢不能的. 首先跟所有的vue项目一样,两种方式,一种去项目github地址:vue-framework-wz上下载代码包到本地,或者使用 git clone https://github.com/herozhou/vue-framework-wz.git 无论哪种方式,只要我们

前端开发工具vue.js开发实践总结

最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到的dom结构,都是通过拼接字符串的方式进行输出的.这种方式最大的痛点是拼接很麻烦,也不是很直观,几乎无法复用,和数据紧密的偶合在一起,维护不方便,太多太多的问题.在同事的推荐下,开始接触vue.js这个开源项目.如果你不知道什么是vue,那么请看这里的介绍http://vuejs.org/. vue

Vue.js和angular.js的区别

关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 由此可以看出Vue比Angular相对来说简单一些,在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发

使用vue脚手架工具搭建vue-webpack项目

对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

Vue.js – 基于 MVVM 实现交互式的 Web 界面

Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型.实际的 DOM 操作和输出格式被抽象出来成指令和过滤器.相比其它的 MVVM 框架,Vue.js 更容易上手. 官方网站      插件下载 HTML: <div id="demo"> {{message}} <input v-model=

vue中eventbus 多次触发的问题

相比于react,vue是一个更上手很快的框架.所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的.组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意组件之间传递数据无非2种方式:1.vuex2.eventbus一般地,小项目中建议用eventbus,具体怎么用呢? main.js var bus = new Vue() // in component A method bus.$emit('select', 1) // in component

Vue.js面试题

一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和Model的对象(桥梁). 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化

简单介绍一下vue2.0

Vue Vue是用于构建用户界面的渐进框架.作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目. 另外Vue的核心库只专注于视图层,这样就更容易与其他库或现有项目进行集成,也更灵活. Vue在兼容性上不支持IE8以下版本的浏览器,用到了ECMAScript 5的功能,所有支持ECMAScript 5的浏览器都没问题,像这些: 安装 如果你已经熟悉并安装webpack那可以直接装一个CLI版即命令行工具,快速方便. $ npm install -

react学习笔记(一)

在开篇之前,先来说说选择react的初衷. 一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析. 1.数据流.Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上.Vue默认为单向数据绑定.React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面. 2.组件化.Vue和React都支持组件化.组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任