hello Vue

简介: hello Vue



使用Vue的时候需要通过构造函数Vue()创建一个Vue根实例,这个根实例是View和Model交互的桥梁,格式代码如下:

var App= new Vue({
        //编写选项代码
    });

使用关键字new调用Vue构造器创建一个新的Vue实例,在实例中需要传入一些选项对象,选项对象包括el(挂载元素)、data(数据)、methods(方法)、template(模板)、生命周期钩子函数等。例2-1演示创建Vue实例的过程。

第一个Vue程序

在Chrome浏览器上运行第一个Vue应用程序,并按F12键进入开发者工具模式, 在控制台输入app.message=‘Hello Vue’,然后按Enter键,浏览器中显示的内容会直接变成Hello Vue

此时可以在控制台直接输入app.message修改message的值,中间可以省略data,在这个操作中,笔者并没有主动操作DOM,只是让页面的内容发生了变化,这就是通过Vue的数据绑定功能实现的。在MVVM模式中Vue要求ViewModel层使用观察者模式实现数据的监听与绑定,以此做到数据与视图的快速响应。

Vue开发工具

前端开发工具有很多,笔者偏爱WebStorm,WebStorm是Jetbrains公司旗下一款JavaScript开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。其与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分功能。

下载WebStorm工具

官网地址:https://www.jetbrains.com/webstorm/download/#section=Windows。WebStorm的安装也比较简单,基本一路单击“下一步”按钮就可以了。注意:WebStorm本身不是免费的,应通过正规渠道进行安装。

安装WebStorm

安装成功后,就可以创建第一个项目了,

JavaScript版本修改为最新的ES6

在学习Vue.js之前,首先要了解ES6。ECMAScript 6(简称ES6)是JavaScript的语言标准。Vue.js需要ES6的语法支持,所以需要更改WebStorm中的ECMAScript版本,

Vue-cli脚手架

利用Vue-cli脚手架构建Vue项目。现在的网速越来越快了,很多人家里都是几十甚至上百兆位每秒的光纤,手机也是4G网络起步了,按道理一个网页才几百KB数据,而且浏览器本身还会缓存很多资源文件,那么几十兆位每秒的光纤为什么打开一个之前已经打开过的有缓存的页面还是很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停地渲染新的DOM树,从而导致页面看起来非常卡顿。

Virtual DOM是虚拟DOM的英文,简单来说,它可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,所以并没有真实地操作DOM,因此叫作虚拟DOM。最后,计算完毕才真正将DOM操作提交,并将DOM操作变化反映到DOM树上。

目录
相关文章
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
15 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
5天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0
|
5天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件