vue vuex 挂载_第一章 vue的学习

前言首先，非常感谢ChenTH师兄给我分享的资源，让我可以快速的学习vue。我是跟着b站王红元老师 (微博：coderwhy)的课程学习的，很多干货来源于王老师的课件代码等。有兴趣的同学也可以去看看。这个推文的目的是为了督促自己不断的学习，巩固。好了，话不多说，进入正题。

  01 vue的简单介绍 

Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM

学习vue需要具备的基础和工具

html，css，js

webstorm/vscode/hubuiler(只要你能打开写js的代码的都可)

　02 vue.js安装

方法一  ：直接cdn引用

方法二 ：下载本地引用

开发环境 https://vuejs.org/js/vue.js 

生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装(个人觉得开发项目可以)

# 最新稳定版$ npm install vue

(我在学习的过程是下载了官方的开发版本，需要哪种就看大家需求啦)

　03 第一个vue

没错，就是hello vue.js，来，上代码。

< div id= "app" >    < h2 >{{message}} h2 >    < h1 >{{name}} h1 > div > < script src= "../js/vue.js" > script > < script >    // let(变量)/const(常量)    // 编程范式: 声明式编程    const app = new Vue({        el: '#app', // 用于挂载要管理的元素        data: { // 定义数据            message: 'hello，vue!',            name: 'sunny'       }   })

划重点：这个东西和我们之前学习的思维是不一样的,它挂载元素，并且可以实时更新。创建Vue对象的时候，传入了一些options：{}

{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

{}中包含了data属性：该属性中通常会存储一些数据

这些数据可以是我们直接定义出来的，比如像上面这样。

也可能是来自网络，从服务器加载的。

当我更改app.name="Laushumin"时，网页界面就会实时更新，有兴趣的小伙伴试试，哈哈，感受一下响应式的魅力。

写在最后：

这是我记录学习的过程

每周一更，不定时

如果有什么好的建议或意见

可以通过小程序给我留言哈

学无止境，一起加油！

END -

文字 | sunny

图片 | vue官网