我的vue学习之路

前言

之前看过一段时间vue的官方文档，也听别人说vue是多么好用，多么容易入门。然而到了我自己去学习时，心里总是对它似乎充满神秘感。以至于害怕学不会。

看官方文档也是看一点跳一点，总想一口气吃成一个大胖子（显示中就是个小胖子:-)）。发现这样看似乎看不会，然后就去看教学视频。大概看懂了一些基本指令后，就想着来个饿了么之类的实战项目练手。vue-cli构建好项目后，一看项目结构我就懵逼了。这都些啥玩意。import,export default. Vue.use()都是闻所未闻。强行跟着教学视频走了几节课后就坚持不下去了。

这也可能是我想要一蹴而就的性格有关。痛定思痛，准备重新完整看官方文档，跟着文档一步一步敲。并且还要思考为什么。学完一部分，写点文章做个总结。让自己知道原来自己学到了什么。算是留下成长的足迹吧。不看教学视频，看了这么多教学视频发现。自己的效率低下，然后呢，长此以往，会形成对教学视频的依赖。毕竟以后还要接触很多新技术。总不能都指望每次都吃别人嚼烂的东西吧。当然，在我把官方文档通读的前提下，还要找个比较好的开源项目。实战一下。这个时候哪怕去看实战教学视频也不会被牵着鼻子走了，因为我会自己思考业务。不像个傻子一样只会听课，听完忘掉，或者是离开老师的代码就自己写不出来。

再看官方文档的同时，还要补习一下原生js基础。之前一直依赖jquery,离开它，估计写个tab栏都得半天。考虑到原生js越来越成熟，未来前景很好。赶紧学一学吧。趁年轻，争取在这刚毕业的一年里快速成长。早日向前端大神靠拢。

vue 基础

1.安装使用

最基本的使用就是直接在html文件里面script引入 CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
复制代码

这个是开发版本，包含了完整的警告和调试模式。 目前先不用npm 安装，先熟悉基本语法。

2.第一个vue实例

let vm = new Vue({
    el: '#app',
    data:{
        
    }
});
复制代码

创建实例时，可以传入一个选项对象。里面有很多选项：el, data, computed, methods, filters....

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3
复制代码

data选项中属性是响应式的。

vm.b= 'hello' //不会触发视图更新。
复制代码

Object.freeze() 阻止修改现有属性

不早了先回家了，明天继续。：-）