Vue总结（程序员卷土重来的第一天（第二篇））

Vue指令（内置指令）

1.{{}}  插值表达式

2.v-text

3.v-html 能够识别标签

4.{{}}  v-text  v-html  都可以向页面插入数据，v-text  v-html 会将标签内的数据覆盖，{{}}使用更加方便 ，但是会出现闪烁问题

5.v-cloak  可以解决{{}}产生的闪烁问题

v-for 循环

1.数循环普通组	循环对象数组	循环对象	循环数字

2.与v-for 配合使用的key属性  ----维护状态

3.当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染

4.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性**

V-if 和v-show

1.v-if   判断显示隐藏  让整个dom元素显示或者消失
2.特点： 每次都会重新删除或者创建元素
3.v-show  判断显示隐藏  控制元素的display:none/block
4.  特点：不会重新删除或者创建元素，只是控制display:none/block
5.v-if  会有比较高的切换性能消耗
6.v-show  会有比较高的初始渲染性能消耗 ，如果元素被频繁操作建议使用v-show

v-bind

用于属性的绑定 ，可以简写为   :绑定的属性   :href 

v-on

用于事件的绑定 v-on:click=””，可以简写为   @click 

如果是方法调用，可以加括号也可以不加括号，当需要传参的时候得加括号

事件的修饰符

1.stop 阻止冒泡   比如  @click.stop=””

2.prevent 阻止默认事件  比如  @click.prevent=””

3.同样可以连写  @click.prevent.stop=””

4.capture  触发捕获的事件机制  @click.capture=””

5.self  只有当事件在本身上触发时，才会触发事件

6.self只会阻止自己身上的冒泡行为，不能真正的阻止冒泡行为 

7.once  只会触发一次

8.passive  告诉浏览器不想阻止某些默认行为

$event

如果需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button @click="show(`第一个参数`，`holle`,`$event`)">触发事件</button>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
 只有在 `key` 是 `Enter` 时调用 `vm.submit()`
<input v-on:keyup.enter="submit">

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
可以使用 `v-on:keyup.f1`
 Vue.config.keyCodes.f1 = 112

过滤器的定义

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：

双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

leg:{{text | filter1| fiter2(123)  }}

过滤器的分类

1）全局过滤器   
 定义全局过滤器  一定要写在实例之前  
 如果过滤器没有返回+值 则默认返回控制字符串 （如果过滤器filter1或者fiter2没有返回值时，则还是text本身）
Vue.fiter(过滤器名字,处理函数)
Vue.filter(“filter1”,value=>{
value 为前面需要过滤器的值（相当于text）
})	
Vue.filter(“filter2”,（value，num）=>{
value 为前面需要过滤器的值（相当于text）
num接收传的参数
})

2）局部过滤器
需要将局部过滤器写入到 配置项filters
filters:{
filter1(value){},
filter2(value,num)
}

注意：过滤器的方法中出现的this指向window

计算属性 computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

1.计算属性 不是方法  是属性，所以在视图中使用的时候不用加括号，相当于data中的数据，都会挂载到实例上
 2.计算属性会关联某个响应式数据
 3.计算属性有自己的缓存处理：第一次获取到某个响应的值，并把它缓存下来，在后期重新渲染视图，会观察该响应的值，是否发生改变，如果没有改变则不会重新调用函数，会使用缓存的值，如果值发生改变才会重新调用函数，进行更新

注意：
  定义的方法名 ,计算属性名不可以与data中的数据重名，但是过滤器名字可以跟数据名同名

 计算属性和方法重名时，方法的优先级高 （方法和计算属性不可以重名）
 方法不管关联不关联数据，只要视图更新，就会重新调用
 计算属性一定要关联数据，否则只会执行一次

get和set

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 
Get:   只要获取属性，都会触发getter函数
Set:  给计
算属性设置值时，会触发set函数

watch 监听器 侦听器

  watch 监听某个数据的改变，当数据发生改变时进行相应的操作
  watch 监听响应式数据改变  （监听的数据必须要在data中初始化 ）和 computed的setter相似  只是computed有自己需要设置的属性 而 watch只能监听data中已有的数据
  watch 一般不经常使用，如果使用也是在异步中使用
  watch 支持异步操作  

生命周期函数

钩子函数 （相当于一个回调函数，在程序执行到某一个阶段的时候执行这个函数）(从vue创建、运行到销毁，在这些过程中伴随的事件，我们称为生命周期函数)


beforeCreate 创建vue实例之前   （beforeCreate的时候  data methods 还没有初始化）

created       创建vue实例后（一般会在这个阶段进行数据的异步请求 ）（刚开始创建实例的时候，视图显示的数据都是空数据，当数据加载完成后再重新渲染视图）create的时候  data methods 已经初始化  

beforeMount    渲染dom之前 （）模板已经在内存中编辑完成，但是没有

mounted 渲染dom之后 (加载组件的第一次加载  只会渲染一次)内存中的模板，已经渲染到页面上      
      
beforeUpdate   重新渲染之前    

updated      重新渲染完成 可渲染无数次  (根据data数据的更新 执行方法)

beforeDestory  销毁之前
 
destoryed     销毁之后

vm.$mount("#app");   ===> el:"#app"
vm.$destroy(); // 销毁之后，响应式数据更新的时候，页面不会重新渲染

        生命周期钩子的 this 上下文指向调用它的 Vue 实例。

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。易用、简洁且高效的http库


使用vue框架时，应尽量避免使用dom或者操作dom

 vue基于属性ref 将所有的dom 放置在$refs对象中，从而实现对dom的操作
 (只有在mounted之后才可以使用)

指令（自定义指令）

1)  全局指令     
      Vue.directive(指令名字，{})
      指令名 定义的时候不需要加v前缀  调用的时候需要
      
 2）局部指令
directive中的控制项
bind     当指令绑定到元素上的时候 会立即执行bind函数  只执行一次
bind中的元素只是在内存中存在，并没有真正插到dom中 
Inserted   ---官方翻译：阴色的---   执行的时候  元素已经插入到dom 中  所以此处调用原生方法可以使用 （触发一次） 
update当响应式数据更新时 会触发 （可以触发多次）
每个控制项都含有el属性（当前的DOM元素） 

全局组件

  Vue.component(componentName,options)
  Vue.component(组件名,组件配置项)

组件的特点：

  1.可复用
  2.方便维护
  3.每一个vue组件都是独立的个体（相当于独立的vue实例）,data是独立的（组件之间data是相互不干扰的）,方法、过滤器等都是独立的，也有完整的生命周期 （相当于一个实例，实例里面的有的，组件都有）
  4.可以进行组件嵌套
  5.组件相互通信
  6.方便拆分

组件命名的规则：

 1.使用 kebab-case  比如 my-button  页面调用的时候只能用kebab-case    比如<my-button></my-button>
 2.使用PascalCase   比如 MyButton   页面调用的时候只能用kebab-case    比如<my-button></my-button>
 3.如果定义时全用小写  比如 mybutton   页面调用的时候不可以使用kebab-case ，但是可以使用 MyButton  myButton  mybutton都可以
 4.命名的时候不要出现特殊符号

调用的时候：

1.双闭合  <my-button></my-button>
2.单闭合 <my-button/>   不推荐使用  使用单闭合标签之后的视图的内容不会识别

定义组件：

1.定义组件的时候一定要有template 
 2.组件的内容必须包含在一个根元素中 （组件的内容必须有一个标签包裹起来 ）

还差什么，随时写。