Vue.js 3.0

第一章 课程导学 1-1 课程导学

课程适用人群

有vue2.x基础的同学
想要学习Vue3.0 的同学

课程收获

vue3.0环境搭建
vue3.0核心知识
todolist实战案例

第二章 todolist之项目准备 2-1todolist案例介绍 组件的定义和使用方法的定义和使用路由的定义和使用状态管理的定义和使用路由传参vuex *** 作数据父子组件传参 2.2 开始一个vue项目

vue3.0环境搭建

官网安装node （检测 ：cmd里 node -v npm -v）安装淘宝镜像 npm install -g cnpm – registry=https://registry,npm.taobao.org(检测：cnpm -v)安装vue环境 cnpm i -g vue @vue/cli（检测： vue -V 一定要4.5以上的版本）

创建项目
cd Desktop
vue create todolist3

default里选择Manually select features
光标上下，按空格勾选，按回车下一步



之后cd todolist3----cnpm install
报错
Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-url’
解决：cnpm install postcss-url --save-dev
之后：cnpm run serve得到下图

然后用vscode打开项目（code .）

assets 存放静态资源
components 存放一般组件的
router 配置路由的
store 配置状态管理的
views 存放路由组件
App.vue 根组件
main.js 入口js组件（一般用来引用第三方的库和插件）

2-3 文件和目录结构
node_modules 存放所有的依赖的，项目会依赖很多第三方的库和插件
public 存放图表和index.html
.browserslistrc 管理浏览器版本
babel.config.js 配置babel的，用来转义js语法的
package-lock.json 所有包的具体信息
package.json 包管理文件
README.md 项目介绍

3-1 定义组件

HomeVue.vue

<template>
<!-- 编写html内容 -->
1

</template>

<script>
// 编写js内容的
import {defineComponent} from 'vue'
export default defineComponent({
  name: 'Home',//组件名称
  //接收父组件的数据
  props: {

  },
  //定义子组件
  components: {

  },
  setup(props,ctx) {
    return {
      
    }
  }
})

</script>

<style scoped lang='scss'>

</style>

3-2 实现todolist需要的4个组件
父组件 Home.vue
三个子组件：navHeader、navMain、navFooter

HomeVue.vue

<template>
<!-- 编写html内容 -->
<div>
  <nav-header></nav-header>
  <nav-main></nav-main>
  <nav-footer></nav-footer> 
</div>

</template>

<script>
// 编写js内容的
 import NavHeader from '@/components/navHeader/NavHeader'
 import NavMain from '@/components/navMain/NavMain'
 import NavFooter from '@/components/navFooter/NavFooter'

import { defineComponent,ref } from 'vue'

export default defineComponent({
  name:'Home',
  components:{
     NavHeader,
     NavMain,
     NavFooter
  },
  setup(props,ctx){
    
  }
})

</script>

<style scoped lang='scss'>

</style>

3-3 介绍ref定义单个数据
每定义一个数据要用return返回，并在template用插值表达式将数据渲染到页面
HomeVue.vue

<template>
<!-- 编写html内容 -->
<div>{{num}}</div>
<div>{{name}}</div>
<div>{{arr}}</div>

</template>

<script>
// 编写js内容的
import { defineComponent,ref } from 'vue'

export default defineComponent({
  name:'Home',
  components:{

  },
  setup(props,ctx){
    let num=ref(10)
    let name=ref('jack')
    let arr=ref(['a','b','c','d'])
    return {
      num,
      name,
      arr
    }

  }
})

</script>

<style scoped lang='scss'>

</style>

3-4 介绍reactive定义对象类型的数据
reactive

<template>
<!-- 编写html内容 -->

<div>{{data.name}}</div>
<div>{{data.arr}}</div>
<div>{{data.obj}}</div>


</template>

<script>

import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
  name:'Home',
  components:{
    
  },
  setup(props,ctx){
  
    let data=reactive({
      num:10,
      name:'jack',
      age:20,
      obj:{
        price:20
      },
      arr:['a','b','c','d']

    })

    return {
      data
    }
  }
})

</script>

<style scoped lang='scss'>

</style>

toRefs

<template>
<!-- 编写html内容 -->

<div>{{name}}</div>
<div>{{arr}}</div>
<div>{{obj}}</div>


</template>

<script>
// 编写js内容的

import { defineComponent,ref,reactive,toRefs } from 'vue'

export default defineComponent({
  name:'Home',
  components:{

  setup(props,ctx){


    let data=reactive({
      num:10,
      name:'jack',
      age:20,
      obj:{
        price:20
      },
      arr:['a','b','c','d']

    })

    return {
      // num,
      // name,
      // arr,
      // obj

      ...toRefs(data)

    }

  }
})

</script>

<style scoped lang='scss'>

</style>

3-5 实现todolist每个组件需要的数据

3-6 介绍方法的定义和使用
3-7 实现todolist每个组件需要的方法
3-8 介绍定义状态管理
3-9 实现todolist之使用状态管理的api
3-10 介绍计算属性
3-11 实现通过计算属性获取vuex中定义的todolist

第四章 todolist之逻辑实现