1.Vue安装脚手架步骤

1.1：全局安装@vue/cli模块包

yarn global add @vue/cli

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c 打断

停止重新来
换一个网继续重来

1.2:查看vue命令版本

vue-V

总结: 如果出现版本号就安装成功, 否则失败

1.3:创建项目步骤

（1）创建项目

==注意: 项目名不能带大写字母, 中文和特殊符号==

# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo

(2) 终端切换脚手架项目下, 启动内置的

==webpack热更新开发服务器==

cd vuecil-demo

yarn serve
# 或 npm run serve

(3)主要文件及含义

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – webpack打包的入口文件
src/App.vue       – Vue入口页面
package.json      – 依赖包列表文件和自定义命令

1.4:脚手架自定义配置

配置文件叫vue.config.js

src并列处, 新建vue.config.js

自动打开浏览器

/* 覆盖webpack的配置 */
module.exports = {
  lintOnSave: false,
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

2:Vue语法及指令

2.1.插值表达式 ----- 语法: {{ 表达式 }}

2.2.v-bind动态属性----语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

2.3.v-on事件绑定-----v-on语法:事件名="methods中的函数"

v-on语法语法：事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

2.4.v-on事件对象----无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

2.5.v-on修饰符----语法：@事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡
.prevent - 阻止默认行为

2.6.v-on按键修饰符----语法:

@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键

2.7.v-model双向绑定-----语法: v-model="vue数据变量

"双向数据绑定

数据变化 -> 视图自动同步

视图变化 -> 数据自动同步

2.8.v-model修饰符----语法:

v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时

2.9.v-show和v-if-----语法:

v-show="vue变量"
v-if="vue变量"
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
高级
- v-else使用

2.10.v-for-----语法

v-for="(值变量, 索引变量) in 目标结构

"v-for="值变量 in 目标结构"

目标结构:

可以遍历数组 / 对象 / 数字 / 字符串

注意:

v-for的临时变量名不能用到v-for范围外

同级标签的key值不能重复

2.11.v-for更新监测

口诀:

数组变更方法, 就会导致v-for更新, 页面更新

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

这些方法不会触发v-for更新

slice()
filter()
concat()

注意: Vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新

2.12:动态class

语法:

:class="{类名: 布尔值}" true使用, false不用

使用场景: Vue变量控制标签是否应该有类名

2.13:动态style

语法

:style="{css属性: 值}"

3:Vue计算属性-computed

3.1.语法：

 computed: {
      "计算属性名" () {
          return "值"
      }
  }

注意:

    1:计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

    2: 函数内变量变化, 会自动重新计算结果返回

3.2.计算属性的完整写法

语法：

computed: {
    "属性名": {
        set(值){  
    },
    	get() {
        return "值"
    }
}
}

4:Vue侦听器-watch

4.1.用处：可以侦听data/computed属性值改变

4.2.语法：

watch: {
	"被侦听的属性名" (newVal, oldVal){
	 //newVal: 当前最新值
    // oldVal: 上一刻值
			}
	}

4.3.深度侦听-侦听复杂类型

语法

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {

    	}
	}

}

5.Vue组件

5.1.组件的概念：

组件是可复用的Vue实例,封装标签，样式和JS代码

5.2.组建的好处：

各自独立，互不影响

5.3.组件的基础使用

口诀: 哪部分标签复用, 就把哪部分封装到组件内

==(重要): 组件内template只能有一个根标签==

==(重要): 组件内data必须是一个函数, 独立作用域==

5.4.语法：

5.5:全局注册

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)

5.6:局部注册

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

5.7:创建和使用组建的步骤

创建.vue文件–标签–样式–JS进去

导入组件(import xxx from 'path/to/components/xxx.vue')

注册组件(全局/ 局部)

使用组件(组件名用作标签)

6:Vue-钩子函数

6.1.概念：

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

6.2.作用：

特定的时间点，执行特定的操作

6.3.运用场景：

组件创建完毕后，可以在==created== 生命周期函数中发起Ajax 请求，从而初始化 data 数据

6.4.分类--4大阶段8个方法：

初始化
挂载
更新
销毁

阶段	方法名	方法名
初始化	beforeCreate	==created==
挂载	beforeMount	==mounted==
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

8:Vue中使用axios

8.1.ajax定义：

一种前端==异步==请求后端的技术

8.2.Ajax的原理：

浏览器window接口的XMLHttpRequest

8.3.axios定义：

基于原生ajax+Promise技术封装通用于前后端的请求库

8.4.axios的基本用法：

axios({
  method: '请求方式', // get post(get时可以默认省略)
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

8.5.axios的全局配置：

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
    axios({
        url: "/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
    }).then((res) => {
        console.log(res);
    });
    // axios()-原地得到Promise对象
},

9:组件-插槽

9.1.插槽的使用：

1.先在组件内用slot占位

2.使用组件时, 传入具体标签插入

9.2.具名插槽

(1)使用场景：当一处组件内有两处以上需要外部传入标签的地方

(2)要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

9.3.v-slot：

==v-slot可以简化成#使用==

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

9.4.作用域插槽

(1)使用场景：子组件里值, 在给插槽赋值时在父组件环境下使用

(2)用法：口诀:

子组件, 在slot上绑定属性和子组件内的值
使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
scope变量名自动绑定slot上所有属性和值

Vue基础入门知识