vue 词汇

1.指令名：v-text和v-html

2.指令名：v-bind 可以省为冒号 ：

3.指令名: v-if 和 v-show

4.指令名: v-for （）

5.指令名：v-on 简写 @

6.事件修饰符

<div @click.修饰符="函数"></div>
					 .stop          阻止单击事件继续传播
					 .prevent       阻止默认行为
     			     .capture 		使用事件捕获模式
					 .self			点到自己时才触发，不是从其它地方（事件流的流）流过来的
					 .once  		只会触发一次
					 .passive 		onScroll事件 结束时触发一次，不会频繁触发，移动端使用

7.指令名：v-model

8.计算属性

//定义
computed:{
  计算属性: function(){return 返回值}		
}

//使用
使用:	{{计算属性}} |  v-指令="计算属性"

computed VS methods

methods	computed
方法每次调用都会进行运算	基于它们的响应式依赖进行缓存的，如果依赖没有变化，就不再运算
一般	性能高
{{methodname()}}	{{computedname}}
适合强制执行和渲染	适合做筛选

9.属性检测（侦听属性）

watch:{
  数据名:'methods的里函数名'    //数据名==data的key
  数据名:函数体(new,old){}
  数据名:{
    handler:fn(new,old){},
    deep: true //深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
    immediate: true //首次运行,要不要监听
  }
}

计算属性 VS 函数 VS 属性检测

	计算属性（computed）	函数（methods）	属性检测（侦听）（watch）
	为了显示而用	只是处理逻辑，跟普通的函数一样	属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数
依赖模板调用	√（在模板上调用的）	-（可以在模板使用）	×（不能在模板上使用）
是否缓存	√	×	√
异步	×（必须是同步）	√	√

10.组件的概念：

配置项如下：
​ 没有el属性。
​ template：html模板代码，只能有一个根标签
​ data（）{ }
​ methods：{}

11.注册组件（全局注册）

 Vue.component('组件名',组件变量名);

12.局部注册

//在vue对象的components选项里进行注册
new Vue({
     el:
     components:{
    	 组件名：组件变量名
     }     
});

13. 组件传递数据Prop [ ] ，是个数组

14. 组件的事件

触发事件 ： vue对象. $emit(“事件名”,参数);

15.组件的内容 Slot(插槽)

16.refs（也就是在vue中操作dom类似于js中的id）

```js
如：<p ref = "pId"> {{msg}}</p>

 methods:{
     testf:function(){
       	this.$refs.pId.innerHTML = "hi";
     }
}

17.事件总线（vue-bus）

18.集中管理（$root)

new Vue({
  data:{a:1}
})

使用

//子组件内部
this // 组件本身
this.$root // vm
this.xx //组件内部数据
this.$root.a //根实例数据

19.动态组件

component :is=“组件名变量”

20.vue 生命周期

（一）数据挂载 阶段

 前后分别的钩子函数是：beforeCreate、created （数据挂载前后分别执行的函数）

（二）模板渲染阶段

 前后分别的钩子函数是：beforeMount、mounted

（三）组件更新阶段

 前后分别的钩子函数是：beforeUpdate、updated

（四）组件销毁阶段（相同组件的频繁创造和销毁，会消耗cpu性能，所以有了）

 前后分别的钩子函数是：beforeDestroy、destroyed

如果组件在缓存的话，那么，组件切换时，会调用的钩子函数是：

  activated 和 deactivated（组件激活前和组件激活后调用的函数）

21.swiper(轮播图)

https://www.swiper.com.cn/
进入官网，导航， 获取seiper的方法 点击swuper csdn
引入
link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css”（css）
script src=“https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js”></script（js）

//swiper-container 轮播图容器的意思
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

详细看导航中的api文档

swiper在vue中的使用

一. 装swiper 终端 npm i swiper@5.4.5 --save

在swiper js的代码片段 在 created()中发送请求后的 .then()中的 this.$nextTixck(回调函数function（）)中进行this.$nextTixck(回调函数 function（）{}) 等于 vue.nextTixck(回调函数 function（）{})

**重要概念vue.$nextTixck(回调函数（）=>{使用dom})

这个函数知道什么时候处理dom ，函数中的回调函数会在dom处理完后调用

23. 第三方uI组件 中vant的用法

vant官网

24. router 路由