如何安装和使用vue

vue是什么

其实网上有很多关于vue的介绍，这里就不多做赘述，主要谈谈我自己的看法。

vue从本质上来说其实就是一个js库，和jquery一样都是用JavaScript写的代码库。那么vue有什么不同的地方呢？vue是一种mvvm模式，通过数据来影响视图的变化，帮助我们从繁琐的dom操作中解脱出来，让我们可以专心的处理数据。

举个简单的例子：用普通代码和vue来实现点击按钮改变标题的功能

普通代码实现：

<h1>
    原始实现
</h1>
<p class="title">
    从0开始学习vue
</p>
<button class="btn">点我改变</button>

<script>
    let dom = document.getElementsByClassName('title')[0]; // 获取修改的目标dom
    let btn = document.getElementsByClassName('btn')[0]; // 获取按钮dom
    btn.addEventListener('click', () => { // 监听点击事件
        dom.innerText = '我不学，哎，我就是玩！' // 进行修改操作
    })
</script>

vue实现

<div id="app">
    <h1>
        vue实现
    </h1>
    <p>
        {{ title }}
    </p>
    <button @click="change">点我改变</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            title: '从0开始学习vue'
        },
        methods: {
            change() {
                this.title = '我不学，哎，我就是玩！'
            }
        }
    })
</script>

对比上面两段代码可以发现：

普通的代码实现需要大量的dom的操作，仅仅是点击按钮修改标题内容，就需要多次获取dom，如果功能在复杂一点，繁琐程度可想而知
而vue实现，并不需要涉及大量dom的操作，只需要简单的修改数据就可以实现同样的功能。

vue能实现这样的功能主要源于：数据响应式 + 模版编译 + 模版渲染。至于其中的原理目前不需要探究，只需要了解vue具备改变数据即可改变视图的功能即可。

引入vue

想要学习如何使用vue，首先需要了解如何引入（安装）vue。官网上对此描述的很详细，这里就不做深究，参考 vue-安装

如果只是学习的话，推荐使用cdn引入，这样更加简单

// 建议放到head内
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

npm安装本身用的比较少，因为单独安装vue是比较麻烦的，因为需要其他插件配合使用。从学习角度来说，增加了学习成本，对于项目来说有更成熟的方案，所以并不建议使用npm引入vue。

cli安装一般适用于项目构建，通过脚手架可以快速的搭建起一个vue项目，不需要额外的配置，只需要专注核心代码编写即可

以上内容仅供学习参考，可能会有不够严谨的地方还望见谅，欢迎讨论。

从0开始学习vue——什么是vue、如何安装

如何安装和使用vue

vue是什么

引入vue