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


Posted in Javascript onApril 10, 2019

前言

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框架的简单入门介绍,大家可以到vue官网去学习更多高级应用。

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

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
在js中修改html body的样式
Nov 11 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 #Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
详解Vue源码学习之双向绑定
Apr 10 #Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 #Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 #Javascript
angular2 NgModel模块的具体使用方法
Apr 10 #Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
PHP教程 基本语法
2009/10/23 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Django models.py应用实现过程详解
2019/07/29 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
国窖1573广告词
2014/03/21 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
交通安全月活动总结
2015/05/08 职场文书
爱的教育观后感
2015/06/17 职场文书
开业庆典致辞
2015/08/01 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android