小白教程一小时上手最流行的前端框架vue

前言

vue 是现在很火的一个前端 MVVM 框架，它以数据驱动和组件化的思想构建，与 angular 和 react 并称前端三大框架。相比 angular 和 react，vue 更加轻巧、高性能、也很容易上手。大家也可以移步 vue 官网，看一下它的介绍和核心功能介绍。简单粗暴的理解就是：用 vue 开发的时候，就是操作数据，然后 vue 就会处理，以数据驱动去改变 DOM。使用 vue，我们可以集中精力于如何处理数据上，数据改变后，页面显示也会随之改变。相比 jquery 那种操作 DOM 元素的开发方式，能有效提高开发效率，个人觉得有接近两三倍的提升。

一、安装

我们可以通过 npm 或者直接引入 script 标签两种方式来安装 vue。这里为了方便说明，采用第二种方式，我们只需要在 html 页面引入标签即可。个人测试开发可以使用 bootcdn 的资源。

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

二、核心思想

“数据绑定”是 vue 的核心思想，这里笔者举一个 hello world 例子来说明这种思想。

html 代码

<div id="app">
  <p>{{message}}</p>
  <input v-model="message">
</div>

javascript 代码

new Vue({
  el: '#app',
  data: {message: 'Hello Vue!'}
})

页面效果

我们在 html 代码里面设置了一个 id 为“app”的 div，然后在 javascript 里面实例化了一个属性 el 为“#app”的 vue 对象，表示这个 vue 对象用来处理该 div 的显示。

接着在 vue 对象的 data 属性里面设置了一个 message 字段，把这个字段和页面的 p 元素和 input 元素双向绑定起来。

这样只要 message 字段改变，p 元素的内容就会改变。只要 input 的输入内容改变，message 字段就会改变，从而导致 p 元素的内容改变。所以我们改变页面中输入框的值，p 元素里面的内容也随之改变。

三、vue 实例基本组成

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    url: 'www.salasolo.com'
  },
  methods:{showMsg: function(){alert(this.message)
      },
      jumpUrl: function(){location.href = this.url}
  },
})

可以看到，一个 vue 实例有三个基本的属性，el 属性用来指定绑定的页面容器，data 属性里面存放页面展示的数据，methods 放置页面调用的一些方法。

四、数据绑定

使用下面的语法可以将页面元素的内容和 vue 实例的 data 属性里面的字段绑定起来。

1. 文本

<span> 消息: {{message}}</span>

2. 原始 html

<span v-html="htmlCode"></span>

3. 列表

<span v-for="item in list">{{item}}</span>

4. 条件

<span v-if="isHuman"> 我是人类 </span>
<span v-else> 我不是人类 </span>

5. 属性

<a v-bind:href="url"> 这是一个链接 </a>
<img :src:href="imgUrl" alt="这是一张图片" />

6. 表达式

<span>1+1=: {{1+1}}</span>

五、事件绑定

使用下面的语法可以将页面元素的交互事件和 vue 实例的 methods 属性里面的方法绑定起来。

1. 点击事件

<button type="button" v-on:click="showMsg" > 点击调用 showMsg 方法 </button>

2. 选择事件

<select v-on:change="showChangeMsg" >
<option value="1"> 选项一 </option>
<option value="2"> 选项二 </option>
</select>

六、综合例子

html 代码

<div id="app">
    <h3> 商品列表 </h3>
    <hr/>
    <table>
        <th>
            <td> 商品名 </td><td> 商品图片 </td><td> 商品数量 </td><td> 操作 </td>
        </th>
        <tr v-for="(item,index) in list">
            <td>{{item.name}}</td>
            <td><img src="item.imgUrl" /></td>
            <td>{{item.quantity}}</td>
            <td>
                <button type="button" v-on:click="delete(index)"> 删除此商品 </button>
            </td>
        </tr>
    </table>
</div>

javascript 代码

new Vue({
    el: '#app',
    data: {list:[]
    },
    created:function(){this.loadProductList();
    },
    methods:{loadProductList:function(){$.post('/product/apiGetList',function(data){this.list = data.data.list;});
        },
        deleteProduct:function(index){
            var _this = this;
            $.post('/product/apiDelete',{productId:_this.list[index]['productId']},function(){alert('删除成功');
            });
        }
    },
})

上面这段代码表示，在页面初始化时，通过 ajax 请求后端服务器得到商品列表数据赋值给 vue 实例数据的 list 字段，然后在页面中使用 vue 模版语法循环渲染出来，并给每个商品绑定了一个删除按钮点击事件，点击后调用 vue 实例的 deleteProduct 执行商品删除操作。

分享

本人 13 年 Java 开发经验及产品研发经验，BAT 背景，曾在多家知名企业担任技术总监、企业方案选型首席顾问，先后从事内核开发、大型 Java 系统架构设计和物联网系统架构设计开发，精通复杂业务技术方案选型、架构、核心难点攻关，对于 java 语言及项目有非常深入的理解和丰富的实操经验，热爱前沿技术，乐于进行技术分享与技术探讨。