学习 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不支持