liuyan55
liuyan55

Vue 30分钟搞定前端增删改查

JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

阅读目录

  • 一、MVVM大比拼
  • 二、Vue常用网址
  • 三、Vue基础入门
    • 1、MVVM图例
    • 2、第一个Vue实例
    • 3、双向绑定
  • 四、常用指令
    • 1、v-text、v-html指令
    • 2、v-model指令
    • 3、v-if、v-else指令
    • 4、v-show指令
    • 5、v-for指令
    • 6、v-once指令
    • 7、v-bind指令
    • 8、v-on指令
    • 9、实例一：30分钟搞定增删改查
    • 10、实例二：带分页的表格
  • 五、总结

 

正文

前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实挺火，各种入门博文眼花缭乱，博主也不敢说写得多好，就当是个学习笔记，有兴趣的可以看看。

本文原创地址：http://www.cnblogs.com/landeanfen/p/6054654.html 

回到顶部

一、MVVM大比拼

关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它们自己的优势。

  • Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。
  • Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
  • AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
  • React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。
  • Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。

更多MVVM框架优缺点比较，可以看下 这里 。

其实在博主的博文里面，说得最多的还是那句：任何技术和框架都有它存在的价值和意义！由上也可以看出没有哪个框架是真正完美的，关键看你如何取舍，在你的项目中用好了以上任何一种框架，你就是技术大牛。不过话虽这样说，博主觉得多了解一些框架对我们并无坏处，至少能开阔我们的眼界吧。

回到顶部

二、Vue常用网址

上文说了，Vue是一个开源框架，最新版本已经更新到了2.0，是一个独立的Javascript框架，不依赖于任何其他框架（例如jquery），下面是博主收集的一些常用网址。

Vue.js开源地址：https://github.com/vuejs/vue

Vue.js英文api地址：http://vuejs.org/v2/api/

后来博主又找到一个中文的api地址，感谢开源社区工作者的翻译。https://vuefe.cn/api/

还有一个博主觉得很方便的就是一个Vue的在线测试网址：https://jsfiddle.net/chrisvfritz/50wL7mdz/。里面键入相应的html+js+css可以直接运行查看效果。

回到顶部

三、Vue基础入门

回到顶部

1、MVVM图例

说到MVVM，先来看看下面下面这张图

这张图足以说明MVVM的核心功能，在这三者里面，ViewModel无疑起着重要的桥梁作用。

  • 一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；
  • 另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel通过Dom树的监听机制，触发对应的Model的数据变化。

当然在Vue.js里面ViewModel也是核心部件，它就是一个Vue实例。这个实例作用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操作。

回到顶部

2、第一个Vue实例

关于第一个实例，无疑是最简单的应用。要使用vue，不用多说，肯定是先去github上面下载源码喽，然后引入到我们的项目中来，需要引用的js就一个vue.js，版本是2.0.5。

先来看一个最简单的例子：

复制代码 
<body>
    <div id="app">
        <h1>姓名：{{ Name }}h1>
        <h1>年龄：{{ Age }}h1>
        <h1>学校：{{ School }}h1>
    div>

    <script src="Content/vue/dist/vue.js">script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小学',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
   
    script>
body>
复制代码

这段代码不难理解，我们的Model就是data变量，而ViewModel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。

  • el：表示绑定的Dom元素，此例子中表示的是父级的Dom元素。
  • data：需要绑定的数据Model。

如果仅仅是展示，只需要 姓名：{{ Name }} 这样写就好了。运行的效果如下：

值得一提的是 {{ Name }} 这种写法仅仅只能实现单向绑定，只有在Model里面数据发生变化的时候会触发界面Dom元素的变化，反之并不能触发Model数据的变化。可以通过浏览器的Console来验证这一理论。

那么，对于双向绑定的机制，Vue是如何实现的呢？

回到顶部

3、双向绑定

vue里面提供了v-model指令，为我们方便实现Model和View的双向绑定，使用也非常简单。还是上文的例子，我们加入一个文本框，里面使用v-model指令。

复制代码 
<body>
    <div id="app">
        <h1>编辑姓名：<input type="text" v-model="Name" />h1>
        <h1>姓名：{{ Name }}h1>
        <h1>年龄：{{ Age }}h1>
        <h1>学校：{{ School }}h1>
    div>

    <script src="Content/vue/dist/vue.js">script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小学',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    script>
body>
复制代码

得到效果：

双向绑定效果展示：

通过v-model指令，很方便的实现了Model和View之间的双向绑定。单从这种绑定的方式来看，还是比Knockout要简单一点，至少不用区分什么普通属性和监控属性。

回到顶部

四、常用指令

本来按照Vue文档说明，常用指令应该是放在后面介绍的，但是从使用的层面考虑，先介绍常用指令还是非常必要的，因为博主觉得这些指令是我们入手使用Vue的桥梁，没有这些基石，一切的高级应用都是空话。

Vue里面为我们提供的常用指令主要有以下一些。

  • v-text
  • v-html
  • v-if
  • v-show
  • v-else
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-pre
  • v-cloak
  • v-once

每一个指令都可以链接到相关文档，博主觉得文档里面每种指令的语法写得非常详细，在此就没必要重复做说明了，下面博主打算将一些常用的指令以分组的形式分别结合demo来进行解释说明。

回到顶部

1、v-text、v-html指令

v-text、v-html这两者分为一组很好理解，一个用于绑定文本，一个用于绑定html。上文使用到的 {{ Name }}这种写法就是v-text的的缩写形式。这个很简单，没什么好纠结的，看一个Demo就能明白。

复制代码 
<body>
    <div id="app">
        <h1>姓名：<label v-text="Name">label>h1>
        <h1>姓名：{{ Name }}h1>
        <div style="font-size:30px;font-weight:bold;" v-html="Age">年龄：div>
    div>

    <script src="Content/vue/dist/vue.js">script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: "",
        School:'光明小学',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    script>
body>
复制代码

效果如下：

代码说明：

  1. {{Name}}这种写法和v-text的作用是相同的，用于绑定标签的text属性。注意如果标签没有text属性，该绑定会失效，比如你在一个文本框上面使用v-text是没有效果的
  2. 由得到的效果可以看出，v-html绑定后会覆盖原来标签里面的内容（比如上面的“年龄：”），记住此处是覆盖而非append。
  3. 对于v-html应用的时候要慎重，在网站上动态渲染任意 HTML 有一定的危险存在，因为容易导致 XSS 跨站脚本攻击。所以最好是在信任的网址上面使用。
  4. 注意v-text和v-html绑定都是单向的，只能从Model到View的绑定，不能实现View到Model的更新。
回到顶部

2、v-model指令

v-model上面有介绍它的双向绑定功能，对于v-model指令，vue限定只能对表单控件进行绑定，常见的有、