Vue基础笔记01v-cloak 当VUE编译完成后，会把属性v-cloak删掉了。 2.@click="fn()" 这

001记***

Vue学习-1

Vue是什么？

是一款构建用户界面的渐进式框架。

库和框架的区别：

库：我们调用库中的方法实现我们的某个小功能。
框架：框架为我们提供了一个盒子，我们只需要把代码放到对应的位置。就能实现相关的应用。
我们写好代码 ，库调用我们。
关系：框架是库的升级版！！

3. npm init -y 初始化package.json文件 4. yarn add vue 用yarn 安装vue框架

vue的数据特点

双向数据绑定（数据更新后视图自动更新；视图更新后，数据自动更新） 单向数据流（从上而下）

5. MVVM MVC 区别： MVC:单向

声明式和命令式

声明式：比如reduce方法。我不知道reduce里面怎么执行。我知道怎么用就行。

命令式：比如for循环。我自己写好，命令计算机执行。

而Vue就是声明式。

11. v-cloak 当VUE编译完成后，会把属性v-cloak删掉了。

常用指令：

v-cloak:专门用来提供：解决小胡子的显示问题；需要配合css使用
        当VUE编译完成后，会把这个属性删掉，这个css属性就不再起作用了。
v-once:有这个指令的标签，只会编译一次。
v-pre :有这个指令的标签及其后代元素vue不会再编译；可以用来提升VUE编译效率
v-if: v-else-if v-else用来控制元素或者组件是否加载 （有较大的的切换开销）
v-show:用来控制元素和组件是否显示（有较大的的初始加载开销）
v-for: 用来循环， 可以循环数组、数字、字符串、对象。（与v-if同时使用的时候  for的优先级高）
        一般都要加上:key, key对于vue来说，是元素的身份证，有利于vue的DOM diff计算
v-bind:用来处理行内属性的一个指令；简写:
       行内属性中的 style 和 class  是经常操作的属性
       所以vue对这两个属性专门做了加强
       :class = "{ class名：布尔值，class名：布尔值 }"
       :style = "{ css属性名：css属性值，css属性名：css属性值 }"
v-on : 专门用来绑定事件的指令

33. 在事件中： 1.vue会默认把事件对象传递给函数 2.@click="fn()" 这里()不是函数执行，而是传递参数；但你写个小括号，啥参数都不写，那会导致连默认的事件对象都没有。 @click="fn(10,20,$event,40)",此时既需要自己的参数也需要事件对象。可以都传一下。 3.在事件中，先执行绑定的函数还是先执行默认行为？答：大部分事件中，先执行函数后执行默认。新版中，onscroll touchMove 这种高频触发的事件，会先执行默认，后执行函数 4.事件修饰符 @click.prevent="fn" 会阻止默认事件 @click.stop="fn" 会阻止冒泡传播按键修饰符 @keydown.enter="fn" 在敲回车的时候，会触发这个函数

自定义指令：

全局自定义指令:Vue.directive('color123',function(el,obj){});
              Vue.directive('color123',{inserted(el,obj){}})利用了钩子函数
局部自定义指令(组件): new Vue({directives:{color(){}}})

VUE的小坑：记住哈：

A>数据更新后，视图没有更新，是因为更新的数据不是被劫持的数据
解决：=》1. Object.assign({目标对象},源对象)
    ：=》2. vm.$set(目标对象，要加的属性名，属性值)
B>更改数据，视图更新的条件：1.视图中有用到对应的属性。2.属性被劫持。

C>对于数组而言，能触发视图更新的：push pop shift unshift reverse sort splice (变异方法)。

事件绑定

DOM0级事件绑定：dom.onclick= function fn1(){} dom.onclick = function fn2(){} 缺点：后绑定的会把前面的事件绑定函数顶替掉。 DOM2级事件绑定：dom.addEventListener(fn1) dom.addEventListener(fn2) 优点：会把两个绑定的函数放在事件池中，顺序执行。而不存在被顶替掉。个人封装的时候用DOM2级。因为自己封装的和别人后加的不冲突。

computed VS methods 是否有缓存

computed VS watch ? A=> watch支持异步。computed只同步。 B=> 碰到之后先考虑是不是能用computed

Vue生命周期 life cycle

beforeCreate: 初始化自己的生命周期和绑定自己的事件 $on$ off

created: 可以获取数据和调用方法

beforeMount: 第一次调用渲染函数之前 mounted: 获取真实DOM,页面渲染完成

beforeUpdate: 更新前：此时还能操作数据。然后统一进行一次更新
updated: 更新后：此时不要操作数据，可能进入死循环。

beforeDestroy: 销毁之前：可以进行解绑操作。 destroyed: 销毁之后，实例的方法、监听已被移除。

*** 何时销毁实例？ 1.路由切换 2.手动销毁（vm.$destroy()）

组件：

什么是组件：自定义的标签。

组件化开发的有点： 1.方便协作 2.方便维护 3.复用（数据根据传入的数据来展示）
组件的定义方式： 1.全局 2.局部
组件交互：7种

002记录***

局部组件使用：

引入
注册
使用

工程化项目中创造全局组件

注意要在 main.js 导入全局组件时，一定要在 new Vue 的上方。因为 new Vue 模板编译就要用到全局组件。
工程化中比如自定义全局组件.js 文件里，不能使用 template 模板，可以使用 render 代替。

父子组件

A 用了 B，我们把 A 成为父组件，把 B 称为 A 的子组件。父子组件一定是相对的概念。只要建立了使用与被使用的关系。就自动建立了父子关系。
子组件的 name 可以不写，但是写了，就不能是和 html 标签重复。
父子组件数据传递：自定义属性+props
同一个组件使用多次，产生多个不同的实例
data methods computed props 中的数据互相不能重复。因为最终都会挂在到当前实例上。
父组件想使用子组件的数据或子组件想用父组件的数据：自定义事件+$emit （本质：发布订阅模式）
凡是写在组件上的事件，都是自定义事件。给组件用的。
vue 是双向数据绑定、单项数据流（从上往下流，从父到子）
工程化中局部组件都是.vue 文件。
ref 这个行内属性可以用来获取 DOM 元素或组件的（这也说明了一个思想：组件即实例）
$attrs获取的就是当前组件的子组件没有用props接收的属性$ listeners 获取的是传递的那些自定义事件
slot 是内置组件，代表的就是当前使用这个组件时，里边包含的内容。新写法 v-slot:插槽名，v-slot: 简写为# 新写法等同于 <标签 slot="插槽名" >；作用于插槽：slot-scope="用户自定义的名' 这个名词拿到的值是：子组件中 <slot :子组件自定义属性='xxx'> 新写法： #default="用户自定义的名" 在 slot 上的所有子组件的行内属性组成的对象。注意 v-slot 只能用在 template 上
VueRouter 1.Vue.use() 干嘛用的？这是使用 vue 插件的一个操作即扩展插件用的，其中的值是对象或者函数 Vue.use(对象或者函数) 如果是对象，则 Vue.use()会自动调用对象中 install 方法；若是函数，则会直接把这个函数当作 install 执行。

vue 工程化项目中的文件结构

public

   1. index.html html 模板，最终渲染的地方就是放在这里。

.browserslistrc
1. 指定浏览器的兼容版本
.eslintrc.js
babel.config.js
package.json
1. dependencies
2. devdenpencies
src 资源文件
1. 放我们工作中的东西。
2. main.js
工程化项目中，所有的组件都是.vue后缀的文件]

   eg：APP.vue
   vue-tempalte-compile会把vue文件分别编译成js,css,html
   vue.config.js最终会合并到webpack中
   webpack webapck-dev-server ======>node
   vue/cli 他是基于webpack家族的一个封装