Vue学习笔记

最近在写后台界面，用到了大量的表单提交，学习到了很多知识

vue中的表单提交并不知道是什么样子的，但是至少目前我看到了一种特别的方法

<form v-on:submit.prevent="sub">
　　<button>tijiao</button>
</form>

表单提交是有默认事件的，会刷新界面，阻止事件的默认行为就用到了preventDefault，这里知识点是，提交的行为在哪里触发，之前都是绑定在一个按钮上，然后

一个ajax提交数据，不是很难的哈，估计vue的表单提交就是想上面这样，直接写在form里面，可惜的是现在我还不知道数据请求到底是咋整的，⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

<div class="static" :class="{active:isActive,'text-danger':error}">style || class</div>

上面的text-active必须是用单引号包起来，不然的话，就会报错，很神奇，与jquery中的class是很相似的，原理是一样的

<div class="static" :class="{active:isActive,textDanger:error}">style || class</div>

如果写成这样的话，显示的还是textDanger,而不是想jquery那样，显示的是text-danger,这就是区别了

'text-danger': this.error && this.error.type === 'fatal'　　　　error: null

和vue无关，只是其中的error.type === ‘fatal’ 无法理解，到底是想表达什么意思，很纠结啊，难道null的类型还有其他的？感觉自己好像错过了什么

安装自动补全前缀插件postcss-loader

还需要在webpack-config.js中设置

postcss: [
require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })
]

才会实现自动补全

安装sass语法插件node-sass sass-loader

loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
},

添加上面的参数，可实现sass语法，但是在实际的使用中，<style lang="scss"></style>

这和自己印象中的sass语法是一样的，不是很难

对于webpack.config.js中的配置，只能是需要啥，再去配置，对webpack完全没概念，只能是一点一点的摸索了

上面的配置也不一定是对的，但是对于学习的初期，不要过分的区纠结这些东西，只要能实现自己想要的东西就好了，等自己能做项目了，真正的掌握了，再去研究webpack的配置

还有就是好像是需要style-loader，但是我上面没配置，也没有安装依赖，运行也是么问题的。

字符串模板，好像就是传说中的js模板引擎，之前自己研究过，但是一直没在实际的项目中使用过，很遗憾

突然好好看一下这里的写法，感觉很陌生啊，不是吗？为啥一个模板没有根元素，还是可以不报错？很神奇，难道是自己理解错了，一直以来自己都是认为，每一个模板都是必须有一个根元素的，现在看来并不是这样的，不是吗？或许还是自己学的天少了

现在理解了上面的内容到底是啥意思了，只是自己见到的代码还是很少的，所以现在看到很多写法都我是很懵逼的，

同时可以一点带面，直接在一个模板中引入了几个模板，这时就出现了子模板与父模板的概念，不是很难的哈，其实就相当于咋ijs中import另外的模板，只不过后面这种写法是有一个标签名，其实原理都我是一样的，感觉组件的独立其实是为了代码更加的简洁，但是回过头来想想，其实这里的一切都是可以组合在一起，也就没了子组件与父组件的区别，不是吗？感觉自己慢慢的上道了

这里刚好和自己中午遇到的后台给的接口是一样的，传统上，接口都是上面那中形式，但是今天后台突然给了我一个下面这种新式的接口，懵逼

还有就是对象是在怎么遍历的，为啥会出现他的值，而且相应的键就是名称，index，想不通

这个才是标注的格式，但是还是不理解

第一种格式是接口中最常见的形式，上面这种则是最原始的格式，遍历一个数组，但是我一直在想像，到底遍历一个对象的应用场景是什么样的？

在使用v-model的时候，创建一个初始值，虽然很简单，但是对于我这个刚学习的人来说，感觉还是很神奇的，这就是所谓的数据绑定吧，现在还是没有一点概念，我有一个input呗绑定了，我还想操作input的值，说到最后，还是要这样来做的，慢慢积累吧，也算是以个新的知识点了，很有趣

js的set方法到底应该传几个值，从来没使用过，好像应用场景不是很常见

这里的赋值很纠结，为啥会是一个null呢，实验证明，‘’ 也是可以的，但是为啥会是使用一个null呢，很蛋疼，至少自己在赋值的时候一个没有这样来做，难道是获取到的值是一个对象？对比之前的，checkbox当只有一个的时候，绑定的是布尔值，多个的时候绑定的是一个数组，radio绑定的是一个字符串，各有不同，但是selected绑定的是一个null，得到的也是一个字符串，很纠结