【框架】Vue 相关知识整理

组件内选项的顺序：

name:
components:
mixins:
props:
data:
computed:
watch
钩子:
methods:

 

Vue.js的优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写
易用灵活高效

 

v-text: 解析文本

v-html:解析html

v-bind:动态绑定属性

v-on:绑定事件

v-bind的语法糖：冒号

v-on的语法糖：@

 

单文件组件：

Vue的一个重头功能。特点是把 html、css 、js 放到一个文件里面。

<template></template>
<script></script>
<style scoped lang="scss"></style>

为什么按这个顺序写？为什么不把 script 放最后呢？

因为 ：css 是最不重要的。如果把 css 放在中间，每次要从 html 跳到 js 的时候，就要把中间的 css 看一遍。然后从 js 跳到 html 的时候，又要中间看一遍。这就浪费了滚动的时间。所以不如把 style 写在最下面，想看样式就鼠标滚下去，不想看的话，就一直在上面编辑就好了。

 

每个 vue 组件可以有2个 style 。一个是局部的 style ，一个是全局的 style 。

 

slot：

插槽。插槽里的内容不确定，希望别人传进来。别人在标签中间写的东西，那么它就会被放到槽里面。可以理解为，暗黑破坏神里，武器上镶宝石的地方。

 

自定义标签:

不要写成自闭合的形式，有bug。

 

export default 里 name 的一个作用：

帮助你，在使用 vue 开发者工具的时候。进行标签的命名

 

怎么跟别人的css隔绝开来：

scoped意思是：有范围的

<style lang="scss" scoped>

</style>

添加了 scoped 后，vue就会做两件事

1. 里面的所有元素身上，加上 data-v-xxxxxx 的属性（xxxxxx 是组件的唯一ID），css也会相应的变成.classname[data-v-xxxxxx]
2. 这样就不会和别人起的名字冲突。总结就是：如果用了 scoped ，类名就可以随便写。绝对不会跟另一个组件冲突。
3. 推荐在每个组件上，都加上这个属性！

 

下面代码意思是，如果 error 是存在的，那么就有 error 类，不存在就没有这个类。

:class="{'error': error}"

可以简写成：

:class="{error}"

 

Vue 官方建议自定义标签最好使用 x-x 的格式，避免将来冲突，所以加一个前缀。

 

 

props 里的 type，可以写两种类型

例子：如果传下面的代码，那传的是字符串2，不是数字2，

span="2"

有2种办法：

1.加一个冒号 (不方便)

:span="2"

2.接收 number 和 string

type: [Number, String]

 

created 钩子和 mounted 钩子的区别：

• created 在内存里面生成这个对象。创建这个组件，但是并没有放到页面。
• mounted 把这个对象挂到页面
• 只有 mounted 能保证子元素已经创建好了

打个比方：

var div = document.createElement('div') // created
var childDiv = document.createElement('div') //child created
div.appendChild(childDiv) //child mounted
document.body.appendChild(div) //mounted

 

props和data的区别：

什么时候用props：需要用户传值，相当于参数
什么时候用data：不需要用户传值，自身维护值，相当于局部变量
组件其实就是一个函数

 

目录结构的分析

build（项目构建(webpack)相关代码）

config（项目开发环境配置相关代码）

node_modules（项目依赖的模块）

src（源码目录）
——assets（资源目录）
——components（vue公共组件）
——router（前端路由）
————index.js（路由配置文件）
——App.vue（页面入口文件（根组件））
——main.js（程序入口文件（入口js文件））

static（静态文件）

.babelrc（ES6语法编译配置）

.editorconfig（定义代码格式）

.gitignore（git上传需要忽略的文件格式）

index.html（入口页面）

package.json（项目基本信息）

package-lock.json（npm install 的时候生成的一个文件）

README.md（项目说明）

 

升级 vue-cli

yarn global remove vue-cli
yarn global add @vue/cli