最流行的前端框架vue基础
简介:
vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步vue官网,看一下它的介绍和核心功能介绍。简单粗暴的理解就是:用vue开发的时候,就是操作数据,然后vue就会处理,以数据驱动去改变DOM。使用vue,我们可以集中精力于如何处理数据上,数据改变后,页面显示也会随之改变。相比jquery那种操作DOM元素的开发方式,能有效提高开发效率,个人觉得有接近两三倍的提升
一、 安装
我们可以通过npm或者直接引入script标签两种方式来安装vue。这里为了方便说明,采用第二种方式,我们只需要在html页面引入标签即可。个人测试开发可以使用bootcdn的资源。
1
二、核心思想
“数据绑定”是vue的核心思想,这里笔者举一个hello world例子来说明这种思想。
html代码
<div id="app"><p>{{ message }}</p><input v-model="message">
</div>
javascript代码
new Vue({el: '#app',data: {message: 'Hello 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">这是一个链接</a>
<img :src:href="imgUrl" alt="这是一张图片" />
6.表达式
<span>1+1=: {{ 1+1 }}</span>
五、事件绑定
使用下面的语法可以将页面元素的交互事件和vue实例的methods属性里面的方法绑定起来。
- 点击事件
<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基础相关推荐
- 详细总结流行前端框架Vue重难点概念
详细总结流行前端框架Vue重难点概念 1 什么是Vue? 2 Vue基本属性 3 Vue基本指令 4 组件化 4.1 创建组件 4.1.1 注册全局组件 4.1.2 注册局部组件 4.2 组件通信 5 ...
- 目前比较流行的前端框架
目前比较流行的前端框架 根据查找的资料,整理一下经常使用目前互联网比较流行的开发框架,方便后期逐个了解学习. 前端框架 (一)Bootstrap Bootstrap是最流行的前端开发框架,可以让不是前 ...
- JavaWeb前端框架VUE和Element组件详解
文章目录 前言 一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
- vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处 最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
- 前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
- 失败原因【object object】_使用前端框架Vue的原因!
1.前端框架的根本意义 1.1 前端框架的好处 最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
- 前端框架Vue、angular、React的优点和缺点,以及应用场景
学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些,以及他们的优缺点和应用场景有哪些呢? 一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界 ...
- [QUICK UI] 有哪些目前流行的前端框架
From: https://blog.csdn.net/qianduankuangjia/article/details/78185047 使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中 ...
- 有哪些目前流行的前端框架
使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中可能会用到不同的组件功能,这样说可能有一点片面,但是在面临几十种再做出选择的时候确实有一定的难度,难道每一种我都要去熟悉?这是不可能的事情, ...
最新文章
- Saltstack 用户管理
- mysql 存储过程 获取错误,MySQL存储过程相互调用并获得错误码示例
- 希尔排序算法实现思想个人理解
- 强制回收和IDisposable.Dispose方法
- NRF24L01模块配置
- Linux中的一个命令行计算器bc简介
- set row count
- ES查看索引库结构和数据
- 《Effective Java》阅读笔记
- linux百分比查看文件,Linux 如何查看内存使用率百分比?
- java udp多线程服务器_UDP服务端多线程-----
- VMware Workstation 不可恢复错误: (vcpu-0) vcpu-0:VERIFY vmcore/vmm/main/cpuid.c:376 bugNr=1036521
- uipath 收邮件_UIpath 循环读取IMAP邮件,并保存附件
- 【软件资源】MATLAB 7.0 安装教程
- python实现局域网内传输文件
- 每台计算机需要配置网关吗,怎么设置一台电脑作为网关
- ipersistfile save 失败 错误代码“0x80070005” 拒绝访问的解决办法
- MeanShift算法原理及其python自定义实现
- 老版本金蝶迷你版9.1升级到金蝶KIS 13.0,升级错误.
- 微软亚洲研究院 (MSRA) 的实习体验如何?
热门文章
- Nginx正则表达式与location匹配简介
- 解决问题:cannot create symlink in “/etc/docker“: existing file in the way
- win10 pycharm安装使用 MySQLdb
- 解决问题:UnicodeDecodeError utf-8 codec cant decode byte 0xb5 in position 116:
- 华为手机 标题栏 Notification 8.0 不显示
- 51单片机_15-1 LED亮度调节
- nfs共享存储web项目集群的一次下载流为空FIleChannel空洞bug
- MICCAI-iseg2017挑战赛小结与婴儿脑组织分割总结
- springboot注解方式实现aop及常规方式
- Lunix磁盘与文件系统管理