【转】Vue.js入门教程(二)在页面中引入vue的方式
第二章:安装和基础效果展示
页面中引入vue
因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题。
第一种引入方式,script直接引入:
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
直接引入的好处是,随用随引,不需要的包在页面上就不加载。并且通过外链访问比打包压缩访问的速度更快。
以后我们在讲vuecli的时候会详细讲解,本教程所有例子,都会通过http直引和npm安装两种方式进行讲解。
我们由浅入深,等你学会使用npm包管理工具的时候,可以回头在把npm引入方式看一遍,你将会有更深的理解。
第二种,通过npm安装
当我需要构建一套基于node npm的项目的时候。我就应该通过npm指令去安装了,这跟其他引用到npm中的项目是一样的。
npm install vue
方法是先安装node,然后cd到你的目录去执行npm,如果你还不会使用npm,
可以查看一下关于nodejs的npm包管理器的使用方法,不会nodejs也没有关系!
这我需要提到一个新的名词,脚手架。所谓的脚手架就是通过webpack或者gulp构建好的一套包结构,里面已经在package中给写好了,你拿回来直接npm install一下就行。
因为我们后面还会用到vue-route,axios,vuex等,如果不基于自动化构建工具,我们这一套东西就会显得混乱不堪。
至于vuecli的用法,我们会在后续的文章中讲到,你可以先暂时使用第一种方法体验vue的强大之处!
引入成功后,运行一个简单示例!
当你引入vue以后,我们来讲解一个简单实例,为了帮助你快速理解,我们通过与jquery的对比,把一个效果用两种方式来实现,让你感受到vue的强大之处。
vue实现了model和view的自动绑定
<input type="text" id="input1" placeholder="我是jquery元素"><script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">$("#input1").keyup(function(){console.log($(this).val());})
</script>
这是一个jquery获取文本框内容的例子。
在keyup的时候,你看看jquery都执行了什么操作。首先第一步,jquery访问dom树,从document上面找到一个名字叫input1的元素,然后获取它的value属性,接着,把这个value的值log出来。这套操作可以说是罪大恶极。
我每次修改了里面的值,它就访问一次dom,如果我这个页面上内容再多点的话——后果将是灾难式的。
同样的东西我们看看vue中是怎么实现的:
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<div id="app"><input type="text" id="input2" placeholder="我是vue元素" v-model="message" @input="log">
</div>
<script type="text/javascript">new Vue({el:"#app",data:{message:"请输入内容.."},methods:{log:function(){console.log(this.message);}},created(){console.log("--vue加载成功!--");}})
</script>
看到这个代码,马上就有的人,开始抬杠了。
这个代码比jquery复杂多了,而且也不好理解。
我从三个方面来反驳你的观点:你有可能需要用笔和本记录下来:
第一,vue只需渲染一次dom。而不是每次都重新获取dom然后修改他的值。这样当你页面上有上千个元素的时候,他非常的节省内存。你可以把这些资源放到其他地方,例如说canvas中。后面我们会详细讲解。当你有数据更新的时候,执行完毕AJAX后数据会自动更新页面,而不需要你再次查找元素。
第二:当你的页面有复杂的逻辑关系以后,你才能发现vue是多么的优雅。所有数据全部在data(model)中管理,而jquery呢?他是基于dom的,根本无法管理数据。他每次用的时候都需要重新获取。导致你一开始是很轻松,写一句就行了,但是你到了后面提交数据的时候,你就麻烦了。难道你还准备搞出来一群全局变量挨个赋值?
第三:小程序的设计模式跟这个一模一样。这么说不太严谨,严谨的说法是写法几乎一样。毕竟他们都是基于前后端分离设计模式来的。所以你把这个用好,小程序自然就无师自通了。
作者:党云龙
链接:https://www.jianshu.com/p/ed7d9fbd71e8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
jQuery在处理单页面或者小项目的时候感觉还是可以的,,,vue适用于各大中小型项目,但是单就vue的项目而言,不利于搜索引擎的爬取和SEO优化,,,大佬,求解答
你说的对,所以,清看后续的nuxt教程!
【转】Vue.js入门教程(二)在页面中引入vue的方式相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Vue.js 入门教程
Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 A ...
- Vue.js入门实战项目(五)--编写Vue.js代码实现前端功能
前端页面通常由前端开发人员编写好,作为后端开发,只要能定位到自己需要写代码的地方,实现相应的需求即可. 完整项目我已经上传到了码云上,供大家学习参考. vuejsdemo 定位 HTML 1.找到 V ...
- 【转】Vue.js入门教程(一)从静态页面到前后端分离开发
第一章:基础知识 我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
- Node.js入门教程二之模块的使用
模块化使用的定义 什么是模块化 把代码按照逻辑和功能封装成为各种不同的模块就是代码的模块化. 模块化使用的优点 通过把代码的各自封装,相互独立,降低代码的耦合性的同时,可以自行决定引入执行那些外部模块 ...
- Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
- Vue.js基础教程
一.简单介绍 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
最新文章
- 多层感知机MLP常见的超参数有哪些?如果MLP模型对于数据集过拟合了,如何调整这些超参数来进行解决?
- 《随笔记录》20170310
- MSHA x Chaos 容灾高可用实践
- BeanUtils工具的使用(转载)
- java jstat 命令_java高分局之jstat命令使用(转)
- 周末总是被工作打扰_如何在不打扰任何人的情况下问为什么在工作中
- Android设计模式(十五)--备忘录模式
- WASM 成为 HTML、CSS 与 JS 之后的第 4 门 Web 语言
- Layui图片上传限制一张的问题
- 射频微波芯片设计4:耦合器芯片
- 【图像去雾】基于Retinex算法实现图像去雾matlab代码
- 学习记录515@色彩搭配五大方案
- 利用Cydia Substrate Hook移动MM支付
- 已有的事,后必再有。已行的事,后必再行。
- 【量化笔记】动量Momentum相关技术指标以其含义
- Hystrix - 阻断器
- 如何用matlab画烧杯,DLA模型的Matlab程序.doc
- 安卓逆向小案例——某map搜索接口【rpc调用】
- 易飞ERP安全批量清除报表队列中的信息
- XBanner实现3D画廊效果
热门文章
- LCA模板(数剖实现)
- 防抖debounce和节流throttle
- bzoj 1083 繁忙的都市
- HTTP 错误 404.3 – Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射。...
- 线程间通信 GET POST
- codeforce 606A - Magic Spheres
- svn代码版本管理总结
- JVM JRE JDK,这些东西到底是什么?(转载)
- [Leetcode][第1025题][JAVA][除数博弈][数学][递推]
- CodeForces - 888C K-Dominant Character 思维