vue学习

嵌套
父选择器&
属性嵌套
占位符选择器 %
变量

$width: 5em;

字符串赋值 插值语句

#{$selector}

@import
@extend
props用法
父组件通过props向下传递数据 子组件通过events 给父组件发消息

静态props 子类需要用中划线写法

props:["name"]
<child name="msg"/>

动态props 使用v-bind

<child :name="msg">

props验证

String, Number, Boolean, Function, Object, Array, Symbol

props:{
   propA:Number,
   propB:[String,Number],
   propC:{
    type:String,
    required:true
   },
   propD:{
     type:Number,
     default:101
   },
   propE:{
      type:Object,
      default:function(){
      return {message:"I am from propE"}
      }
   },
   propF:{
     isValid:function(value){
      return value > 100;
     }
   }
}

单向数据流

不应该在子组件更改父组件数据

修改props

用局部变量接收修改

 data() {
    return { ownChildMsg: this.forChildMsg };
  }

计算属性 会响应式变化

 computed: {
    ownChildMsg() {
      return this.forChildMsg + "---ownChildMsg";
    }
  }

使用 变量来存储 使用watch来观察改变

 data() {
    return {
      ownChildMsg: this.forChildMsg
    };
  },
  watch: {
    forChildMsg() {
      this.ownChildMsg = this.forChildMsg;
    }
  }

Vue slot插槽 v-slot 占坑
<a href="#"> <slot></slot> </a>
数据不能跨组件传递

默认内容插槽

<button> <slot>默认内容</slot> </button>

具名插槽

<div> 
<header> <slot name="header"></slot> </header>
<main> <slot></slot> </main>
<footer> <slot name="footer"></slot> </footer> 
</div>
<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

不加name为default

作用域插槽

在插槽中范围子组件数据

//test.vue
<div>
    <!-- 设置默认值：{{user.lastName}}获取 Jun -->
    <!-- 如果home.vue中给这个插槽值的话，则不显示 Jun -->
    <!-- 设置一个 usertext 然后把user绑到设置的 usertext 上 -->
    <slot v-bind:usertext="user">{{user.lastName}}</slot>
</div>

//定义内容
data(){
  return{
    user:{
      firstName:"Fan",
      lastName:"Jun"
    }
  }
}
//home.vue
<div>
  <test v-slot:default="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>

多个插槽数据需要完整写出

<test>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</test>

解构插槽对象

<div>
  <test v-slot="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>
//相当于
<div>
  <test v-slot={usertext}>
    {{usertext.firstName}}
  </test>
</div>
//或
<div>
  <test v-slot={usertext:person}>
    {{person.firstName}}
  </test>
</div>
//或者给默认值
<div>
  <test v-slot="{usertext={firstName:'Yang'}}">
    {{usertext.firstName}}
  </test>
</div>

动态插槽名

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

具名插槽缩写

v-slot:header 可以被重写为 #header

vue-router

SPA 单页面路径管理器
更新视图而不重新请求页面

`<router-view/>
`

hash模式

通过锚点值的改变 渲染指定DOM位置不同的数据

history模式

使用route 覆盖所有候选资源

使用路由进行跳转

1.直接改状态栏
2.this.$router.push
3 <router-link to=""></router-link>

核心要点

使用name传参

routes: [ { path: '/', name: 'Hello', component: Hello } ]
在vue中使用 $route.name 来接收

在router-link中使用to传参
<router-link :to="{name:xxx,params{key:value}}">valueString</router-link>

在vue中使用 $route.params接收

利用url传参

{ path:'/params/:newsId/:newsTitle', component:Params }
<router-link to="/params/198/jspang website is very good">params</router-link>
newsId = 198 newsTitle =jspang website is very good 

单页面多路由区域操作 components

<router-view name="left" />
<router-view name="right" />
使用时
{ path: '/', name: 'HelloWorld', components: {default: HelloWorld, left:H1,//显示H1组件内容'I am H1 page,Welcome to H1' right:H2//显示H2组件内容'I am H2 page,Welcome to H2' } }

vue-router配置子路由 二级路由 <router-view> 配合 children

/user/foo/profile
/user/foo/posts

foo.vue 中加入
<router-view></router-view>
children: [{path: '/h1', name: 'H1', component: H1}, {path: '/h2', name: 'H2', component: H2} ]

vue-router 跳转方法

 this.$router.go(-1) 跳转上一次浏览的页面
 this.$router.replace('/menu') 跳转指定地址
this.$router.replace({name:'menulink'}) 指定名字路由
this.$router.push('/menu') 跳转指定地址
this.$router.push({name:'menulink'}) 指定名字路由

使用 *匹配404

nuxt sourcemap

build: {  
  extend(config, {isDev, isClient}) {  
    if (isClient && !isDev) {  
      config.devtool = 'source-map' // 处理client  
 }  
  }  
}build: {  
  extend(config, {isDev, isClient}) {  
    if (isClient && !isDev) {  
      config.devtool = 'source-map' // 处理client  
 }  
  }  
}

vue中的native

@click.native = "goback"
自定义button

<template>
  <button type="button" @click="clickHandler"><slot /></button>
</template>

export default {
  name: 'button',
  methods: {
    clickHandler () {
      this.$emit('vclick') // 触发 `vclick`事件
    }
  }
}

使用button.vue

<vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>
import vButton from '@/components/Button'
export default {
  components: { vButton },
  methods: {
    clickHandler () {
      alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
    },
    vClickHandler () {
      alert('onvclick') // 触发 `vclick` 自定义事件
    }
  }
}

如果加上native会同时出发
<vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

也可以兼容处理

<template>
  <!-- 此处自定义事件名也叫 `click` 所以在使用组件时加不加 `.native` 修饰符都可以 -->
  <button type="button" @click="$emit('click')"><slot /></button>
</template>

flex布局

盒模型基于 display + position + float 布局不方便
display flex
主轴 main axis 辅轴 cross axis

flex-direction

主轴方向
row row-reverse column column-reverse

flex-wrap 换行方式

nowrap 不换行
wrap 换行 第一行在上
wrap-reverse

flex-flow

是主轴方和换行的缩写 row nowrap

justify-content 主轴对齐方式

flex-start flex-end center space-between space-around

align-items 交叉轴对齐方式

flex-start flex-end center base-line stretch

align-content 多轴的对齐方式 适用于多行

flex-start flex-end center stretch space-between space-around

项目属性 order

排列位置

项目属性 flex-grow 0

定义放大倍数 为0不放大 同时存在时按比例

项目属性 flex-shrink 1

为0不缩小 按比例缩小

项目属性 flex-basis auto

auto为自身大小 分配多余空间之前的大小

项目属性 align-self

允许自己和别人不一样

flex

grow shrink basis

！！+cookies
使用加号转为数值 使用双感叹号转为bool值

在Vue中使用scss变量 共享变量

$menuText:#bfcbd9;
:export {  
  menuText: $menuText;
}

在vue中

:text-color="variables.menuText"
通过计算属性引用
computed: {  
  
 variables() {  
    return variables  
  }
}