小白教程|一小时上手最流行的前端框架vue(推荐)

 更新时间:2019-04-10 22:00:19   作者:佚名   我要评论(0)

前言
vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也

前言

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

一、 安装

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

<script src="http://files.jb51.net/file_images/article/201904/2019410165600869.gif?2019310165638" />

我们在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" rel="external nofollow" >这是一个链接</a>
<img :src:href="imgUrl" rel="external nofollow" 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执行商品删除操作。

以上就是vue框架的简单入门介绍,大家可以到vue官网去学习更多高级应用。

以上所述是小编给大家介绍的前端框架vue详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 前端框架Vue.js中Directive知识详解
  • 前端框架Vue.js构建大型应用浅析
  • vue,angular,avalon这三种MVVM框架优缺点
  • Vue框架中正确引入JS库的方法介绍
  • vue.js中mint-ui框架的使用方法
  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
  • Vue2.0 UI框架ElementUI使用方法详解
  • 前端框架学习总结之Angular、React与Vue的比较详解
  • 利用VUE框架,实现列表分页功能示例代码
  • 基于Vuejs框架实现翻页组件

相关文章

  • 小白教程|一小时上手最流行的前端框架vue(推荐)

    小白教程|一小时上手最流行的前端框架vue(推荐)

    前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也
    2019-04-10
  • 如何理解Java中基类子对象的构建过程从"基类向外"进行扩散的?

    如何理解Java中基类子对象的构建过程从"基类向外"进行扩散的?

    《Java编程思想》复用类一章,提出基类的子对象的构建过程是从基类“向外”进行扩散的。 下面通过实例进行讲解,首先看下面的代码: import static net.min
    2019-04-10
  • python实现抖音点赞功能

    python实现抖音点赞功能

    本文实例为大家分享了python实现抖音点赞功能的具体代码,供大家参考,具体内容如下 #coding=utf-8 from time import sleep, ctime import threading impo
    2019-04-07
  • python制作抖音代码舞

    python制作抖音代码舞

    本文实例为大家分享了抖音代码舞python制作代码,供大家参考,具体内容如下 一、效果图 二、转换代码 from img import Image ascil_char = list("$@B%8&
    2019-04-07
  • 详解vue 不同环境配置不同的打包命令

    详解vue 不同环境配置不同的打包命令

    最近做的一个项目是配置了三个环境的:正式环境、测试环境和开发环境,下面以这个为例 第一步:安装cross-env npm i --save-dev cross-env 或者在 pa
    2019-04-07
  • java实现图片任意角度旋转

    java实现图片任意角度旋转

    本文实例为大家分享了Java实现图片旋转,供大家参考,具体内容如下 方法一:普通方法实现图片旋转 /** * 图像旋转 * @param src * @param angel
    2019-04-07
  • 使用docker+devpi搭建本地pypi源的方法

    使用docker+devpi搭建本地pypi源的方法

    前一段时间开发需要经常使用 pip 下载,虽然把 pip 源改成了国内源,但我对速度还是不满意,更为重要的是集成 测试环境是离线的,要在集成测试环境开发显然
    2019-04-07
  • 浅谈express.js框架中间件(middleware)

    浅谈express.js框架中间件(middleware)

    _express.js_作为_Node.js_的老牌框架,是现有框架中最全面的。然而在学习express除了那些api之外,对于框架最重要的就是__中间件__这个概念了。如果理解了,就
    2019-04-07
  • ASP.NET Core利用Jaeger实现分布式追踪详解

    ASP.NET Core利用Jaeger实现分布式追踪详解

    前言 最近我们公司的部分.NET Core的项目接入了Jaeger,也算是稍微完善了一下.NET团队的技术栈。 至于为什么选择Jaeger而不是Skywalking,这个问题我只能回
    2019-04-07
  • vue自定义指令directive的使用方法

    vue自定义指令directive的使用方法

    Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到v
    2019-04-07

最新评论