学习 Vue ，从入门到放弃

 

最近项目刚完成，手上工做稍微轻松些，准备储备下技术，为将来挑战作好准备。

 

以前项目用的较多的是angulajs，不过版本较老，还停留在1.5x系，虽然结合了webpack，es2015等前沿技术，但理解并不深刻。也作个两个react的项目和一个react-native小东西，都是不懂现查资料，没有系统学习过。三大前端框架就没接触过Vue了，因此打算拿它从小白学起，也顺便写个完整学习心得。

 

之前学习angularjs是在菜鸟教程学的，看了2天直接上了项目，第一个项目用的仍是原始方式，html文件中引入css和js，因此上手比较快。后来项目改进到结合webpack和es2015，自动化构建，热刷新等，不过是在别人基础上搭建的后续开发，边作边学，还算OK。

 

此次学习Vue打算从官网入手。

   

 

以上图片为官网首页点击“起步”进入连接的左侧导航栏，由于有以前的前端经验，因此第一部分以为仍是蛮简单的，基本都看懂了；第二部分就有一些特殊逻辑了，但基本上也都能理解；第三部份内容都较少，但都给到了额外的连接，连接里面的内容都是单独的知识点，后面会重点说；第四部分可有可无了，没有要迁移升级的项目，看了下与其余框架的对比，大致意思就是，Vue灵感来自angularjs，但要比它进步的多，React能作到的功能Vue基本也都能作，React无非就是比较早，整个生态系统比较完善，可是Vue也不差，并且Vue没有React的那些缺点！虽然语气都比较谦和，但总归是要传递一个信息：Vue是最牛逼的！这也无可厚非，否则谁还学~~ ：）

缩写：
v-bind: => :
v-on: => @ 
v-slot: => #

var _date = { a : 1 , data : 2};
var app = new Vue({
    el:"#app",
    data: _data
})
app.$data != app.data ,app.data 为_data.data
app.$data === _data
app.a = _data.a


Object.freeze(_data); 阻止修改_data

//监控
app.$witch("a",function(n,o){})


生命周期：create -> mount -> update -> destroy
生命周期：init Event -> beforeCreate -> init Injections -> created -> compile 
            -> beforeMount -> create $el -> mounted -> beforeUpdate -> virtual dom -> updated -> beforeDestroy -> destroyed


v-html 注意防止xss攻击


表达式
指令
动态参数 v-bind:[] v-on:[]
修饰符 v-on:submit.prevent="onSubmit"

计算属性：computed 缓存
方法：methods 不缓存
监听器：watch 或 app.$watch



自定义控件：Vue.component("name",{
    template:`html内容`
})


绑定class使用v-bind:class="[className1,className2]" 
绑定style使用v-bind:style="[styleName1,styleName2]"


v-if v-else
v-else-if
取消复用：独立key


v-show不支持<template>元素，也不支持v-else

不推荐同时使用v-if和v-for ，详情查看风格指南：https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81


v-for="(item, index) in items"
v-for="item of items" 包含index？
v-for="value in object" 遍历对象object
v-for="(value,name) in object" 遍历对象object
v-for="(value,name,index) in object" 遍历对象object
建议尽量在使用v-for时提供key


替换数组match有点懵逼。。。

app.arrayList[2] = "222"，不能检测到变更，貌似ng能够。。。
vue可使用的方法是：Vue.set(vm.items, indexOfItem, newValue) 或 app.$set(vm.items, indexOfItem, newValue) 或 app.items.splice(indexOfItem, 1, newValue)

Vue.set(object, propertyName, value) 方法向"嵌套对象"添加响应式属性。



修饰符：
v-on:click.prevent.stop.self.once.capture.passive

v-on:keyup.enter
@keyup.ctrl.enter

v-on:click.ctrl.exact
@click.exact

v-on:click.left.right.middle

v-model.lazy
v-model.number 
v-model.trim


复选框：
<input type="checebox" v-model="toggel" true-value="yes" false-value="no" />

组件中的data必须是函数；
全局注册：Vue.component
局部注册：new Vue({
    el:"#el",
    component:{
        "component-name":{}
    }
})

组件的特殊使用：
v-bind:is="已注册组件的名称或一个组件的选项对象" 如用于tab
<table>
    <tr is="组件名称"></tr>
</table>

局部注册的组件在其子组件中不可用，但能够在组件中定义再次引用组件。

为了防止大小写敏感，请所有使用xiaoxie_xiaoxie命名。

在 JavaScript 中对象和数组是经过引用传入的，因此对于一个数组或对象类型的 prop 来讲，在子组件中改变这个对象或数组自己将会影响到父组件的状态。

View Code

以上是作的一些笔记，还跟着传统方式（html引入css和js）测试了几个语法，都很简单。

 

而后第三部分的内容，先看了路由，由于在以前的项目里也有用到路由。页面的内容看懂了，可是给了一个 vue-router连接文档  又是一堆内容 ↓↓↓

 

 

状态管理，React中有Redux做为最流行的Flux实现，一脸懵逼Flux是啥？ 而Vue中有相同功能的Vuex，虽然官网页面的简单实例看懂了，由于以前React项目中知道有store、stage、prop这些东西。可是感受Vuex没这么简单。。。

服务器渲染目前应该能够先不用看。

单文件组件中又列了几个名词：

• 完整语法高亮
• CommonJS 模块
• 组件做用域的 CSS 

　　   其来自 Vue Loader  又是单独的一堆知识点

单元测试你能够先不用看，但里面介绍到Vue自家的单元测试组件 Vue Test Utils

 

 

TypeScript 这种前沿技术 Vue也固然不会缺席，好在以前项目有用到，文件后缀是ts的，简单点说就是javaScript的升级版，但假如是新手小白的话，你可能还要去了解下 TypeScript 。

生产部署相关内容能够先不看。

以上多个内容中都提到 Vue CLI 这么个东西，它是啥呢？

简单说Vue CLI就是Vue给自家封装的快速搭建一个Vue项目的工具，甚至能够经过相似桌面视图方式搭建。安装完Vue CLI后经过vue creat 或vue ui 就能够搭建啦，听起来好简单的。但要深刻了解下边的内容，就发现远没有那么简单，你熟悉webpack吗？假如你已经知道了webpack，那你了解 webpack-chain 吗？ 静态资源可不是直接html中添加引用那么简单了，你须要知道 url-loader、file-loader、style-loader、css-loader等等loader ；还有插件、预设配置也要了解；环境变量和模式里一堆新名词；构建你也要知道。。。

 

好了，到如今我尚未开始搭建第一个现代前端的Vue项目，由于我要先看这么多的文档。。。

 

对于新手来讲，如今学习前端已经再也不是之前的简单易上手了，即便对于传统的前端程序猿要学习新技术也须要花费很多的功夫，之前可能简单了解过html，js，css的后端开发人员也能上手一些简单前端开发，可是如今就很难了。尤为对于已工做的上班族，可能更没有集中的时间来学习，因此学习的时间会更久一些，难度会更大一些。

可是有一些是相通的东西，好比你在这里学过webpack了，那学习react和angular就能够不用学习这块了。

 

突然想起来以前收藏的一篇关于新前端的讨论，笔者用对话的方式诙谐幽默的写出了学习新前端的代价和装逼之处，你们能够一块乐呵乐呵：

在 2016 年学 JavaScript 是一种什么样的体验？

 

 

由于以前开发用的版本较低，而学习Vue用的较新版本，本地webpack和node确定都过期了，为了不与原有项目冲突，还又安装了虚拟机，而后安装开发环境，vscode是不能少的~~

 

虽然学的有点累，可是不想放弃，但愿你们留言讨论下正确的学习Vue 姿式 （从哪里开始，从哪里进阶，多长时间能够玩转项目）~~感受官网有点像词典 ㄒoㄒ，最好是有阮一峰老师那种风格的~~