小白教程|一小时上手最流行的前端框架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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
json数据格式常见操作示例
Jun 13 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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 之Section与Cookie使用总结
2012/09/14 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
js 单引号 传递方法
2009/06/22 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python 操作 MySQL数据库
2020/09/18 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
会议邀请书范文
2014/02/02 职场文书
管理提升方案
2014/06/04 职场文书
家庭困难证明
2014/10/12 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书