vue 3.0知识 / ES6 /组件作用

*## vue3.0

vue官网

创建脚手架 ==流程

1.vue -v  //检查是否安装
2.npm i -g @vue/cli  或者 npm install -g @vue/cli  //(若无安装老母鸡，也就是脚手架)
3.vue --version //检查安装版本
4.node -v  //检查node 需要依赖node启动
5.vue create 文件夹  //创建文件夹   跳出一个直接回车  
6.选择 Y
7.选择最后一个 //出现选择版本时候
8.选择 ：babel rouel  vuex  //使用空格键选择
9.选择 Y
10.选择 in package.json
11.选择Y
12.进入创建的文件夹 =运行 npm run server
13.卸载老母鸡命令： npm uni -g @vue/cli  或者 npm uninstall -g @vue/cli  

** 前端代码规范《点击》**
vue 中 const / var / let

const   声明后不可改变，相当于 Java final(最终)
var    可以先使用在声明，但值会根据执行流程发生覆盖。发生变量提升可以先使用在使用，全局有效。
let 与var 类似，必须先声明才可以使用，并且不能使用同一个引用，否则会报错。命令只在代码块中有效。1.只能存在一个变量，变量名不能相同。

vue 如何 传参
1.jquery传参

jquery :
传参可以使用name或path来引入路由
接受参数格式： this.$route.query.name

//路由
routes:[
{
   path:'/login',component: login},
{
   name:'register',path:'/register',component: register}
]

//使用
<router-link to="/login?id=10&name=ls">登录</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lii'}}">注册</router-link>  //这种使用path
或者
<router-link :to="{name:'register',query:{id:5,name:'lii'}}">注册</router-link>  //这种使用name

也可以：
this.$router.push('/login?id=10&name=ls')
this.$router.push(path:'/register',query:{
   id:5,name:'lili'})
或者
this.$router.push(name:'register',query:{
   id:5,name:'lili'})

2.params 传参
params:
传参只能使用name来引入路由，path会undefined
接受参数格式： this.$route.params.name

//路由
routes:[
{
   path:'/login/:id/:name',component: login},
{
   name:'register',path:'/register/:id/:name',component: register}
]

//使用
<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
或者
this.$router.push('/login/12/ls')
this.$router.push({
   name:'register',params:{
   id:10,name:'lili'}})

name/porps/data/methods/watch/compents各自代表什么

//eg :应放在什么位置
//使用组件化的项目，和实例的有写差异
<script>
import {
    selectScreen } from '@/api/modules/netUnit'
import tableSearchPagination from '@/mixins/tableSearchPagination'
export default {
   
  //name组件的作用 :  1.组件中的name和vue-router中的name含义不同
  // 作用：1.项目使用keep-alive 时，可以搭配组件name实现缓存过滤 <kepp-alive  exclude="home">
  //作用 ：2.在dom做递归组件时，name可以变为标签属性提柜迭代时需要调用自身name <home-list></home-list>
  name: 'home',  //允许组件模板递归的调用自身
  // props 存放在在后段传过来的属性
  props: {
    //用于传入属性的字段   类型：array<String>
    uuid: {
   
      type: String, //定义类型 还可以为：number ,BooLean ,Array,Object,Date,Function,Synbol
      default: null  //默认值
    },
    areYouOk: {
   
      type: Boolean,
      default: true
    }
  },
  data() {
   
    //用于存放使用的属性
    //为什么使用return ？  答：若不适用return包裹的数据会在项目的全局可见，会造成变量污染；若使用return 包裹后数据中的变量只在当前组件中生效，不会影响其他组件。
    return {
   
      loading: false,
      dialogVisible: