vue难学？1小时就能上手的教程

vue是如今很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。

相比angular和react，vue更加轻巧、高性能、也很容易上手。你们也能够移步vue官网，看一下它的介绍和核心功能介绍。简单粗暴的理解就是：用vue开发的时候，就是操做数据，而后vue就会处理，以数据驱动去改变DOM。使用vue，咱们能够集中精力于如何处理数据上，数据改变后，页面显示也会随之改变。

相比jquery那种操做DOM元素的开发方式，能有效提升开发效率，我的以为有接近两三倍的提高。

1、 安装

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

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

复制代码

2、核心思想

“数据绑定”是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元素里面的内容也随之改变。

3、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放置页面调用的一些方法。

4、数据绑定

使用下面的语法能够将页面元素的内容和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>

复制代码

5、事件绑定

使用下面的语法能够将页面元素的交互事件和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>

复制代码

6、综合例子

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执行商品删除操做。

以上就是vue框架的简单入门教程，你们能够到vue官网去学习更多高级应用。

不少时候跟着书和网站查找资料学习，会发现没有目标，学了不少殊不知道本身到底可以作出什么成绩。要有一个清晰的职业学习规划，学习过程当中会遇到不少问题，你能够到咱们的前端学习交流q-u-n【 731771211 】，基础，进阶。从企业招聘人才需求 到怎么学习前端开发，和学习什么内容都有免费系统分享，让你不管是自学仍是找相应的培训都能让你少走弯路。但愿能够帮助你快速了解前端，学习前端

点击：加入