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

作者:全栈社区 时间:2024-04-30 10:34:20 

前言

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!'
}
})

页面效果

小白教程|一小时上手最流行的前端框架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" 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详解整合网站的支持!

来源:https://blog.csdn.net/zhsmain/article/details/89099085

标签:vue,框架
0
投稿

猜你喜欢

  • 用python实现读取xlsx表格操作

    2022-11-26 17:08:19
  • Python如何实现Paramiko的二次封装

    2023-07-21 14:46:47
  • Python利用PyPDF2快速拆分PDF文档

    2021-11-06 09:39:23
  • MySQL执行外部sql脚本文件的命令

    2024-01-20 11:13:49
  • Python嵌入C/C++进行开发详解

    2024-01-02 06:39:48
  • Python深入浅出分析元类

    2022-01-10 09:09:00
  • python和php哪个容易学

    2024-05-05 09:31:52
  • Python selenium使用autoIT上传附件过程详解

    2023-05-23 03:59:13
  • TypeScript类型检查详谈及火爆原因

    2022-01-24 11:48:41
  • Python参数传递机制传值和传引用原理详解

    2023-07-28 11:16:02
  • python实现线性回归的示例代码

    2021-04-26 14:54:47
  • Python request中文乱码问题解决方案

    2023-11-20 16:16:43
  • 谈谈sqlserver自定义函数与存储过程的区别

    2024-01-28 18:56:08
  • AJAX实现web页面中级联菜单的设计

    2007-09-26 13:37:00
  • MYSQL中取得最后一条记录

    2010-03-09 16:08:00
  • python实现发送邮件及附件功能

    2023-12-30 23:27:04
  • python中pandas库中DataFrame对行和列的操作使用方法示例

    2022-07-05 03:09:00
  • JavaScript深入介绍WebAPI的用法

    2024-04-19 10:05:26
  • python 字典修改键(key)的几种方法

    2021-01-05 16:58:00
  • MySQL Proxy应用入门(1)--安装MySQL Proxy

    2011-03-08 09:50:00
  • asp之家 网络编程 m.aspxhome.com