脚手架文件

一.脚手架文件结构：

├── node_modules

├── public │

├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

二.关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

（1）vue.js是完整版的Vue，包含核心功能+模板解析器

（2）vue.runtime.xxx.js是运行版本的Vue，只包含：核心功能，没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

三.ref属性

1.被用来给元素或子组件注册引用信息（id的替代品）

2.应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）

3.使用方法：

打标识：<h1 ref=''xxx''>......<h1>或<School ref=''xxx''></School>

获取：this.$refs.xxx

四.配置项props

功能：让组件接收外部传来的数据

（1.）传递数据：

<Demo name =''xxx''>

(2.)接收数据

2. 读取方式一: 只指定名称 props: ['name', 'age', 'setName']

读取方式二: 指定名称和类型 props: { name: String, age: Number, setNmae: Function }

读取方式三: 指定名称/类型/必要性/默认值 props: { name: {type: String, required: true, default:xxx}, }

备注：props是只读的，Vue底层会检测到你对props的修改，如果进行了修改就会发出警告。

若业务要求确实需要修改，那么请复制props的内容到data中一份，然后去data中修改数据。

五：mixin混入

功能：可以把多个组件公用的配置提取成一个混入对象

使用方法：

第一步定义混入：例如：

export const mixin=

{

methods:{

showName(){

alert(this.name)

}

},

mounted(){

console.log('你好啊！')

},

}

export const mixin2={

data(){

return{

x:1,

y:2

}

}

}

第二步使用混入，例如：

（1.）全局混入：Vue.mixin{xxx}

（2.）局部混入：mixin:{'xxx'}

六.插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

七.scoped样式

scoped原理:给子组件盒子添加一个自定义属性data-v-xxxx,然后通过属性选择器来增加css权重

作用：让样式在局部生效，防止冲突

写法：<style scoped>

还有一个顺嘴一说的<style lang="less">

八.todos案例

|总结TodoList案例

1.组件化编码流程:

(1,拆分静态组件:组件要按照功能点拆分，命名不要与htm1元素冲突。

(2)实现动态组件:考虑好数据的存放位置，数据是一个组件在用， 还是一

些组件在用:

1).-一个组件在用:放在组件自身即可。

2). -些组件在用:放在他们共同的父组件上(状态提升) .

()实现交互:从绑定事件开始。

2. props适用于:

()父组件==>子组件通信

(2).子组件==>父组件通信(要求父先给子一个函数)

3.使用v-model时要切记: v-model绑定的值不能是props传过来的值， 因为props

是不可以修改的!

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推

荐这样做。

5.nextTick

语法：this.$nextTick(回调函数)

作用：在下一次DOM更新结束后执行其指定的函数

什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

九.脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer:{

  开启代理服务器（方式一）

  proxy:'http://localhost:5000'

}

说明：

1.优点：配置简单，请求资源时直接发送给前端（8080）即可

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么请求会发送给服务端（优先匹配前端资源（8080））

方法二

编写vue.config.js配置具体代理规则：

devServer: { //开启代理服务器 (方式1) 配置多个代理

proxy: {

'/atguigu': { //'/atguigu'是自行设置的请求前缀，匹配所有以'/atguigu'开头的请求路径

target: 'http://localhost:5000',//代理目标的基础路径

pathRewrite:{'^/atguigu':''}, //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）必须写

// ws: true,//用于支持websocket

changeOrigin: true //用于控制请求头中的host值

},

'/demo':{

target:'http://localhost:5001',

pathRewrite:{'^/demo':''},

changeOrigin:true

}

}

}

changeOrigin设置为true时，服务器收到的请求中的host为：localhost：5000（撒谎了，本来是8080的）默认值就是true

changeOrigin设置为false时，服务器收到的请求中的host为：localhost：8080（没撒谎，本来就是8080的）

说明：

1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2.缺点：配置略微繁琐，请求资源时必须加前缀