基本使用步骤

什么是vue

vue 的两个特性

vue 指令

过滤器

侦听器

计算属性

axios的基本使用

安装axios 终端 npm i axios -S

1、发起GET请求

 axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            // URL 中查询参数
            params: {
                id: 1
            }
        }).then(function (result) {
            console.log(result)
        })

vue-cli

npm install -g @vue/cli     // 安装vue-cli包
vue -V                      // 查看是否安装成功
vue create hello-world      // 创建一个项目 hello-world 为文件夹名称

2、vue 项目中 src 目录的构成

assets        // 文件夹: 存放项目中用到的静态资源文件, 例如: css 样式表、图片资源
components    // 文件夹: 程序员封装的、可复用的组件, 都要放到 components 目录下
main.js       // 是项目的入口文件. 整个项目的运行, 先要执行 main.js
App.vue       // 是项目的根组件

vue组件

使用组件的三大步骤

注册全局组件

有package.json 的文件下 直接用 npm i —legacy-peer-deps

删除node_modules文件夹
删除package-lock.json
重新执行npm i —legacy-peer-deps

<script>
// 默认导出, 这是固定写法
export default {
  // data 数据源
  // 注意: vue 组件中的 data 不能像之前一样, 不能指向对象
  // 注意: 组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 {} 中, 可以定义数据
    return {
      username: "zs",
      age: 20,
    };
  },
  // 当前组件中的 点击
  methods: {
    changeName() {
      // 在组件中, this 就表示当前组件的实例对象
      this.username = "哇哈哈";
    },
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {},
};
</script>

// 必填项校验
required:true,

vue 基础.xmind

ref 的DOM和组件

通过ref来调用DOM操作

动态组件

// component 标签是 vue 内置的, 作用:组件的占位符
// is 属性的值, 表示要渲染的组件名字

// 可以把内部的组件进行缓冲, 而不是销毁组件

<keep-alive>     
<component :is="comName"></component>    
</keep-alive>
data(){
return{
// comName 表示要展示的组件的名称
comName:"Left",
};
},

组件声明 name 名称

插槽

v-slot : 的简写 是 #

<slot name="content" msg="hello vue.js"></slot>    // 子页面
<template #content="scope">                        // 根页面
   <div>
     <p>啊,大海,全是水</p>
     <p>啊,大海,全是水</p>
     <p>啊,大海,全是水</p>
     <p>{{ scope.msg }}</p>
   </div>
</template>

只有 name 属性的为 “具名插槽”
在封装组件时, 为预留的 提供的属性对应的值, 这种用法, 叫做“作用域插槽”
在封装组件时, 为预留的 提供的解构赋值, 这种用法, 叫做“插槽的解构赋值”

自定义指令

私有自定义指令

<p v-color>测试</p>