小白教程|一小时上手最流行的前端框架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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
原生js实现滑块区间组件
Jan 20 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python守护线程用法实例
2017/06/23 Python
python发送邮件脚本
2018/05/22 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
详解python中的lambda与sorted函数
2020/09/04 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
医院党员公开承诺书
2014/08/30 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
先进单位申报材料
2014/12/25 职场文书
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技