写VUE项目中记录的点(element-ui,transition)

1.Element-ui

table

table的show-overflow-tooltip属性

用vue+element ui框架，用到table表格，如果每列显示的内容过长则可以使用该属性，即 :show-overflow-tooltip=“true”，该属性可以让内容在一行显示，如果显示不下时，显示…,并且鼠标划过时显示全部文字。通常会出现这样的效果：

table的表格树

 :data="tableData"      
 row-key="id"     
 border      
 :tree-props="{ children: 'children' }"      
 :height="tableHeight"      
 v-loading="loading"      
 element-loading-text="正在加载中,请稍后..."      
 lazy      
 :load="loadChildren"      
 ref="table"

button 显示提示文本

 <el-button type="text" 
 icon="el-icon-edit" 
 @click="edit(scope.row)" 
 title="编辑用户">
 </el-button>

Tooltip文字提示

Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息

Badge 标记

Badge 标记 出现在按钮、图标旁的数字或状态标记。

el-collapse-transition折叠展开

//点击切换,隐藏显示testshow
<template>
  <div>
     <div><button @click="cb">切换</button></div>
     <el-collapse-transition>
      <div v-if="show" class="testshow">
        <div>sssssss</div>
        <div>sssssss</div>
      </div>
     </el-collapse-transition>
  </div>
</template>
<script>
export default {
    data: () => ({
      show: true
   }),
    methods: {
      cb() {
        this.show = !this.show;
      },
    }
}
</script>

el-avatar 头像

Avatar 头像用图标、图片或者字符的形式展示用户或事物信息

若DOM图片不变 在 :src后面加上:key值，就是:src的值

Tag 标签

Tag 标签用于标记和选择。

Popover 弹出框

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual

当然，你还可以嵌套操作，这相比 Dialog 更为轻量：

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  </div>
  <el-button slot="reference">删除</el-button>
  // reference  触发 Popover 显示的 HTML 元素
</el-popover>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    }
  }
</script>

DatePicker 日期选择器

表单组件的prop属性

Vue组件库element-ui中的Form表单组件提供了表单验证功能
通过rules属性传入验证规则
Form-Item中的prop属性设置需要校验的字段名

2.单元素/组件的过渡 transition

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡.
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

例子讲解

点击Toggle时 ,hello消失

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

同时我们也可以自定义进入/离开的样式
如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 <transition name=fade">，那么 v-enter 会替换为 fade-enter

//v-enter-active：定义进入过渡生效时的状态。
.fade-enter-active {
  transition: all .3s ease;
} 
//v-leave-active：定义离开过渡生效时的状态
.-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

//CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
@keyframes .fade-enter {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

3.this.$router.beforeEach

router.beforeEach（）一般用来做一些进入页面的限制。
比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面,说白了就是路由拦截.

//思路
> 如果（即将进入的这个路由需要权限才能进入）{
> 	 		如果(能获取到这个的userID){ 			
>               就让这个进入这个路由
>                       } 否则 { 
>              就让这个进入登陆页面
>              }
> 		 	}  即将进入的路由不需要权限就能进入
>                     {
> 	 		      就让这个进入这个路由
> 		 	}

//代码实现
import store from '@/assets/store'   //把这个userId获取过来
router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){
		if(store.state.userId){
			next()
		}else{
			next({path:'/login'})
		}
	}else{
		next()
	}
})

4.this.$nextTick

在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到this.$nextTick。
所以

如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。

5.$emit()

父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。

6.JSON.stringify()

JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串

7.JSON.parse()

JSON.parse()可以将JSON字符串转为一个对象。

8.model实现自定义组件的双向数据绑定

v-model只是一个语法糖，等于:value+@input，真正的实现靠的还是： v-bind:绑定响应式数据，触发 input 事件并传递数据 (核心和重点)

input v-model=“something” 等同于
input :value=“something” @input=“something = $event.target.value”

因此，对于一个带有 v-model 的输入框组件，它应该：接收一个 value prop，触发 input 事件，并传入新值

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

等同于

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

10.VUE开发中.sync 修饰符的作用

其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update

// 这里父组件，要给子组件传一个title的值,在子组件内部去修改这个标题
<template>    
   <div>           
       <t-title :title.sync="fatherTitle"></t-title>    
       </div>
       </template>
       <script>
       import tTitle from './list';
       export default {    
       name: 'test1',   
        components: {  tTitle },   
         data() {        
         return {            
         fatherTitle: '父组件给的标题'        
         };   
          },}</script>

//子组件
<template>    
       <div>        
         <h3>{{ title }}</h3>        
         <button @click="changeTitle">改变</button>    
      </div>
</template>
<script>
export default {    
     props:{        
         title: {type: String, default: '默认值11'}    },    
     methods: {        
       changeTitle() {            
        this.$emit("update:title", "子组件要改自己的标题");        
}    }};
</script>

11.ref的使用

基本用法，本页面获取dom元素

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
      //11111
    }
  }
};
</script>

拿到子组件中的data和去调用子组件中的方法

//子组件
<template>
  <div>
      {{ msg }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>

//父组件
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";
export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }//hello world
  }
};
</script>

12.vue-treeselect的使用

选择地点，一次呈树形状铺开，可以多选，可以删除，支持搜索

```javascript
一、首先安装包
          npm install --save @riophae/vue-treeselect
          "@riophae/vue-treeselect":"^0.0.37",
二、在要用的vue页面上
          import Treeselectfrom '@riophae/vue-treeselect'
          import '@riophae/vue-treeselect/dist/vue-treeselect.css'
三、挂组件components: {Treeselect},
四、在需要写的地方引
    <treeselect 
 :multiple="true"  //是否可以多选
 :options="selectPlace"  //提供给用户选择的数据，这是地点选择，这里面的值是调用了一个接口
 :flat="true"  //后面选中是否前面选中
 :sort-value-by="sortValueBy" //这个是排序的作用
  :default-expand-level="1" 
  :normalizer="treeOption" //用于将options的值，转换为符合vue-treeselect要求的数据格式
   :searchable="false"           //是否启用搜索功能
  placeholder="请输入城市名，如杭州市，厦门市"  v-model="value"/>

13.slot

slot=“append” 放置后面
el-button slot=“reference”>删除
// reference 触发 Popover 显示的 HTML 元素

14.设置elementUI中el-select的默认值

<el-select v-model="form.card" slot="append">
     <el-option v-for="dic in cards" :key="dic.Code" :label="dic.Label" :value="dic.Value"></el-option>
      </el-select>

//想让option设置成默认值只需要把form.card的值设置成想要的值就可以
//代码如下
data(){
	return{
		form:{
			card:'shanghai'
		}
	}
}

15.Vue.config.productionTip = false

阻止显示生产模式的消息

如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
大概意思就是：
你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。