![](https://img-blog.csdnimg.cn/604432fc2eb7407c8cb1e275dab1ea03.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue全家桶
文章平均质量分 90
vue全家桶
Armin444
大三计算机在读
展开
-
Vue全家桶(一)之基础指令
Vue 基础指令(模板语法)✍目录总览:(模板语法概述、基础指令)Vue模板语法1. 如何理解前端渲染?把数据填充到HTML标签中2. 前端渲染的方式前端渲染的方式主要有三种:原生js拼接字符串使用前端模板引擎使用vue特有的模板语法2.1 原生js拼接字符串基本上就是将数据以字符串的方式拼接到HTML标签中,前端代码风格大体上如下图所示。var d = data.weather;var info = document.getElementById('info原创 2022-04-02 13:02:38 · 431 阅读 · 0 评论 -
Vue全家桶(一)之常用特性
Vue常用特性✍目录总览:(表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期)一、表单操作1. 基于Vue的表单操作v-model指令:在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。1.1 Input 单行文本<body><div id="app"> <p>input 元素:</p> <input v-model="message" placeholder="编辑我……原创 2022-04-02 12:20:31 · 604 阅读 · 0 评论 -
Vue全家桶(二)之组件化开发
✍目录总览:(组件化概念、组件注册、数据存放、组件数据共享、组件插槽、使用步骤)一、组件化概念1. 组件化开发思想组件化思想的特点:标准、分治、复用、组合2. 组件定义 **组件化**开发:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。3. Vue中的组件化开发 **vue** 是一个**支持组件化开发的前端框架**。 **vue** 中规定:**组件的后缀名是 .vue**。之前接触到的 App.vue 文件本质上就是一个 vue 的组件,即**原创 2022-04-04 17:35:21 · 241 阅读 · 0 评论 -
Vue组件化开发-单文件组件
单文件组件1、单文件组件1.在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。2.这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:全局定义 (Global definitions) 强制要求每个 component原创 2022-04-04 17:37:51 · 1392 阅读 · 0 评论 -
Vue全家桶(三)之cli3脚手架
✍目录总览:1. Vue 脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/Vue-cli 3 与 2 版本有很大区别:vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化移除原创 2022-04-04 17:28:50 · 552 阅读 · 0 评论 -
Vue全家桶(四)之ES6模块化与webpack打包
✍目录总览:模块化相关规范1. 模块化概述传统开发模式的主要问题① 命名冲突② 文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护2. 浏览器端模块化规范3. 服务器端模块化规范1. CommonJS① 模块分为 单文件模块 与 包② 模块成员导出:module.exports 和 exports③原创 2022-04-07 16:37:28 · 1212 阅读 · 0 评论 -
Vue全家桶(五)之Vue-Router路由 (常见用法)
Vue-router 路由🔥路由地址Vue-router 路由 (概念及基本使用)🔥https://blog.csdn.net/m0_55990909/article/details/123957200Vue-router 路由 (常见用法) 🔥https://blog.csdn.net/m0_55990909/article/details/123981283vue-router 的常见用法一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组原创 2022-04-06 16:52:01 · 711 阅读 · 0 评论 -
Vue全家桶(五)之Vue-Router路由 (概念及基本使用)
Vue-router 路由🔥路由地址Vue-router 路由 (概念及基本使用)🔥https://blog.csdn.net/m0_55990909/article/details/123957200Vue-router 路由 (常见用法) 🔥https://blog.csdn.net/m0_55990909/article/details/123981283路由的基本概念与原理路由是一个比较广义和抽象的概念,路由的本质就是对应关系。在开发中,路由分为: 后端原创 2022-04-06 16:48:47 · 752 阅读 · 0 评论 -
Vue全家桶(六)之VueX状态管理
✍目录总览:一、VueX概念1. VueX的概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。VueX里面所有数据都可以全局使用。2. 状态管理的概念可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。将这个对原创 2022-04-07 15:23:08 · 855 阅读 · 0 评论 -
Vue接口调用(一)fetch用法
✍目录总览:1. fetch概述基本特性fetch是传统ajax的升级版本,是原生js更加简单的数据获取方式,功能更强大,更灵活,可以看作是xhr的升级版。基于Promise实现语法结构fetch(url).thne(fn2) .thne(fn3) ... .then(fn)2. fetch的基本用法第一个.then接收到的是Promise数据集需要被.then处理才可以看到 我们最终想要的数据。//客户端请求<body> <sc原创 2022-04-04 17:40:16 · 8583 阅读 · 0 评论 -
Vue接口调用(二)axios用法
axios用法✍目录总览:1. axios的基本特性axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征:支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据(请求是可以加密,在返回时也可进行解密)2. axios的基本用法//客户端请求axios.get('http://localhost:3000/adata') .then(ret =>{ //data属性原创 2022-04-06 08:11:12 · 2955 阅读 · 1 评论 -
Vue接口调用(三)async/await用法
async/await用法1. async/await的基本用法async/await是ES7引入的新语法,可以更加方便的进行异步操作async关键词用于函数上(async函数的返回值是Promise实例对象)await关键子用于async函数当中(await可以得到异步的结果)async function queryData(id) { const ret = await axios.get('/data'); return ret;}queryData.then(ret=>{原创 2022-04-06 08:12:24 · 16127 阅读 · 0 评论 -
Element-UI 的基本使用(基于 Vue 的 组件库)
✍目录总览:1. 基于命令行方式手动安装① 安装依赖包 npm i element-ui –S② 导入 Element-UI 相关资源// 在main.js文件内导入组件库import ElementUI from 'element-ui';// 导入组件相关样式import 'element-ui/lib/theme-chalk/index.css';// 配置 Vue 插件Vue.use(ElementUI);2. 基于图形化界面自动安装① 运行 vue ui 命令,打开图形原创 2022-04-04 17:31:52 · 210 阅读 · 0 评论