随笔分类 - 黑马前端笔记 / 黑马-VUE笔记
VUE笔记
摘要：vue3 与vue2的区别 1. template节点 vue2只允许一个根节点 vue3允许多个根节点 2. 创建工具 vue3：使用vite，也可使用vue-cli vue2：使用vue-cli vite创建 3. 调试工具 vue-2：标准版 vue3：bate版本 4. 使用vite的注意点
阅读全文
摘要：Vue3的特性 1. 新的构建工具 vite 1.2 基本使用 vite基本使用： 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称 安装依赖 npm i 或者 yarn 启动项目 npm run dev 或者 yarn dev 1.3
阅读全文
摘要：es6模块化 1. 设置es6的模板规范 package.json中配置 node.js默认支持commonjs规范 修改为es6规范 "type": "module", 2. 解构赋值来按需导入 2.1 按需导出和默认导出同时使用 导出模块 // 按需导出 export let a1=10 exp
阅读全文
摘要：vue（八）头条项目 1. 项目结构 根据vue create my-toutiao创建项目 勾选上router 2. 生成的项目中的view文件夹和compoent文件夹 都是用于存放组件 view中的组件是通过路由来切换的 compoent文件夹中的组件是可以复用的UI结构 3. 将axios封
阅读全文
摘要：Vue（六） 1. 前端路由 hash值与组件之间的对应关系 hash值代表url地址中#号后面的内容， 不同的hash地址对应不同的组件 图解 1.2 简易路由 <template> <div class="app-container"> <h1>App 根组件</h1> <!-- 定义hash值
阅读全文
摘要：vue(五) 1.动态组件 组件的显示与隐藏切换 1.1 <component> 组件 组件的一个占位符 通过设置属性来显示不同的组件 is属性来指定要显示哪个属性 示例 <template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <
阅读全文
摘要：Vue（四） 1. 生命周期 一个组件从（创建->运行->销毁的整个阶段） 生命周期函数：vue框架的内置函数，会随着组件的生命周期，自动按次序执行 注意点 生命周期强调整个时间段 生命周期函数指时间点 1.1 示例：Test组件的生命周期函数 <template> <div> <h3 class=
阅读全文
摘要：Vue（三） （Vue-cli） 1. 单页面应用程序（SPA） 一个web网站只有唯一的html页面 2. vue-cli 简化了webpack创建工程化Vue项目的全过程 不需要自己去配置webpack，只需专心写页面 2.1 安装 全局包 代码 npm i -g @vue/cli 2.2 创建
阅读全文
摘要：vue入门（二） 1. 过滤器 一个函数 在插值表达式中使用，对插值的值进行再处理 {{username | toUpCase}} 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
阅读全文
摘要：vue入门（一） 1. 什么是vue 一个框架（现有的解决方案） 构造用户界面（操作html页面的内容） 2. vue的特性 数据驱动视图 页面所依赖的数据发生变化时，vue会监听数据的变化，重新渲染页面 双向数据绑定 页面所依赖的数据发生变化时，vue会监听数据的变化，重新渲染页面 页面中的表单数
阅读全文
摘要：webpack的使用（配合ppt） 1.webpack 前端工程化的具体解决方案 作用 代码压缩混淆 处理浏览器端的JavaScript兼容性 性能优化 1.1 基于webpack实现隔行变色 npm i jquery -S 中-S（--save的简写）表示保存到dependencise节点中，其中
阅读全文
