小白教程|一小时上手最流行的前端框架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 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
数控个人求职信范文
2014/02/03 职场文书
大学生村官承诺书
2014/03/28 职场文书
签订劳动合同通知书
2015/04/16 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
数据库之SQL技巧整理案例
2021/07/07 SQL Server
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript