Vue 基础篇

nodeJs环境

1. 安装nodejs
2. 检查nodejs 命令提示符中输入 node -v
3. 检查npm npm-v

名词解释

1. nodejs 是基于v8引擎(谷歌浏览器内核) 封装的软件 属于后端语言 用来操作系统的 使用js语法
2. npm 附加在nodejs软件里的一个工具 作用是下载以来文件 可以使用命令来启动nodejs服务
3. npm常用命令
   初始化npm环境 npm init
   下载依赖 npm install packname 【install 缩写 i】
   卸载依赖 npm uninstall packname
4. npm下载地址及设置
   默认下载源地址 npmjs.org
   设置成中国的npm镜像 ‘npm config set registry https://registry.npm.taobao.org’

项目创建

nodejs ==> 安装全局脚手架工具 【只需安装一次】npm i -g @vue/cli  或者 yarn add global @vue/cli 
创建项目 vue ui 或 vue create 项目名称
在项目目录里 使用 npm run serve 或者 yarn serve 启动本地项目开发模式

命令

npm install --global @vue/cli
yarn add global @vue/cli

初始化项目

有个git地址  git clone git地址     克隆后 需要安装依赖包，npm i 或 yarn  然后开始下载 node_moduls
如果vue create 或 vue ui 创建项目不成功 则克隆 然后 安装依赖包

项目中的命令

这姓命令来自于 package.json 文件里
npm run serve 运行本地项目的开发画家
npm run build 执行源代码编译 打包成生产环境中的代码

项目结构

1. packae.json 是命令和依赖包清单
2. src是存放源代码的地方
3. public 是存放公共资源的地方 index.html
4. node_modeuls 是运行项目的依赖所在的目录

src目录

main.js 是入口文件 全局人口
App.vue 是入口组件 被第一个显示在页面上

vue文件组成部分

template	写html	搜友html标签都要放到一个根元素里
script		js脚本	可删	
style		写样式	可删

使用sass语法写css

安装命令 yarn add sass sass-loader -D	npm i sass sass-loader -D

模块化

模块化开发解决的就是耦合度高的问题 让程序把一些可以多次服用的资源进行提取
提取成独立的模块 哪里使用就引入到哪里 从而降低的迭代的成本 加快了开发效率和维护的便利

指令

• v-text
  渲染文本内容，等价插值 ( { { script中定义的数据 } } ) 写法
• v-html
  既可以渲染文本内容又可以渲染字符串类型的 dom 片段
• v-for
  循环渲染，遍历渲染。使用它必须加 key。key 的存在是为了给 diff 算法做优化。
  v-for=“值,下表 in 数据” :key=‘唯一的值’
  值：如果是纯值 名字为value
  值：如果是对象 名字为item
  下标：index
  key：由于 v-for 循环渲染 便利出来的是通过js算法得到的虚拟DOM 那么当需要修改其中某个元素的时候 如果不加key 每次变动 都要重新的循环计算生成 对性能开销大 key就是每一个虚拟dom的身份证，表示元素的唯一标识 这样在修改的时候 通过key可以只对该元素修改
  虚拟DOM：用js计算出来的 不是原生的标签
• v-if
  条件控制渲染，简称条件渲染，根据返回值是 true 或者 false 来控制元素的加载与销毁。由于它会导致元素的销毁，所以会触发元素的生命周期。
• v-show
  条件判断显示控制元素的 css 的 display 样式，元素一直在页面里的。控制显示与隐藏，对比 v-if 它适用于频繁切换的元素上。
• v-model
  数据双向绑定，用于表单元素上，是核心的指令。另外他还是给子组件双向通信的一种方式。
• v-bind
  给元素绑定属性的指令，简写：:，也是父组件向子组件传参的一种方式。
• v-on
  给元素绑定事件的指令，简写：@，可以绑定原生事件，也可以绑定自定义事件。
• v-once
  让元素内的数据，失去双向绑定的特性。使内容永远保持在第一次的值。

事件

绑定事件

使用 v-on: 事件类型 = 回调函数
回调函数里 被注入一个event对象
ev.target	获取触发事件的元素
ev.currentTarget	获取事件绑定的元素

自定义事件

语法: @自定义事件名称=回调函数
用于父子通信中 子组件向父组件传参

​

修饰符

指令修饰符

• v-model：.number将值转成数字,lazy失去焦点后同步数据,.tirm把内容里面所有的空格都清除

事件修饰符

• .once让事件只执行一次
• .stop阻止默认冒泡
• .pervent阻止默认事件
• .native绑定原生事件【在自定义组件上绑定 click】
• .left监听鼠标左击

按键修饰符

• .13或者.enter
• .ctrl

属性修饰符

• .sync让子组件直接使用$emit 修改父组件传递过去的值

生命周期

页面从初始化到完成渲染 经过更新最后销毁的过程

创建阶段 第一次页面加载执行（一次性）

• beforeCreate 创建前
• created 创建后

挂载阶段 第一次页面加载执行（一次性）

• beforeMount 挂载前
• mounted 挂载后
  当组件被展示在html里的时候 用于自动发起请求等操作

更新阶段

无论是自己还是父级组件 当data或props的数据被修改时触发
该阶段函数中 不可以修改data数据

• beforeUpdate 更新前
• updated 更新后

销毁阶段

当父组件使用v-if控制当前组件不显示时 意味着该组件被销毁 

• beforeDestroy 销毁前
  用于清理销毁全局变量或常驻内容的垃圾数据 比如定时器

• destroyed 销毁后

组件通信

• 父传子: props
• 子传父: $emit+v-on
• 父子双向通信: .sync $emit(‘update:prop’,newValue)
• 父子双向通信: v-model 子组件中注入value和input函数
• 跨级通信: $attrs和$listeners
• 全局通信: vuex

ref

语法： 获取this.$refs.RefName
获取元素的 一般用于js动画 轮播图 如果是添加到自定义组件上 那么就是获取自定义组件的实例对象

slot 插槽

模板 传入不同的内容片段
适用于开发静态页面 高复用的模板组件
slot 标签不会产生

匿名插槽

父组件将内容写在自定义组件的内部
自定义组件使用接收
匿名插槽默认叫v-slot:default

具名插槽

区分接收 对应名称
父组件
子组件

作用域传参

• 父组件可直接写入数据
• 子组件传给父组件 slot上写data
• 子:
• 父:

watch 监听器

对数据进行监听 当数据发生改变时 会触发函数 进行业务操作
语法: 单值监听 data(new,old){}
监听对象或数组
data:{
deep:true,
handler(new,old){}
}
监听对象里某一个属性
‘obj.name’(new,old){}
默认执行一次
immediate:true

computed 计算属性

对一个监听数据进行计算 并返回一个新值 该值和data和props一样都是挂载到实例对象上的this

优点：不受数据类型的限制 没有深度监听概念
缺点：开辟了一个新的内存空间 对其进行修改比较繁琐 因为默认它是只读的
特性：有缓存机制 当被监听的数据发送了修改 会用当前的缓存数据对比修改后的数据 如果一致则不触发计算函数

设置值

如果需要强制给计算属性值进行赋值的话 需要写成对象模式
语法:

newData:{
	get(){return this.data},set(value){this.data=value}
}

watch 与 computed 区别

computed

1. 对数据或者属性进行监听操作，但是不能修改，对操作后的进行返回，并得到一个新值。
2. 不受数据类型的影响，只要被监听的数据发生了改变，计算属性都会触发。

watch

1. 只是对数据或属性进行监听，没有返回值。
2. 受数据类型影响，当监听的是数组或对象的时候，要开启深度监听。

keep-alive 缓存组件状态

它是内置组件 用来缓存包裹着的组件的状态的
使用场景:表单填写页面 如果离开需要保持输入内容不丢失 就需要使用该组件进行包裹

include 包含

exclude 不包含

状态存在内存中 如果页面关闭或刷新 就会丢失状态

内置组件

• <component is='动态组件'></component>
• <keep-alive>缓存组件</keep-alive>
• <slot>插槽</slot>
• <template>存放dom的组件</template>

脚手架

• 设置打包后的基础路径：publicPath
• 代理跨域：devServer:{proxy}

动态加载组件 component

内置组件的一种 用于动态加载组件 必须使用is属性去匹配挂载好的组件 进行渲染
等价于自己去写v-if

递归组件

数据来自父组件 递归组件 必须要有name选项 name的值必须是文件名称 自己引用自己

过滤器 filter

在不修改数据源的情况下 对数据进行操作
语法：data | filter | filter2

组件过滤器

在组件内定义的 只限于当前组件使用
api:filters:{} 对象中写函数

全局过滤器

在全局main.js设置 可以在整个项目中使用
api:Vue.filter(‘过滤器名称’,回调函数)

directive 自定义指令

可以在组件上使用v-*的形式去优雅的处理我们要的业务
举例：页面打开时 给input自动获取焦点事件 页面打开时 让元素透明度根据某个值发生变化
特性：专门处理DOM元素的 比ref高级

组件内自定义指令

语法：directives:{focus:{inserted(el){}}}

全局的自定义指令

语法：Vue.directives(focus,{inserted(el){}})

插件的开发和使用

• 开发插件：一个插件必须用 install 属性接收一个函数，该函数接收一个 vue 构造器，然后使用该构造器去开发插件
• 语法:

{
	install:function(Vue){}
}

使用插件的语法:
Vue.use(myPlugin,{配置对象})

全局函数的绑定

在组件的this上使用Vue.prototype.myMethod=function(){}声明
使用Vue构造器 用Vue.myMethod=()=>{}