Vue爬坑笔记之一(指令、插槽)

运行环境

• 安装vue-cli脚手架
  • 在此之前要安装nodejs，然后全局安装vue-cli
    npm install -g @vue/cli此方法安装的是cli3，如果要安装cli2可以使用npm install vue-cli -g

创建项目

• vue create 项目名称
• 创建时的配置可以全选默认,但是不推荐(因为默认会使用严格模式和history模式)
• 自定义配置,推荐将严格模式取消,且不使用history模式
• 如果是vue-cli2,会稍微有所不同:
  • 创建项目:vue init webpack 项目名称
• 如果用webpack搭建vue项目,要安装两个重要的依赖:vue-loader和vue-template-compiler

vue的指令

• v-show 与v-if 控制元素显示与否
  • 二者都是控制元素与隐藏,但不同之处在于,v-show是用css控制,而v-if是通过删除与创建dom来控制.
  • 一般来说,对于需要频繁操作的元素,用v-show来操作,对于不会经常用到的元素,用v-if操作
• v-html 与v-text 渲染文本内容
  • v-text不会识别标签,会将所有内容都当做字符串渲染
  • v-html会识别内容中的标签元素,将其解析
• v-model 数据双向绑定
  • 其原理是利用Object.defineProperty({set:'',get:''})方法
• v-for 循环渲染
  • 循环数组

  <div v-for="(item,index) in arr"></div>
  <!--item表示数组项,index表示下标(索引值)-->
  

  • 循环对象

  <div v-for="(item,key,index) in obj"></div>
  <!-- item是对象中的项,key是键,index是索引值-->
  

• v-bind绑定数据
  • 绑定一个属性,属性值可以是变量,使用时一般用缩写:即可

  <div v-bind:属性名="{{变量}}"></div>
  <!--可以绑定自定义属性,也可以绑定标签中自有的属性-->
  <div :属性名="{{变量}}"></div
  

• v-on绑定事件
  • 可以缩写成@
  • 事件可以添加修饰符比如@click.stop

  <div v-on:click="函数名"></div>
  <div @click.stop="函数名"></div>
  

• v-once只渲染一次
• v-pre渲染时会跳过此元素
• v-cloak 这个指令可以设置一个样式,这个样式会在渲染完成之后被移除, 用于解决页面加载时先出现变量名闪烁的情况，造成不好的用户体验

插槽

• 具名插槽
  • 组件中定义的插槽

<div>
<slot></slot>
<slot name='a'></slot>
</div>

<!--使用插槽-->
<组件>
内容<!--这个内容会替换掉没有名字(其实是默认名字为default)的插槽-->
<template v-slot='a'> 
<!--用v-slot绑定a,会将name为a的slot渲染在此处-->
<div>这是name为a的slot的内容</div>
</template>
</组件>

• 作用域插槽

<div>
<slot a='a' b='b' c='变量'></slot>
</div>

<!--使用插槽-->
<组件>
<!--  利用作用域插槽可以拿到插槽中绑定的值 或者变量 绑定的属性可以是自定属性 -->
<template v-slot="{a,b,c}"></template>
</组件>