Vue基本使用

VUE

vue 渐进式 将复杂的东西给处理，只需要调用api 就可以 进行网页的设计
前端框架的 几乎都一样
​
vue：
react:facebook
angualr:谷歌
​
库的区别与库的区别
jquery库：对dom的操作
art-template库：模板引擎的渲染 高效
框架：大而全，简单渲染+请求处理+模板渲染
​
框架全家桶
库小套餐
​
​
框架使用：
初始化自身的一些行为
执行所编辑的代码
释放一些资源

启动

1.安装node.js语言(vue基于node语言)
2.查看当前的node.js版本 // 在cmd中 node -v
3.因为node中自带一个npm管理工具需要改为国内镜像
npm config set registry https://registry.npm.taobao.org
在cmd中查看是否替换成功npm config ls -l
4.安装vue的脚手架
npm install -g @vue/cli 
vue -v // 查看版本
5.创建项目
vue create vue项目名称
需要进行选择使用的vue版本 2 还是 3
6.选择当前创建vue项目的配置信息
vuex and router 等等
7.启动项目
npm run serve // 第一次启动会安装对应的项目环境 也可以使用npm install 先安装环境
npm run  build // 进项项目打包

VUE指令

在html页面使用vue cdn

1.导入vue
<script src="../vue.js">//1.导入vue </script>
2.创建对象
 new Vue({
            el: '#app', // 绑定标签，相当于圈了一个范围，vue语法可以在这个范围使用
            data: {  //data 属于对象，传入区域的data
                msg: '你好',
                text:'hello'
            },
            methods:{  // 这vue写入函数方法的区域参数对象
                add(){  //es6写法省去了function
                    return this.msg
                },
            }
        })
3.设置被vue绑定的区域
<div id="app">
    在这个div中就是被圈中的区域    
</div>

vue插值

{{可以进行插入data中的值也可以是函数或者表达式对象等等}}
<template>
  <div id="app">
    <!--    1.插入值data中的值-->
    <p>{{ name }}</p>
    <!--    2.插入函数方法，返回函数的返回值-->
    <h3>{{ add() }}</h3>
    <!--    3.插入字符串-->
    <h3>{{ 'hello' }}</h3>
    <!--    4.插入对象-->
    <h3>{{ {id: 1} }}</h3>
    <!--    5.插入表达式-->
    <h3>{{ 1 > 2 ? '真的' : '假的' }}</h3>
    <!--    6.插入翻转拼接-->
    <h3>{{ name.split('').reverse().join('') }}</h3>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      name: '56666'
    }
  },
  methods: {
    add() {
      return 'add'
    }
  }
}
</script>

v-html与v-text

v-html：是可以插入标签的 与原生的innerhtml相同
v-taxt ：属于只能插入文本 与原生的innertext相同
​
<template>
  <div id="app">
    <!-- 使用执行进行插入 文本 -->
    <h1 v-text="msg"></h1>
    <!-- 指令插入标签 将h3标签渲染div标签 -->
    <div v-html="html"></div>
    <!--  a标签  -->
    <div v-html="html2"></div>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      msg:"123哈哈",
      html:'<h3>哈哈哈，插入标签</h3>',
      html2:'<a href="https://www.baidu.com">百度</a>'
    }
  },
}
</script>

v-if和v-shou

显示隐藏(判断操作)
区别:
v-if:真的条件渲染 标签的被销毁和创建，也是惰性的 如果在渲染时条件为假 则什么都不做 一直变为真才会渲染
v-show：不论是条件是什么，都会被渲染，使用css的方式进行切换
​
缺点:
v-if：开销比较大,会对标签进行创建与销毁。如果条件比较很少改变那么v-if是最好的选择
v-show: 对于初始开销比较大,如果频繁进行切换,那么v-show最好的选择
​
​
v-if：如果条件不通过,那么就会出现创建与销毁的过程
    <div v-if="is_show">条件为true显示</div> 
    <div v-else>条件为false显示</div>
    <div v-if='1=1'></div>  可以进行数值运算
​
v-show:
控制了display:none 进行显示隐藏(css)
<div v-show="is_show">v-show条件进行显示</div> // true
// 如果条件为false在页面就会通过css进行隐藏
<div style="display: none;">v-show条件进行显示</div>
​
data() {
    return {
      is_show : !true
    }
  },

v-for循环

循环列表:
<ul >
    <li v-for="(item,index) in data_list" :key="index">{{item}}</li>
</ul>
​
return {
      data_list :[
          '88998','hahahx'
      ]
}
​
data(){
    return {
        data_list : ['666','777']
    }
}
​
​
index 指的就是当前循环数组或者对象的索引位置
<li v-for='(元素本身,索引) in arr变量' :key='索引'></li>
​
​
​
循环对象：
​
<ul >
     <li v-for="(val,key) in data_list" :key="key">{{val}}-{{key}}</li>
</ul>
item: 对应的是对象的val
index: 对应的是对象的key
data() {
    return {
      data_list :{
        name1:123,
        name2:456
      }
    }
  },
​
与循环数组的不同:
    :key 绑定的是对象的key值
      
​
数组：
  item:是数组中的元素 index:是数组的下标索引
对象：
  val:是对象中的键值 key:当前对象元素中的key
​
:key='索引'原因:
    1.为了进行辨识dom
    2.为了区别相同的元素
方便vue追踪那个节点，从而重用和排序元素，设置每个元素的唯一标识key
当对哪个循环元素进行值得修改时，如果不设置唯一标识key 那么就会全部进行修改，如果key存在那么就会只更新对应key值

v-bind

v-bind 简写 :
v-bind 作用 : 主要作用是为了绑定标签中的自带的属性(自定义的,标签自带)
当时使用v-bind绑定属性是,必须使用data中的数据,就会动态的发生变化
​
例如：
.wrap{
     height：200px
     width:200px
     background-color:red
}
<div class='wrap'></div>  {表示这个标签的范围是一个红色的区域200*200
​
v-bind的使用：
    1.v-bind 可以和不同的class的属性同时存在
    2.可以使用表达式,通过data中的值控制样式等等
<div :class='{"wrap":active}' class="aaa">1111</div>
:class='{"wrap":active}' 根据active值进行显示wrapcss属性
  data() {
    return {
      active:true
    }
  },
      
可以绑定 href='对应的值就是vue对象中的值'
​
v-bind：绑定全部的标签属性,使用绑定属性,需要使用data中的值,不然没有效果
​
// v-bind 简写  ：

v-on

v-on:
	使用v-on:click可以对象当前的dom进行绑定click事件
全部的原生的js事件都可以使用v-on进行绑定
// 在vue中对与事件的声明都放在methods中
 
1.v-on 和 v-if 组合使用
<div v-if="is_show" v-on:click="show">点击一下</div>
  data() {
    return {
      is_show:true
    }
  },
  methods:{
    show(){
      console.log(1234)
    }
  }
v-if: 配合控制按钮的显示和隐藏
 
 
2.v-on 和 v-bind属性 组合使用
 
<div  v-on:click="show" v-bind:class="{wrap:is_show}">点击一下</div>
data() {
    return {
      is_show:true
    }
  },
  methods:{
    show(){
      console.log(1234)
    }
  }
 
.wrap{
  height:200px;
  width:200px;
  background-color:red;
}
v-bind ：配合使用可以控制标签的样式
 
 
// v-on 可以简写为 @

v-model

v-model:
	双向绑定只能用于表单标签使用,是vue很重要的指令系统,数据驱动视图,使用v-model进行实现数据的双向的绑定
 
单向绑定： 
	view  <-----  data    //data中的数据驱动view
双向数据绑定：
	view    <----->  data   // data中的数据驱动view 同时view也可以驱动data
 
// 只允许在表单控件中使用
1.input
2.textarea
3.select等等,单选,多选,下拉,多选下拉,单选下拉....
4.在input框中 省略了value属性被v-model代替
4.<input type='text' name='' v-model='name'/>  显示123
<p>{{name}}</p> 显示123
 
 
data(){
    return {
        name:"123"
    }
}
 
当对input 输入框进行改变后  p标签也会被改变
vue教程官网：讲解v-model的作用和案例
https://cn.vuejs.org/v2/guide/forms.html
 
主要原理:
v-bind:value='a' 属性
data {
	a:123
}
在当前的input的标签中绑定一个input的事件   @input='input'
在input的事件中对 a进行赋值 监听到的输入的内容，那么就是v-model的原理

VUE组件

在组件中的data必须是一个函数
全局组件，谁够可以用
局部组件，只能在当前的局部组件中才能使用(父组件注册后才能使用)

局部组件

局部使用

1.创建子组件
创建一个header.vue的文件
组件的内容:
<template>
    <div class="hello">
       <div>我是子组件</div>
	</div>
</template>
 
 
2.父组件中使用子组件
<template>
  <div id="app">
    // 3.在父模板中使用子组件 
    <HelloWorld></HelloWorld>
or
	<HelloWorld/>
  </div>
</template>
 
<script>
// 1.导入子组件
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    // 2.挂在子组件  
    HelloWorld
  },
}
</script>
 
 
使用总结：1.声明子  2.挂载子  3.用子

props父向子传值

数据流向：单项数据流向
父组件 向子组件传递数据
使用:
    1.在父组件中对子组件进行v-bind:父变量='传入的父data中的值'
    2.在子组件中通过props:['父变量','可以接受多个'..]接受
    3.在子组件中进行使用{{ 父变量 }}
缺点：
	多层组件嵌套 也是这样操作的，但是需要一层一层的操作传递
 
props在组件中注册自定义的特性，当一个值传递给一个prop特性时，他就变成传递值的那个组件的实例 的一个属性
一个组件默认可以拥有任意一个popr(所以在子组件中的poprs 带s)任何值都可以传递给popr，当传递的值被传递时，那么就像访问data中的值一样
 
解释：https://blog.csdn.net/weixin_48764743/article/details/120958057
 
 
父组件:
<template>
  <div id="app">
    // 2.使用:title(父变量名) = 'text'(传给子的值)
    <HelloWorld :title="text"></HelloWorld>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      // 1.设置传入的值
      text:'我是从父组件中传入的值'
    }
  }
}
</script>
 
 
子组件：
<template>
  <div class="hello">
    <div>我是子组件</div>
	//2.使用变量
    <div>{{ title }}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props:['title'] // 1.父组件传入的变量
}
</script>

$emit子向父传值

vue内部提供一个自定的事件系统，解决子向父传值的为，可以调用$emit方法将事件的名字传给父级然他(触发一个事件)(自定义的事件)
 
1.子组件通过
	this.$emit('自定义事件名称','从子组件传入的值(任意事件)') 抛出一个自定义的事件
 
2.父组件在注册的子组件中接受自定义事件,并且赋值给父组件中事件
	<子组件 @子组件定义的事件='父组件定义的事件'></子组件>
	
	父组件定义的事件(newVal){
        newVal // 接受的就是当前子传父的值
    }
 
1.给子组件绑定原生的事件，在事件内部 执行内部的方法$eimt
2.在父组件中就会接受到子组件的自定义事件，就进行执行
当点击子组件的按钮时，就会将自定义的事件进行抛出，并且传递参数,就会触发父组件对应的事件,接受传递的参数
 
子组件:
<template>
  <div class="hello">
    // 1.当前点击按钮就会将自定义事件抛出给父组件  
    <button @click='show'>传递给父</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      text:'我是子组件的值'
    }
  },
  methods:{
    // 2.抛出  
    show(){
      // 3.抛出自定义事件,并且将text携带
      this.$emit('showFl',this.text)
    }
  }
}
</script>
 
 
父组件：
<template>
  <div id="app">
    //1.接受子组件抛出的自定义事件并且赋值父组件下的事件
    <HelloWorld  @showFl='func'></HelloWorld>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
 
    }
  },
  methods:{
    // 2.定义事件,接受val为子组件传入的参数  
    func(val){
      console.log(val)
    }
  }
}
</script>

通过事件进行传递父传子的值

1. 在父级的组件中设置一个点击事件，当点击时对值进行加1
2. 因为是父级传给子级，所以只需要在点击事件好 对传过去的值进行 +1操作就可以

全局组件的使用

只要创建完毕，就可以在任意一个组件中进行使用，任何组件 都可以共享这样组件工具
定义的组件：命名规范首字母大写
创建完毕后，就挂载到最外层的顶层对象上去了(vue对象)，可以在任何的组件进行使用
 
需要在main.js中进行创建
import HelloWorld from '@/components/HelloWorld' // 1.导入组件
Vue.component('component-a'(公共组件的名称),HelloWorld) // 2.创建为全局组件
 
在app.vue中直接
<component-a></component-a> // 不需要进行注册
 
vue 官网：
https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

provide 与 inject 父传子

provide 与 inject 用法(父组件传给子组件，挂载到全部的子组件身上，)
(使用props，传入的话一个理父组件的更深的子组件就不能在使用了，嵌套太深不合适，Prop 存在逐级透传问题)
 
provide 属于提供方法 是一个函数
provide(){
	return{
	   提供的值或者方法:当前组件内容值或者方法 this.值 and this.方法,(将自己组件中的方法或者值提供给其他组件使用)
	   ......
	   .....
	 'show'：this.show,
	'name': this.name // 这是一个值	
	}
},
data(){
	return{
	    name:"wkx"
	}
}，
methods:{
       show(){
	pass	
}		
}
 
 
inject 属于接受provide 提供的值或者方法在当前组件中使用
 
inject:['提供1','提供2'] // inject:['name','show'] this.name 或者this.show 进行调用
 
 
this.$nextTick(()=>{
})
vue时响应的框架，对dom的更新不是同步执行的，
而是存放在一个缓存队列中，直到下一次才执行dom会一起执行(),
保证组件只执行无论发什么多少i变化组件只会更新一次
this.$nextTick() 作用可以立即的获取更新的dom的内容
 
官方的定义：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
可以理解
我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新
 
作用：
如果想要在修改数据后立刻得到更新后的DOM结构 就可以使用
也可以立即的更新数据等等
 
<template>
  <!-- 全部页面出口 -->
  <RouterView v-if="isRouterAlive"/>
</template>
<script>
 
    
父组件进行设置
</script>
<style scoped>
</style>
<template>
  <!-- 全部页面出口 -->
  <RouterView v-if="isRouterAlive"/>
</template>
<script>
 
export default {
  // 重载刷新
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style scoped>
</style>
 
在子组件中进行调用
inject: ['reload'],
this.reload()

 

插糟(官网有讲解)

适应slot 元素作为承载分发内容的出口（匿名插糟）
vue官网：
https://cn.vuejs.org/v2/guide/components-slots.html

VUE过滤器

vue 过滤器：
https://cn.vuejs.org/v2/guide/filters.html
 
{{}} 和 v-bind 的进行使用
 
过滤器可以用在两个地方：
	双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
 
使用过滤器：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
 
1.局部过滤器
// 通过 filters进行声明
filters:{
    '过滤器的名字':function(value){
        // value:接受的值
        // 必须要返回一个处理过的值，要不然就会页面不会显示
        return value
    }
}
// 使用过滤器
{{ 参数|过滤器的名字 }}
<div v-bind:id="参数 | 过滤器的名字"></div>
 
 
 
2. 全局过滤器的使用 在main.js中进行声明
// 过滤器的名字函数执行的方法
Vue.filter('reverse',function (value) {
      return value.split(' ').reverse().join('')
})

VUE侦听器

通过监听变量变化调用函数(只要发生变化就会调用函数)
检测数据的变化(单个属性)
// msg监听的属性值:function(value(接受的当前监听的属性值)){处理属性值的逻辑}
// 值要监听的属性值变化，函数就会执行
1.简单监听：
watch:{
   监听的值(data中的):function (newV,oldV) {
       	// newV：最新改变的值 
        // oldV： 旧的值，获取被新值替代的旧值
        console.log(newV)
        }
  }
 
 
2.深度监听: 主要监听复杂的类型数组和对象
<template>
  <div id="app">
    <input type="text" v-model="stus[0].name">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      stus:[{name:'wkx'}] // 深度的监听，主要针对 对象和数值
    }
  },
  watch: {
    stus:{
      deep:"true", // 开启深度监听
      handler:function(newV,oldV){  // 代表深度监视
        console.log(newV);  //拿到这个值 [{…}, __ob__: Observer] 是一个发生变化的对象
        console.log(newV[0].name) // 拿到这个改变后的对象/获取变化后对象的属性
        console.log(oldV) // 打印旧对象
      }
    }
  }
}
</script>
 
 
例如：简单监听
<template>
  <div id="app">
    <input type="text" v-model="text"> // 双向绑定的值只要发生变化,监听属性就会调用函数打印
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      text: '666'
    }
  },
  watch: {
    text:function (newV,oldV) {
      console.log(newV)
    }
  }
}
</script>

VUE计算属性

检测数据的变化，计算data中的相关属性(多个属性)
计算属性 实时监听data中的属性变化，只要变化，就会执行computed中的方法
太过于繁琐，可以使用计算属性，对多个值进行处理
 
例如：
{{ name + '他的年龄' + age }}  
{{wkxDesc}}
data(){
    return{
        name:"wkx",
        age:18
    }
},
computed:{ 
    wkxDesc:function () {
        return `${this.name}他的年龄${this.age}`
    }
}
// 实时的监听者两个属性的变化，只要变化，就会触发方法进行返回
 
1.监听属性: 默认只有get方法
默认只有getter方法。
可以有多个监听方法
key:val格式 key是监听属性名称 val:是回调函数
监听方法必须有返回值
computed:{
    wkxDesc:function () {
        return `${this.name}他的年龄${this.age}`
    }
}
 
 
2.监听属性的 set方法
如果使用了set 变换书写方式,
get:function()
set:function()
computed:{
    wkxDesc:{
        set:function(newValue){},  set字面意思就是获取值(取最新的值)
        get:function(){  // get 获取值，当前使用这个计算属性时，需将get中的结果返回给使用者
            return 
        },
    }
},
 
例如：
<template>
  <div id="app">
    <input type="text " v-model="msg"> // 收到监听属性的返回get方法
    <h3>{{getmsg}}</h3>  //收到监听属性的返回get方法
  </div> 
</template>
 
<script>
export default {
  data() {
    return {
      msg:'' // 默认为空
    }
  },
  computed:{
    getmsg:{
      set:function(newValue){  //set + get 方法相当于一个 v-model
        console.log(newValue,'打印') // 接受最新的值
      }, 
      get:function () {
        return this.msg  // 返回最新的值
      }
    }
  }
}
</script>
 
另一种操作
<input type="text " v-model="wkxmsg">  //收到监听属性的返回get方法
<h3>{{wkxmsg}}</h3>  //收到监听属性的返回get方法
data(){
    msg:'' // 默认为空
}
wkxmsg:{  //set + get 方法相当于一个 v-model
    // 获取新的值，并且进行赋值
    set:function (newValue){
        console.log(newValue) 
        this.msg = newValue // 将最新的值进行赋值
    },
        // 返回新的值赋值给msg
        get:function (){
            return this.msg  // 返回最新的赋值
        }
}
 
// 只要值发生变化，那么就会执行 get方法，将值返回(get方法必须又返回值)
// set 方法就是，当值进行变化时，就会发现这最新变化的值(与input事件相似)

 

bus公交车vue2

在vue2中是用于兄弟组件之间的传输数据的(全局引入方式)
 
1.创建文件夹
bus/index.js
import Vue from 'vue' // 引入vue对象
const bus = new Vue() // 创建vue对象
export default bus // 抛出vue创建的对象
 
2.在main.js文件夹下
import Bus from './bus/index' // 引入bus对象
Vue.prototype.$bus = Bus // 注册全局变量 

父组件中引入两个兄弟组件

<template>
  <div>
    <div>IndexView.vue</div>
    <AdminView></AdminView> // 使用
    <OttoView></OttoView>
  </div>
 
</template>
 
<script>
import AdminView from '@/components/AdminView' // 引入组件1
import OttoView from '@/components/OttoView' // 引入组件2
export default {
  name:'IndexView',
  components:{
    OttoView, // 注册
    AdminView
  }
}
</script>
 
<style scoped>
 
</style>

AdminView组件

// 通过this.$bus.$emit('事件名称','抛出的数据') 抛出
methods: {
    show() { // 抛出数据
      this.$bus.$emit('busText', this.text)
    }
},

OttoView组件

// 使用声明周期函数mounted
// mounted在dom渲染完毕后调用
// this.$bus.$on('事件名称',回调函数(接受的参数)=>{})
mounted() {
	this.$bus.$on('busText', val => {
	console.log(val)
	})
}

bus公交车vue3

局部引入方式
1.安装
npm install --save mitt
 
2.创建文件夹
bus/index.js
 
import mitt from 'mitt' // 引入
const bus = mitt()  // 创建对象
export default bus  // 抛出对象
 
3.引入组件
<script>
import AdminView from '@/components/AdminView' // 引入组件1
import OttoView from '@/components/OttoView' // 引入组件2
export default {
  name:'IndexView',
  components:{
    OttoView, // 注册
    AdminView
  }
}
 
4.在AdminView组件中使用(抛出数据)
import bus from '@/bus/index'
methods: {
    show() { // 抛出数据
        bus.emit('text', this.text)
    }
},
    
5.在OttoView组件中使用(接受数据)
import bus from '@/bus/index'
mounted() {
    bus.on('text',(val)=>{
        console.log(val)
    })
}
 
 
// 全局引入方式
在main.js中导入mitt
import mitt from "mitt";
app.config.globalProperties.$bus = mitt(); // 注册全局变量

VUE生命周期

beforeCreate  组件创建前(不会做任何事情)
created  组件创建完成(进行发送ajax请求)  **** 
beforeMount 在挂载之前(dom)用的不多
mounted (装在dom后才会调用，真是存在的dom) 可以在这里面进行操作dom   **** 
beforeUpdate  更新之前 更新数据
updated  更新完 更新数据
activated
deactivated
beforeDestroy
destroyed
errorCaptured
 
 
 
 
      beforeCreate() {
          // 组件创建前调用
        console.log(this.text,'在组件创建之前') // undefined '在组件创建之前
      },
      created() {
          // 组件创建后调用
        // 可以发送ajax请求
        console.log(this.text,'组件创建完成后') // 哈哈哈 组件创建完成  可以进行请求后端的数据，进行渲染数据(主要发送ajax请求)
        this.text = '修改值或者 赋值'
      },
      beforeMount() {
          // 装载数据到dom前调用
        console.log(document.getElementById('app'),'dom渲染之前') //  <div id="app"></div> 什么都没有，内部的组件没有被渲染
      },
      mounted() {
          // 装载数据到dom后调用
        // 可以操作dom
        console.log(document.getElementById('app'),'dom渲染之后') //  <div id="app">...</div>  已经渲染了组件
      },
      beforeUpdate() {
          // 更新之前调用的钩子，可以获取原始的dom
        // 只有更新数据了才会触发这个方法
        console.log(document.getElementById('app').innerHTML,'更新前')
      },
      updated() {
          // 更新钩子 之后，可以获取最新的dom
        // 只有更新数据了才会触发这个方法
        console.log(document.getElementById('app').innerHTML,'更新后')
      },
      beforeDestroy() {
          // 组件被销毁  会消耗性能，销毁直接消失，恢复组件就会从头创建
        console.log('组件的销毁前')
      },
      destroyed() {
          // 组件销毁后
        console.log('组件的销毁后')
      },
      activated() {
          // 使用后，组件销毁前和销毁后 不会使用
        // 需要配合<keep-alive> 组件 </keep-alive>
        console.log('组件激活')
      },
      deactivated() {
        console.log('组件停用')
      }
 
 
vue 的虚拟dom 渲染快

VUE中$ref

使用$ref获取标签dom

 
1.this.$refs // 可以进行dom操作
<template>
  <div id="app">
  <div ref="divs">标签</div> // div 绑定ref 属性
    <button @click="show">点击</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg:'' // 默认为空
    }
  },
  // 获取ref属性  
  methods:{ //  只有在这个声明周期的方法中可以获取dom,因为这个方法是在dom加载之后
    show(){
      console.log(this.$refs.divs.innerText)  // 获取当前的标签，可以进行javascript 的dom 操作
    }
  }
}
</script>
 
 
2.this.$nextTic
使用$nextTick的特殊性请，这个是一个dom更新循环结束后的延迟回调
vue 实现响应式并不是数据发生变化之后的dom立即发生变化，而是按照一定的策略进行的dom的更新
$nextTick 是在dom更新循环结束之后进行的延迟回调，在修改数据之后使用$nextTick，可以获取回调中更新后的dom操作
data(){
    return{
        isshow:false
    }
}
 
<input v-if='isshow' ref='fos'> // 默认不会显示这个input标签
mounted(){
    this.isshow=true  // 修改为真，那么按照正常input标签会显示在页面中
  	$this.refs.fos //获取 更新之后的dom 对象
    需要通过
    this.$nextTic(()=>{
        this.$refs.fos  // 可以 获取到最新的更新的dom对象
    })
    
}
 
 
3.this内的用法
this.$refs //获取组件内的元素
this.$el  //获取组件对象的dom元素 
this.$parent //获取当前组件父级组件
this.$root  // 获取 new vue 的实例化对象
this.$children // 获取当前组件的子组件

使用$ref调用子组件的方法

<template>
  <div id="app">
    <HelloWorld ref="hello"></HelloWorld> // 3 使用 设置ref属性 
    <button @click="show">点击</button>
  </div>
</template>
 
<script>
import HelloWorld from '@/components/HelloWorld' // 1 导入
export default {
  components:{
    HelloWorld // 2 注册
  },
  methods:{
    show(){
      console.log(this.$refs.hello) // 调用ref属性 是可以获取当前子组件
      console.log(this.$refs.hello.text) // 调用子组件变量
      console.log(this.$refs.hello.func()) // 调用子组件中函数并执行  
    }
  }
}
</script>

使用ref方式调用组件中的值案例

子给父传值是，不想让子触发事件传递值
可以使用
ref
 
1.导入子组件
import BlogEditorView from '../editor/BlogEditorView.vue'
 
2.注册子组件
  components: {
    BlogEditorView
  },
  
3.使用子组件绑定ref
<BlogEditorView ref='getData'/>
 
4.在子组件中设置一个方法
get_data(){
	return this.html // 将值进行返回
}
 
5.在父类调用触发子组件的方法
this.$refs.getData.get_data() // 触发子组件的方法获取想要的值

webpack

api文档：https://webpack.js.org/configuration/mode/

介绍的博客为什么要是用：https://www.cnblogs.com/-walker/p/6056529.html
 
 
webpack工具：是一个打包工具，对前端的资源进行打包，(html,css,png,mp4,...)打包编译上线。
写完项目：就是将编译打包压缩。输入一个js文件，后引入这个js文件，上线
webpack 内部有许多的loader 进行内部的html，css，png编译
 
 
也就是html 和css 等等内容，打包成为浏览器可以阅读的内容
define 抛出
 
webpack的主要作用：1.编译打包 2.支持模块化使用
 
模块化概念
es6的module模块导入：
	抛出
	export default  对象||函数|| 变量  //抛出默认的意思
	调入用
	import xx from '../index.js'
	
	直接抛出 使用export

使用

webpack下载的工具：
cmd
npm i webpack
查看webpack 版本 ：webpack -v
安装指定的版本： npm i webpack@版本号 -g 下载全局
注意：webpack版本要和vue的脚手架进行兼容
 
创建一个文件夹
创建3个文件1个html 2个js 文件
 
1.html文件：
<!--导入依赖关系 先等待app 在进行main 这是同步的方式-->
<!--<script src="App.js"></script>-->
<!--<script src="main.js"></script>-->
 
<!--引入mainjs文件，打印name变量 报错：因为不适用这个方法 需要使用webpack打包工具-->
<script src="main.js"></script>
 
2.js文件1 app
let name = 'wkx'
 
// 定义一个变量，使用es6的方式进行抛出
export default name  // 抛出name变量
//抛出的方式
let age = 123;
export {age}
export var fav='鸡汤'
export function add(){
    window.alert("弹窗")
}
 
3.js文件2 main
// 出口文件
// 导入appjs中的变量
 
import name from './App'
 
console.log(name)
// 引入多个
import {add,age,fav} from './App'
 
console.log(age)
console.log(fav)
add() // 函数
 
// 全部引入的方法式
import * as o from './App'
console.log(o) //就可以获取 一个对象，内部就是app.js抛出的全部 内容
 
打包过程：
进行项目的更目录下cmd
webpack ./main.js ./bundle.js // 老版本的打包命令 已经不能再用了
webpack ./main.js -o ./bundle  
main.js  为项目的出口
bundle.js 打包编译后的文件夹
当使用完毕后就会在当前的main.js 的目录下生成一个bundle的文件夹(文件夹内部存在一个main.js的文件就是打包编译后的js文件)

使用2：自动打包

打包方式2：
1.在跟目录下执行
npm init -yes
 
在目录下生成了一个webpack的配置文件包
package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1" // 原来
       "dev": "webpack"  // 在这里设置这个内容 可以执行nup run dec
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
2.在执行npm  i webpack -D
就会在项目中下载一个mode_modules的文件包
package_lock.json 的文件
 
3.在创建一个webpack.config.js的文件(文件名字必须这样设置)
内容
module.exports ={
    // 内部是node.js 的写法
    // entry 入口
    // output 出口
    entry: {
        main:"./main.js" //被编译的文件入口
    },
    output: {
        filename: "bundle.js" // 编译后的文件出口
    },
    watch:true // 代表只要 更新代码就会自动编译一下(设置后就会自动编译)
 
}
//当直接执行webpack 就会执行配置文件的操作，就会帮助直接打包编译
都做了什么：
生成一个dist的文件夹
内部有一个bundle.js 直接导入就可以
 
 
当在package.json文件中设置了 dev：'webpack' 编译命令是
执行  npm run dev 会提示安装一个webpack-cil 的脚手架
安装成功后 就会阻塞在哪里
因为在配置文件中设置了wtach：true ，只要代码 更新就会进行编译
 
注意：在项目中必须想要时刻的进行编译，就会这样配置和启动npm run dev

wepack在项目中(不同的名字下的webpack配置文件)的设置

1.weback中的文件名问题：
在项目中需要创建webpack.config.js的文件
文件名称可以修改吗
 
webpack.dev.config.js文件
watch:true  带自动的监听编译
 
webpack.prod.config.js 文件
watch:true  不带自定监听编译
 
在需要package.json中设置
监听实时编译 开发环境(调试使用)
"dev" : "webpack --config ./webpack.dev.config.js"  npm run dev
直接编译 生产环境(对外开放的服务器，会关闭错误报告，打开错误日志)
"build" : "webpack --config ./webpack.prod.config.js" npm run build

css-loader简绍

api：https://doc.codingdict.com/webpack-cn-doc/concepts/loaders/

如果项目中存在css文件的话，直接编译就会报错。提示需要一个加载器loader
 
1.需要安装加载器 ：
npm install css-loader -D  处理文件后缀为css的加载器
npm install style-loader -D  这个加载器作用：将编译后的css文件 代码 生成一个
style 标签(代码) 将style标签插入到  index.html (这个文件就是，那个页面使用了编译后的js文件就会是哪个) 中的head标签中
 
2.下载完毕后就会在当前的
package.js中能发现当前的配置
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",  // 加载器
    "style-loader": "^3.3.1", // 加载器
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2"
  }
}
 
3.需要在webpack.config.js中进行配置
识别loader加载器
module.exports ={
    entry: {
        main:"./main.js" //被编译的文件入口
    },
    output: {
        filename: "bundle.js" // 编译后的文件出口
    },
    watch:true, // 代表只要 更新代码就会自动编译一下
    // 第三方的匹配规则
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}
 
loader 加载器 能对 css.json png jpg mp4 es6 通过这些加载器进行解析

webpack插件的介绍

webpack中可以配置一些插件，不用手动生成index.html的代码
 
html-webpack-plugin插件
 
下载插件
npm install html-webpack-plugin -D
下载完成后，可以在package.json中看到响应的下的配置信息
 
{
  "name": "webpack", 项目名称
  "version": "1.0.0",  版本信息
  "description": "",  描述
  "main": "src/main.js", 项目输出出口
  "scripts": {
    "dev": "webpack"  项目启动命令 对应的设置的是webpack
  },
  "keywords": [], 关键字
  "author": "",
  "license": "ISC",
  "devDependencies": {  下载的配置信息
    "css-loader": "^6.7.1",   loader加载器
    "html-webpack-plugin": "^5.5.0", html插件版本
    "style-loader": "^3.3.1", loader加载器
    "webpack": "^5.71.0", webpack版本
    "webpack-cli": "^4.9.2" 脚手架
  }
}
 
2.在webpack.config.js文件中进行设置html-webpack-plugin 
这个插件使用，会依照配置进行生成html文件
 
 
 
 
// 设置html-webpack-plugin 插件
var HtmlWebpackPlugin = require('html-webpack-plugin') //相当于注册
 
 
module.exports ={
    entry: {
        main:"./src/main.js" //被编译的文件入口
    },
    output: {
        filename: "bundle.js" // 编译后的文件出口
    },
    watch:true, // 代表只要 更新代码就会自动编译一下
    module: { //配置 loader 加载器 作用 加载css文件 和生成 <style></style>到head下
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    // 插件：当时使用时，会按照设置的参照进行生html文件，生成到 dist文件中(打包编译的文件中)
    plugins: [
        // new 以这个注册的对象 在对象内部是一个对象类型的内容
        // template 是模板的意思 key
        // values 是对应设置的参照物，这个插件会按照路径下的参照物生成html文件
        new HtmlWebpackPlugin({
            template: "./index.html" //设置参照物
        })
    ]
}

补充

Http-server是一个轻量级的基于nodejs的http服务器，它最大好处就是：
可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的js代码
插件 
npm install -g http-server  服务器
 
设置端口：
进入dist/编译打包的目录(生成环境下的上线的操作)
 
 
http-server -o -p 9999 // 9999是端口号的意思 随便写
按照完毕插件，输入命令就可以启动服务器 显示当前打包编译的html的文件

webpack-dev-server

webpack-dev-server插件：
1.下载插件
npm install webpack-dev-server -D
 
在package.json 中的文件中
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"  //下载的dev-sever插件
  }
}
 
作用：
执行命令是 npm run dev 时 直接打开浏览器
 
需要在package.json文件中的 执行命令进行设置
之前：
  "scripts": {
    "dev": "webpack"
  },
      
 设置dev-sever
  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline"
  },
      webpack-dev-sever中的配置参数
配置 --open 后回自动打开默认的浏览器
配置 --port 3000 表示默认打开端口是 3000
配置 --contentBase src 表示默认打开src 中的 也就是首页 默认打开的页面
配置 --hot 就是热重载 热更新 可以减少不必要的代码更新，可以实现浏览器的无刷新改变	
 
问题:
当执行时报错：
Compiled with problems:X
 
WARNING
 
configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
 
 
意思就是没有设置这个项目是环境还是 开发环境 需要设置一下
 --mode production 生产环境
--mode development 开发环境
 
 
"dev": "webpack-dev-server --open --mode development " //设置一下就可以

veu-loader简绍和单页项目介绍

npm install vue-loader -D  解析vue为后缀的文件
npm install vue-template-ccompiler -D  解析当前tmplate的标签
 
// 对应版本 不然报错
 
当时用.vue的文件
组成部分： 业务结构 html  业务逻辑 js  组件的样式 css
 
tmplate
script
<style scope> //添加一个scope的属性 表示当前只对当前组件的样式css起作用
 	写的样式是全局的，怎么设置每个组件的局部的样式
</style>
 
 
// 设置html-webpack-plugin 插件
var HtmlWebpackPlugin = require('html-webpack-plugin') //相当于注册
 
 
module.exports ={
    entry: {
        main:"./src/main.js" //被编译的文件入口
    },
    output: {
        filename: "bundle.js" // 编译后的文件出口
    },
    watch:true, // 代表只要 更新代码就会自动编译一下
    module: { //配置 loader 加载器 作用 加载css文件 和生成 <style></style>到head下
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            { // 解析当前的vue为后缀名的文件
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    // 插件：当时使用时，会按照设置的参照进行生html文件，生成到 dist文件中(打包编译的文件中)
    plugins: [
        // new 以这个注册的对象 在对象内部是一个对象类型的内容
        // template 是模板的意思 key
        // values 是对应设置的参照物，这个插件会按照路径下的参照物生成html文件
        new HtmlWebpackPlugin({
            template: "./index.html" //设置参照物
        })
    ]
}

VUE脚手架

网站：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
脚手架：就是搭好了一些架子，主要将注意放在对代码和功能的实现
脚手架都已将一切都做好了
vue 的脚手架： vue-cli 脚手架 就node.js 的开发环境下进行的操作
vue -V 版本
 
 
bom install -g @vue/cli  下载脚手架
vue -V 查看脚手架版本
npm update -g @vue/cli 升级脚手架
 
1.生成3.0以上的脚手架命令
vue ui  图形化创建项目命令
vue cteate 项目名称   在命令行创建vue 项目
在已安装项目中添加插件
vue add 插件(vuex,vue-router) 这个命令也可以安装第三方插件(饿了么组件等等)
 
2.生成2.0版本的脚手架命令
生成一个webpack-simple 的项目 需要安装
npm i -g @vue/cli-init // 这个命令
nup init webpack-simple 项目名称
 
拉去旧版本2.0版本的命令
npm install -g @vue/cli-init

执行vue vreate 创建项目时的预设：

 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 5 ( ) Router // vue-router（vue路由）
 6 ( ) Vuex // vuex（vue的状态管理模式）
 7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试
 
 
选择了2 5 6 8 9 10
 
设置完毕后
提示：
1.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ：路由是否使用历史模式：
     hash模式 xxx/#/xx
     history 模式 xxx/xx
     一个在url中带#号和不带#号
     也可以在vue-router 的index.js文件中进行设置
     mode: 'history'  //设置模式，效果：取消根路径后面的“#”
    区别：
    hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能失效了。
    其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，
    而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中
 
2.Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
    //选择 css的预处理器
    选择 stylus 
    3种	预处理器的讲解：https://www.cnblogs.com/panew/p/4478663.html
 
3.Pick a linter / formatter config: (Use arrow keys) 设置代码效验方式
ESLint + Standard config	//选择标准模式，选择第3个不要选择其他的，前两个提示不明确，最后一个属于严格模式，少东西就会牌飘红
 
 
4.Pick additional lint features: 询问项目的什么时候校验格式
	选择 1.Lint on save 选择保存时  选择1
 
// 这是选择了单元测试
5.Pick a unit testing solution:  选择测试框架针对程序员选的测试方案
    只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成
    选择 Mocha + Chai 框架  执行命令 npm test
 
6.Where do you prefer placing config for Babel, ESLint, etc. 将上述的配置文件放在哪里
	选择 In package.json  
 
7.Save this as a preset for future projects 是否将上述的设置存放在预设中
	选择 n
 
 
设置完毕的项目中会提示：
Project setup 项目设置
npm install
Compiles and hot-reloads for development   开发模式启动命令
npm run serve
Compiles and minifies for production  生产模式命令 (将文件全部打包编译到一个叫"dict"文件夹内)
npm run build
Run your unit tests  单元测试  对项目中进行单元的测试，建议使用
npm run test:unit
Run your end-to-end tests  端对端测试
npm run test:e2e
Lints and fixes files 测试和修复文件 执行命令后会检查项目中是否有错误内容
npm run lint
 
 
创建项目建议
2 5 6 7 8 9
 
怎么设置当启动项目是怎么让默认打开浏览器
 
"serve": "vue-cli-service serve --open --hot", 就可以
--open 默认打开浏览器
--hot 默认为浏览器刷新，不需要手动
--port  设置默认的打开端口 不能这样设置，只有vue3.0才能这样设置
 
当设置这些事，会报错，属于脚手架版本过高 (打开的网址是0.0.0.0:8080)
可以在vue.config.js文件中设置一个参数
module.exports = {
  devServer: {
    port: 8080, // 端口
    host: "localhost", // 当前的网址
  },
};
或者
  devServer: {
    port: 8080, // 端口
    host: "localhost", // 当前的网址
    open: ture,  也可以
    hot : true 也可以
  },

单元测试

import { expect } from "chai";
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
 
一个组件就创建一个测试套件//针对hellworld组件创建的套件
describe("HelloWorld.vue", () => {
    // 测试用例，
    // renders props.msg when passed 测试组件的某个功能的名称 测试了父组件传子组件的变量
  it("renders props.msg when passed", () => {
      //测试工具渲染的内容
    const msg = "new message";  // 找到父组件的msg
    const wrapper = shallowMount(HelloWorld, {  // 子组件的msg  
      propsData: { msg },
    });
    expect(wrapper.text()).to.include(msg); // 意思就是当前的问题本是否等于子组件的文本
  });// 先等测试通过 不相等测试不通过
});

目录结构

在vue 中选择 2 5 6 7 8 9 选项 目录结构：
 
node_modules  // 项目的依赖包
public
	favicon.ico  //图标
	index.html //项目的出口文件，也是vue用el绑定的div标签的视图 app.vue绑定在当前的文件中
src
	assets //存放静态文件
    components //存放复用组件
    router // vue-router 路由文件
    store // vuex组件文件，vue内部的组件
    views // 视图文件夹
    App.vue // views 与 components 出口vue文件
	main.js //入口执行启动文件，dom渲染挂载第三方组件
tests  // 单元测试文件夹
 
.editorconfig //帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式
.gitignore  // 上传git时，配置可以忽略的文件，相当于上传远程仓库时的配置文件
babel.config.js // 这个是在项目创建时Babel转码器配置文件，将es6变为浏览器可以识别的es5
jsconfig.json // 提供js服务的文件
package.json  // webpack 的配置文件，内部有项目所依赖的包和执行命令等等内容
package-lock.json  // 就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
README.md  // 项目命令集文件
vue.config.js // vue/cli 脚手架生成的所用的可选的配置文件

vue的生态圈

参考链接：https://www.jianshu.com/p/7f195e58daa5/

vue项目中main.js文件讲解

// npm 下的文件 导入名称
import Vue from 'vue'
// 导入内置三方的或者自己编写的 导入路径
import App from './App.vue'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
// 将 项目的出口组件 app 渲染给 ./public/index.html<div id='app'></div>(实例化的对象)
new Vue({
  router, // 挂载组件
  store,
  render: h => h(App) // dom渲染，将app组件渲染给 实例化对象中
}).$mount('#app')
 
 
vue组件的内部标签的讲解：
<template>页面结构 </template>
<script>业务逻辑</script>
<style lang="stylus">css样式</style>

 

Vue-MD5加密

www.npmjs.compackagejs-md5
 
github ：https://github.com/emn178/js-md5
 
import md5 from 'js-md5';
      console.log(md5('123456'));
      var hash = md5.create();
      hash.update('Message to hash');
      hash.hex();
      console.log(hash.hex());

Vue-Cookie中加载用户信息

有vue-cookie 与vue-cookies
 
 
用户认证是使用vuecookie加载用户的信息
1.安装
npm install vue-cookie
 
2.引入
vue2引用
import Vue from 'vue'
import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
vue3引用
import VueCookie from 'vue-cookie'
app.config.globalProperties.$cookie = VueCookie
 
 
 
在组件中使用 this.$cookie
 
3.补充：vue2使用vue3不一定能使用
可以将cookie 创建一个单独的文件夹 将cookie的功能导入到main.js中
将cookie进行引入
import './utlis/cookie.js'
使用这种导入的方式
	vuex 读取 Vue.cookie.get('username')
   
封装方法：
export const getToken = () =>{
    return Vue.cookie.get('token')
}
 
export const getUsername = ()=>{
    return Vue.cookie.get('username')
}
最终将用户的状态存放在 vuex 中 方便读取
 
// 方法：
存
this.$cookie.set('test', 'Hello world!', 1);
1.key 2.val 3.过期时间
取
this.$cookie.get('test');
删
this.$cookie.delete('test');
 
//高级 设置域和时间
// 设置一个cookie域
this.$cookie.set('test', 'Random value', {expires: 1, domain: 'localhost'});
 
// 删除时必须删除域
this.$cookie.delete('test', {domain: 'localhost'});
 
// 定制过期时间
var date = new Date;
date.setDate(date.getDate() + 21);
 
this.$cookie.set('dateObject', 'A date object', { expires: date });
this.$cookie.set('dateString', 'A parsable date string', { expires: date.toGMTString() });
this.$cookie.set('integer', 'Seven days later', { expires: 7 });
this.$cookie.set('stringSuffixY', 'One year later', { expires: '1Y' });
this.$cookie.set('stringSuffixM', 'One month later', { expires: '1M' });
this.$cookie.set('stringSuffixD', 'One day later', { expires: '1D' });
this.$cookie.set('stringSuffixh', 'One hour later', { expires: '1h' });
this.$cookie.set('stringSuffixm', 'Ten minutes later', { expires: '10m' });
this.$cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '30s' });

http-server

什么是http-server
http-server是一个简单的零配置的命令行http服务器（基于nodejs），它足够强大便于生产和使用，用于本地测试和开发。一般我们打开一个网页都是通过files协议本地打开的方式，当前端项目打包之后想在本地查看发布效果的时候，这时需要在本地开启一个服务，此时http-server开始起作用。
总结：采用http-server本地运行前端项目
 
-p 端口号 (默认 8080)
 
-a IP 地址 (默认 0.0.0.0) 指定的地址必须是空闲的
 
-d 显示目录列表 (默认 'True')
 
-i 显示 autoIndex (默认 'True')
 
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
 
-s or --silent 禁止日志信息输出
 
--cors 启用 CORS via the Access-Control-Allow-Origin header
 
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
 
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
 
-S or --ssl 启用 https
 
-C or --cert ssl cert 文件路径 (default: cert.pem)
 
-K or --key Path to ssl key file (default: key.pem).
 
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')
 
-h or --help 打印以上列表并退出

关于Vue补充部分

1.如果npm 下载 出现npm 版本问题 在命令后面添加 --legacy-peer-deps
 
2.yarn 版本工具(并行的执行安装包,速度比npm块)
安装node.js后,再带npm包管理工具
npm版本更新:npm install -g npm
推荐使用yarn 包管理工具
安装： npm install -g yarn
更新到最新版本 ：npm install yarn@latest -g
安装第三方包: yarn add ....
 
3.使用eslint 项目规范格式时，进行的对项目的格式处理(项目规范处理)
yarn run lint --fix
 
4.在浏览器上对vue的插件进行禁用配置
需要在mian.js中对devtools设置为false 默认为ture
Vue.config.devtools = false;
 
6. 安装vue最新脚手架
npm install -g @vue/cli
 
7.卸载脚手架
npm uninstall vue-cli -g
 
8.更新脚手架
npm update -g @vue/cli
 
9.项目创建
	1.安装node.js语言
	2.安装vue脚手架
	3.执行vue create vue项目名进行创建
 
4.饿了么-ui
https://element.eleme.cn/#/zh-CN/component/icon
 
5. nuxt3
https://www.nuxtjs.org.cn/getting-started/installation.html
 
6.富文本编辑器
https://www.wangeditor.com/v5/getting-started.html
 
7.获取子标签下的文本内容
textContent

前端补充网站

https://www.axios-http.cn/docs/intro axios中文官方
https://www.iviewui.com/ viweui图
https://vxetable.cn/#/table/start/install table-vue-ui
https://cn.vuejs.org/ vue3
https://nodejs.org/en/ node
http://www.axios-js.com/zh-cn/docs/ axios中文官方

清空默认样式

/* @import "./iconfont.css"; */
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}
input {
    border: 0;
    outline: none;
    padding: 0;
    box-sizing: border-box;
}
 
img {
    vertical-align: middle;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    color: #333;
}
 
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
 
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
.clearFix::after{
    content:"";
    display: block;
    clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
 
a:link:hover{
    color : rgb(79, 76, 212) !important;
    text-decoration: underline;
}
 
/* 清除浮动 */
.clearfix::after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}