第二章：安装和基础效果展示

页面中引入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教程！