HTML#4(Vue3)

继续Vue3

导入和导出

导出 export方法

第一种方法：export var a = 10;   这就是直接导出一个a(当然也可以导出function)

第二种方法：export default{  "kkk": 20 }  里面可以放json文件  这种形式只能放一个

导入方法

require方法导入：var t = require("./name.js")  从js文件中导入export里面的内容(也可以不加.js默认就是js文件，当然也可以导入.vue文件)

使用 t.a 就可以使用js文件里面export的a了

当使用default方法时，可以用a.default.kkk方法

import方法导入：import {a,b} from path  这样等同于require的第一种方法，其中a as abc可以用abc这个名字代替a

导入default的时候可以随意定义名字  import name from path

如果import的是一个vue文件，就需要在export default里面"components":{这个vue文件起的名字}来实例化

let声明(在script里)

var a = 10;代表a为局部变量值为10，如果不加var就是全局变量

let a = 10;let不可重复声明 再来一个 let a = 20;会报错

console.log(a);
var a = 10;  这种方法会自动变量提升，相当于在console上面有一个var a;


console.log(a);
let a = 10;  这种就不会，会报错

块级作用域

{
let a = 10;
}
console.log(a);  会报错
这种情况a只会在括号里面使用，而var并不是

const声明（常量）

const a = 20; 这是一个常量，不可修改

const也支持块级作用于，与let类似

如果const json {  }  json里面的内容可以随便改，只要不对json本身动手脚，里面的属性是可以修改的，如果const arr = [1,2,3]  数组内容也可以改   包括const一个类，类里面的属性也可以改，但是不能改类本身

for里面不可以用const，只可以用let

箭头函数 =>

函数名称=参数名称=>返回值

x=x=>x;等同于
function x(x){
    return x;
}

箭头函数不能包含多个参数，但是可以把多个参数变成一个整体

例如 func = (x,y,z) => x+y+z，没有参数就用()代替 x=()=>x

F = (x,y,z) =>{
    alert(x+y+z);
    return x;
}
这样也是合理的

function method1(){
    console.log(11)
};
等同于
method1(()=>{console.log(11)});

#箭头函数没有变量提升

function leo(){
    console.log(arguments[0])  这里指输出传入值的下标为0的数，也就是1
};
leo(1,2,3,4)

但是箭头函数不支持arguments

Setup的使用(script里面)

setup类似于data()和methods的结合体

里面可以生成任何值并且输出

data，methods里面和setup里面的数据名字不能相同

setup里面的函数不能操作data里面的内容，因为this指向的不是data

同样，methods里面的函数能控制setup里面的变量，但是页面并不会渲染一遍，也就是setup里面的数据无论用什么函数都不会重新渲染，除非有别的方式让页面重新渲染一遍

export default{
setup(){
    var a = 10;
    var add = function(){  //里面也可以写函数，这样给button @click = "add"就可以触发
        alert(1);
    }
    console.log(this.a);   这里面的this指的是setup这个作用域
    return{a}
    }
}

 这里面this.unm++确实会给num加值，但是并不会重新渲染一遍，如果有一个button

<button @click="add2">{{num}}</button>  这样num显示的一直是0，但是实际上已经变了，如果methods里面再有一个操作data()里面数据的函数，就可以渲染了

import {ref} form 'vue';引入ref组件，然后再在setup里面  var a = ref(20);这样操作a就可以像普通变量一样实时渲染了，官方推荐用法是a.value = 30这种方式修改它的值

setup-props的使用

props:{
    "title":String
    "bomo":String
}
在export default里面写这个代表接受这两个属性，标记为字符串
这两个属性为自定义属性，可以在别的vue文件里面<button :title="title">这种方式添加自定义属性
这样接收的"title"的值就是title这个字符串

setup(props){
    console.log(props)
    console.log(props.title)
}

import {watchEffect} from 'vue'  可以引用组件，这个组件监听会有初始化和全局化，可以用watch监听更加精准，后面会细说

watchEffect(()=>{
    console.log(props.title) 里面只用写要监听的东西就行
});

watch(()=>{
    return props.title
},(newValue)=>{
    console.log(props.title);
})

watch里面要接受两个函数，第一个要return要监听的值，第二个是操作