Vue.js(五)
vue列表循环非响应式情况
- 数组的length无法响应
- 处理手段： 使用 arr = null arr.splice( 0 )
- 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 处理手段: Vue.set / this.$set
自定义指令
- 内置指令
- v-html
- v-text
- v-on
- v-bind
- v-if
- v-else-if
- v-else
- v-show
- v-for
- v-model
- v-slot 【 2.6.x 】
- 业务:第一次打开页面时，自动获取搜索框的焦点，用一个指令实现
- 定义方式
- 全局定义 Vue.directive( 指令的名称，指令的选项 )
- 局部定义 组件内选项： directives
混入 mixin
- 什么叫做混入？
- 将组件的选项中的一部分分离出去，单独管理
- 方式有两种
- 局部混入 mixins
- 全局混入 Vue.mixin
自定义插件
- 定义的插件应该有一个 install 方法
- 自定义插件必须使用 Vue.use( 插件名称 ) 才能使用插件
- 案例：
- 自定义Loading
- 封装组件库
- vue路由
- vue状态管理 vuex
过渡和动画
- 过渡 【 css3 】 通过css来实现过渡效果
- 动画 【 js 】 通过js 来实现动画效果
- Vue中如何使用以上两个效果呢?
- 自定义css
- 第三方css库 【 Animate.css 】 推荐
- 自定义动画
- 第三方js动画库 【 Velocity.js 】 推荐
vue项目的快速构建工具 cli 【 脚手架 】
- 什么是cli?
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack - cli目前有哪些版本？
cli2 cli3
cli3对电脑的配置有一定要求 - cli如何使用？
- cli的安装
npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】
使用国内镜像加速npm和yarn
npm config set registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
下载cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org
$ yarn add @vue/cli global这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
cli3 @vue/cli
cli2 vue-cli 【 不要安装 】
所以一个电脑只能装一个
问题： 如果我们同时想使用 cli2 和 cli3 怎么办呢？$ yarn add @vue/cli-init global
如果有的人安装3失败了，
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init$ cnpm i @vue/cli -g这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包$ cnpm i @vue/cli-init -g
如果还有问题：
那么你就不要使用cli3了，你可以单独安装cli2 【 先卸载cli3,重启电脑 】
`$ cnpm i vue-cli -g`
- 验证是否安装成功
命令行输入：$ vue看是否有东西输出，如果输出命令提示，证明安装成功 - 创建项目
cli3版本创建 - 命令创建 【 推荐 】
$ vue create project
- 手动选择配置
- 如果安装node-sass出问题，如何解决：
- 先切换成npm源 nrm use npm
- 使用cnpm 安装 cnpm i node-sass sass-loader -D
-
图形界面创建
$ vue ui
cli3两种形式创建的结果是一样的
cli2版本创建 -
标准版
$ vue init webpack project -
简易版
$ vue init webpack-simple project -
please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
-
default 默认配置
-
Manually select features 手动选择配置
配置指的是配置webpack
babel 优雅降级 es6 —> es5
eslint js语法检测
CSS Pre-processors css 预处理语言 less sass/scss stylus
Linter / Formatter eslint / jslint
Unit Testing 单元测试
E2E Testing 端到端的测试
In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）
PWA (web app ) 在浏览器中使用的app
Save this as a preset for future projects? 建议保存
4.分析几个版本的目录**cli3** **目录** - node_modules 项目的依赖包 - cli3webpack配置放在node_modules中 - public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】 - img - js - css - favicon.ico 项目标题的logo - index.html 根实例组件的模板，也是整个项目的容器 - src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ） - assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译） - assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录 - assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64 - base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构 - components 组件存储目录 - xxx.vue文件 单文件组件 一个vue文件就是一个组件 - 组成部分 - template模板（ 必须写的 ） - script脚本 （ 可写可不写） - style样式 （ 可写可不写 ） - scoped 作用是可以减少命名冲突，规定一个样式的作用域 - .gitignore git上传忽略文件配置 - babel.config.js 优雅降级配置文件 用来将es6 --> es5 - package.json 整个项目的依赖配置文件 - README.md 整个项目启动的说明性文件 - yarn.lock 真个项目的依赖性文件的信息 - postcss.config.js 项目css预处理的配置 - .browserslistrc 浏览器版本的支持 **cli2 标准版** build webpack配置 config webpack配置 node_modules src static 静态资源配置 js css img .babelrc 优雅降级配置文件 .postcssrc css预处理配置文件 .editorconfig 编辑器配置文件 **cli2 简易版** src 源代码开发目录 webpack.config.js webpack配置文件 5.学习cli使用 6.cli 它是 webpack + es6模块化来集中实现的 es6模块化 1. 模块的定义 ``` const obj = {} const fn = function(){} ``` 2. 模块的导出 ```javascript // 模块的导出有两种形式 export default //默认导出一个 //export // 批量导出，导出多个 ``` 3. 模块的引入 ```javascript // 如果是export default 导出 import xxx from '../xxx.xx' // 如果是export 导出 improt { xx } from '../xx.xx' || import * as xx from '../xx.xx' ``` 在cli3中创建组件，然后导出组件，然后使用组件 在 vs code编辑器中安装一个插件（ Vetur ）,可以使用vue文件代码高亮还可以有代码提示 【HMR】 热重载 自动刷新 webpack配置 cli3 将webpack配置放在 node_modules,所以Vue并不希望大家去修改这部分webpack配置 如果我们将来需要更改webpack配置，那么我们需要在 项目 根目录 下创建一个 vue.config.js文件
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
