前端框架vue该怎么入门

本篇文章给大家分享的是有关前端框架vue该怎么入门，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

为曲水等地区用户提供了全套网页设计制作服务，及曲水网站建设行业解决方案。主营业务为成都网站制作、网站建设、曲水网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

一、安装

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

二、核心思想

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

html代码


 {{ message }}

javascript代码

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

页面效果

前端框架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.文本

消息: {{ message }}

2.原始html

3.列表

{{item}}

4.条件

我是人类
我不是人类

5.属性

这是一个链接

6.表达式

1+1=: {{ 1+1 }}

五、事件绑定

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

1. 点击事件

点击调用showMsg方法

2.选择事件


选项一
选项二

六、综合例子

html代码


  商品列表
  
  
    
    
    
      
      
      
      
    
  
       商品名 商品图片 商品数量 操作 {{item.name}} {{item.quantity}} 
        删除此商品

	商品名	商品图片	商品数量	操作	{{item.name}}		{{item.quantity}}	删除此商品

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该怎么入门
转载注明：http://cqcxhl.com/article/gjhseo.html

重庆分公司，新征程启航

前端框架vue该怎么入门

商品列表

其他资讯