一、Vue框架基础语法

1. el挂载点
2. data数据对象
3. 标签
   • V-text 纯文本
   • V-html 解析html
   • V-on（可替换为@） 为元素绑定事件，可以增加事件修饰符
   • V-show ：切换元素的显示形态
   • V-if：操作dom，切换元素的显示很隐藏
   • V-bind（可替换为：）：设置元素的属性
   • V-if：判定条件
   • V-model：获取和设置表单元素的值，双向绑定

vue文件构成

1. 一般由html，css，js组成，一个.vue文件即为一个组件。
2. 虚拟dom，内存中的一个数据
3. 配置对象，配置对象的key是不能随便改的
4. data，写法（对象式，函数式）
   • 当为组件时，必须要使用函数式，不然容器报错。
   • 箭头函数this为windows，不要写箭头函数
5. MVVM模型
   • M：模型（model）：对应data的数据
   • V：视图（view）：视图，也就是能直接用眼睛看见的网页页面
   • VM：视图模型（viewmodel）：vue实例对象。
   • ViewModel-（监听）——>Model（数据）
   • ViewModel-（数据绑定）——>View（视图）

二、脚手架执行流程

1. 执行npm run serve
2. 找到main.js
   • 引入vue，引入App.vue（它是所有容器的父组件）

三、vue组件

1. data函数式写法 data（）{ return{ msg: } }
2. props属性传递参数
3. mixins属性 引用js配置
   • 全局写到main.js中
4. scoped 使样式范围为本组件
   • lang=“less” 样式语言使用less
5. mounted（） 生命周期 方法

四、css样式写法

1. 内部样式写法

   div{color:red; /*内部样式写法*/
   }
   

2. 外部样式写法

   <link rel="stylesheet" href="css文件路径"> <!--外部样式写法-->
   

3. 通用选择器
   • *{…}
   • 修饰页面所有元素;效率低,尽量少用

   *{
   color: red;
   }
   

4. 元素选择器
   • 元素名称{…}
   • 定义元素名称所对应的一类元素.

   	div{color: red;}
   

5. 类选择器
   • .类名{…}
   • 类名定义不能保函数字和特殊字符.

   .any{
   color: red;
   }
   

6. id选择器
   • #id值{…}
7. 群组选择器
   • 作用:定义一组选择器的公共样式
   • 多个选择器之间用逗号分隔.
8. 后代选择器
   • 选择器1 选择器2 选择器3{…}
9. 伪类选择器
   • 同一个标签，根据用户的某种状态不同，有不同的样式；这就叫做“伪类”
   • 伪类用 “:” 英文冒号来表示
   • :hover (徘徊)鼠标放到链接上时的样式

其他

• 组件的定义：实现应用中局部功能代码和资源的集合

• main.js为vue脚手架程序的入口程序

• href=<”%=BASE_URL %”>favicon.ico，这个路径表示使用了public文件夹下的favicon.ico

• nojs标签，如果浏览器如果不支持，js，则显示里面的东西

• vue文件空格与tab键不能混用

• 写个vue.config.js修改vue隐藏配置文件中的属性

• 子传父用props，父传子用$emit

• this
  a) 在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）

• this找属性或者方法，在当前没找到，将顺着原型寻找

• 箭头函数：多用于匿名函数的定义
  a) const multiply = num => num * num;
  b) 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
  c) 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

• VueComponent.prototype.proto==Vue.prototype
  a) 让组件实例对象可以访问到Vue原型上的属性、方法

实例以及解释，随便写写

• var list = document.getElementById(‘list’);
• mixins:[hunhe] 引用hunhe.js配置文件
• npm view webpack versions 查看webpack版本
• npm i less-loader@7 安装less-loader7版本
• npm uninstall less-loader 卸载
• npm install less@3.12.2 less-loader@4.1.0 --save-dev
• beforeCreate() 生命周期函数，创建之前
• Vue.prototype.$bus = this 安装全局事件总线
• this.$bus.$emit 提交数据
• this.$bus.$on 收数据
• this.$bus.$off 解绑数据
• ajax获取数据，放入方法参数response中

  axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})