#Vue
Vue个人整理笔记
海里寻因
这个作者很懒,什么都没留下…
展开
-
7.Element-UI
基于命令行方式手动安装 安装依赖包 npm i element-ui -S 导入Element-UI相关资源 //导入组件库 import ElementUI from 'element-ui'; //导入组件相关样式 import 'element-ui/lib/theme-chalk/index.css' //配置vue插件 Vue.use(ElementUI) 基于图形化界面自动安装 运行vue ui 命令,打开图形化界面 通过vue项目管理器,进入具体的项目配置面板 点击插件-&g原创 2021-11-05 15:27:16 · 56 阅读 · 0 评论 -
6.Vue脚手架
Vue脚手架的基本用法: vue脚手架用于快速生成vue项目基础架构 使用步骤: 安装3x版本的Vue脚手架: npm install -g @vue/cli 基于脚手架创建vue项目 1.基于交互式命令行的方式,创建新版vue项目 vue create my-project 2.基于图形化界面的方式,创建新版vue项目 vue ui 3.基于2.x的旧模块,创建旧版vue项目 npm install -g @vue/cli-init vue init webpack my-project原创 2021-11-05 15:26:45 · 91 阅读 · 0 评论 -
5.单文件组件
传统组件的问题和解决方案 问题: 全局定义的组件必须保证组件的名称不重复 字符串模板缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的\ 不支持css意味着当HTML和JS组件化的时候,css明显被遗漏 没有构建步骤限制,只能使用HTML和ES5 javaScript,而不能使用预处理器(如:babel) 单文件组件的组成结构 /* template组件的模板区域 script业务逻辑区域 style 样式区域 */ <template> //这里定义vue组件的模板内容原创 2021-11-05 15:26:13 · 227 阅读 · 0 评论 -
4.webpack
webpack概述: 是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等功能,提高了开发效率和项目可维护性 webpack的基本使用: 创建列表隔行变色项目 新建项目空白目录,并运行npm init -y 命令,初始化包管理配置文件pack.json 新建src源代码目录 新建src-> index.html首页 初始化首页基本的结构 运行npm install jquery -s原创 2021-11-05 15:25:40 · 48 阅读 · 0 评论 -
3.Vue模块化
模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块(方便代码的重用,从而提升开发效率,并且方便后期的维护) 服务器端模块化规范 CommonJS: 模块分为单文件模块与包 模块成员导出:module.exports和exports 模块成员导入:require('模块标识符‘) ES6模块化的基本语法: 默认导出与导入: 默认导出语法:export default 默认导出的成员 //当前文件模块m1.js //原创 2021-11-05 15:25:10 · 1948 阅读 · 0 评论 -
2.Vue-router
Vue-router包含功能: 支持HTML5历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 Vue-router的基本使用: 引入库文件:vue-router.js 添加路由链接 /*router-link是vue中提供的标签,默认会被渲染成a标签 to属性默认会被渲染成为href属性 to属性的值会被默认渲染为#开头的hash地址*/ <router-link to="/user">User</router-link> <r原创 2021-11-05 15:24:40 · 85 阅读 · 0 评论 -
1.Vue的基础知识语法
v-cloak指令的用法: 1.提供样式: [v-cloak]{ display:none } 2.在插值表达式所在的标签中添加v-cloak指令(解决闪动问题) 数据绑定指令: v-text:填充纯文本 (相比插值表达式是更加简洁) v-html:填充HTML片段(存在安全问题-XSS攻击) v-pre:显示原始信息,跳过编译过程 v-once :只编译一次(显示内容之后不再具有响应式功能,可以提高性能) v-model:双向数据绑定 <input type='text' v-model='un原创 2021-11-05 15:24:18 · 76 阅读 · 0 评论