vue3.0学习

ts代码自动编译

运行任务 tsc监视

//tsc --init

export导出

https://www.jianshu.com/p/541256d8abb3

webpack

vue3 之 Setup

vue3和vue2不同的地方就是不必写 data、methods、等代码块了

所有的东西都可以在 setup 中返回

setup 可以返回两种值：

1、返回对象，对象中的属性、方法都可以直接在模板中使用

vue基础语法

绑定数据

//绑定数据:
{{data}}

//绑定html
<span v-html='data'></span>

//pic 绑定属性

<img v-bind:src="data">

<img :src="data" :title="title">

//动态参数
:[type]="msg


//:key 不能丢
  <div v-for="(item,index) in list" :key="index">

    {{item}}---{{index}}
    
  </div>

<template>
  <a :title="msg" :[type]="msg">{{user.name}}</a>
</template>
<script>
export default {
  data(){
    return {
      msg:"http://www.baidu.com",
      user:{name:"tim"},
      type:'href',
      list:['张三','李四','王二麻子']
    }
  }
}
</script>
<style>
div {color: red;}
</style>

绑定事件

@click='setMsg()'
v-on:click='setMsg()'

  methods:{
    setMsg(){
      this.user.name='haha';
    }
  }

获取dom节点

//原生js
document.querySelector('#username').val


<a  href='' ref='age'>

this.$refs.age.value

数据绑定

v-mode

条件

v-if v-else v-else-if v-show


v-if 如果有多个标签需要放在 template里显示

dom操作


v-show 是css操作

计算属性

  computed:{
    testMsg(){
      return this.msg+="11111";
    }
  }

watch监听数据变化

  watch:{
    msg:function (val) {
      this.msg2=val+'new';
    }

回车事件

@keyup.enter=''

monted页面加载的时候触发的方法

mountd(){

}

@chang监听事件变化

@chang=''

vue集成SaaS sacc

cnpm install -D sass-loader node-sass


<style lang="scss" scoped>
//scoped标识css局部作用

组件

组件定义

//1.定义组件


//1.导入组件
import  home  from './components/Home.vue'

//2.挂载组件
components:{
  home
}


//3.使用组件
<home/>

父子组件传值

父向子传值

//子组件
<template>
    home 组件 {{title}}
</template>

<script>

export default {
//props接收
    props:["title"]
}
</script>




//父组件 this 传递整个父对象过去 子组件可以使用父对象的属性和方法
<home :title="tt"  :home="this"/>  
return{
    tt:'ttttddddddddddtt'
}

//这种方式传递过去的值,子组件修改了变量的值的话不会影响父组件
//也就是不能双向绑定


//如果需要双向绑定参考6.26

父组件调用子组件

//通过ref
<Home ref="home"/>

//调用
this.$refs.home.属性
this.$refs.home.方法

子组件主动调用父组件

this.$parent.属性
this.$parent.方法

子组件给父组件传值

//父组件 自定义一个事件
<input @run-parent="GetMsg"></input>



//子组件  执行父组件的自定义事件
this.$emit('run-parent','data');

//传递前可以进行验证
emits:{

	run-parent:()=>{
	
	
	}
}

非父子组件的传值

//使用第三方组件 mitt
cnpm install --save mitt


//A组件
mitt.emit('事件1',value)

//B组件
mitt.on('事件1',(value)=>{ value  })

组件上使用v-model实现双向绑定

子组件修改的时候,需要发出同步事件才可以
https://www.bilibili.com/video/BV1yt411e7xV?p=33&spm_id_from=pageDriver

//父组件里使用 v-model
<home v-model:title="tt" :home="this" ref="home" />

//子组件里
//使用 @input 事件
//可以写多个v-model
 <input type="text" v-model="title" v-model="title2" v-model="title3" @input="$emit('update:title',$event.target.value)">

组件中间的值slot

<home>xxxx</home>


  <slot></slot>

vue3.x非prop的attribute集成

一个非prop的attribute是指传向一个组件,但是该组件没有相应的props或emits定义的attribute.场景的实例包括class,style和id属性

会被子组件的根标签继承

可以通过设置 inheritAttrs:false 禁用默认继承

通过子组件使用 v-bind="$attrs" 来指定继承

组件生命周期函数

keep-alive

当组件切换的时候,可以保持这些组件的状态,避免反复渲染导致的性能问题

在不同的路由切换的时候,想保持组件的状态也可以使用keep-alive

<keep-alive>
	<home v-if="isshow"></home>
</keep-alive>

this.$nextTick

vue中可以把获取dom节点的代码放在mounted里面,但是如果是要在渲染完成后获取dom节点就需要用this.$nextTick


      this.$nextTick(function(){

        //仅在页面渲染完成以后调用
        
      });

全局绑定组件,使用Axios和fetchjsonp请求真实api接口数据

axios不支持jsonp,

fetchjsonp支持

cnpm install axios --save

可以全局绑定组件,不用每个地方都引入

通过 this.Axios即可访问

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import Axios from "axios";

// createApp(App).mount('#app')
var app=createApp(App);

app.config.globalProperties.Axios=Axios;

app.moun t('#app')