![](https://img-blog.csdnimg.cn/20201012212440779.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue笔记
vue笔记
何二狗的代码人生
嘿,你好模具
展开
-
14.项目构建
一、 准备工作###1. 初始化项目vue init webpack itanycd itanycnpm installcnpm install less less-loader -Dcnpm install vuex axios -Snpm run dev2. 项目资源|-reset.css|-data.json3. 创建目录结构首先清除项目中的部分内容创建如下目录结构: |-data.json |-static |-css原创 2020-10-12 21:57:27 · 87 阅读 · 0 评论 -
13.模块化开发
一、模块化开发1. vue-router模块化cnpm install vue-router -S1.1 编辑main.js1.2 编辑App.vue1.3 编辑router.config.js2. axios模块化cnpm install axios -S使用axios的两种方式: 方式1:在每个组件中引入axios 方式2:在main.js中全局引入axios并添加到Vue原型中3. 为自定义组件添加事件二、 Elment UI1. 简介Element UI原创 2020-10-12 21:56:23 · 122 阅读 · 0 评论 -
12. vue-cli脚手架
六、 vue-cli脚手架1. 简介vue-cli是一个vue脚手架,可以快速构造项目结构vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple2. 示例,步骤:2.1 安装vue-cli,配置vue命令环境cnpm install vue-cli原创 2020-10-12 21:55:17 · 84 阅读 · 0 评论 -
11.单文件组件
五、 单文件组件1. .vue文件.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js.vue文件由三部分组成:<template>、<style>、<script> <template> html </template> <style> css </sty原创 2020-10-04 16:13:45 · 862 阅读 · 0 评论 -
10. vue-router路由
四、 vue-router路由1. 简介使用Vue.js开发SPA(Single Page Application)单页面应用根据不同url地址,显示不同的内容,但显示在同一个页面中,称为单页面应用参考bower info vue-routercnpm install vue-router -S2. 基本用法a.布局b.配置路由<script> //1.定义组件 var Home={ template:'<h3>我是主页</h3>'原创 2020-09-29 16:01:53 · 135 阅读 · 0 评论 -
9.组件component
一、 组件component1. 什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象)2. 定义组件的方式全局组件方式1:先创建组件构造器,然后由组件构造器创建组件var MyComponent=Vue.extend({ template:'<h3>Hello World</h3>' }); //2.使用Vue.component(标签名,组件构造器),根据组件原创 2020-09-27 18:12:02 · 455 阅读 · 0 评论 -
8.过渡(动画)
六、过渡(动画)1. 简介Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果本质上还是使用CSS3动画:transition、animation2. 基本用法使用transition组件,将要执行动画的元素包含在该组件内 <transition> 运动的元素 </transition> 过滤的CSS类名:6个3. 钩子函数8个4. 结合第三方动画库animate…css一起使用<tran原创 2020-09-27 10:57:11 · 99 阅读 · 0 评论 -
7.vue实例的属性和方法
vue实例的属性和方法1. 属性vm.$el类型:Element只读详细:Vue 实例使用的根 DOM 元素。vm.$data类型:Object详细:Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问vm.$options类型:Object只读详细:用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处:new Vue({ customOption: 'foo', created: f原创 2020-09-22 17:29:42 · 804 阅读 · 0 评论 -
6.vue生命周期
二、Vue生命周期vue实例从创建到销毁的过程,称为生命周期,共有八个阶段 vue的生命周期就是每个vue实例被创建之前一直到结束经历的一系列的初始化过程。下面是官网关于vue生命周期的图解,可以看出在vue整个生命周期中会有很多钩子函数(图中标红的部分),虽然我们用到的就那么几个,但我们都来了解一下。首先先明白一个概念:Vue的实例。它是Vue框架的入口,可以理解为前端的ViewModel,它包含它包含了页面中的业务逻辑处理、数据模型等,它也有自己的一系列的生命周期的函数钩子,辅助我们进行对整个V原创 2020-09-21 23:34:14 · 146 阅读 · 0 评论 -
5.过滤器
过滤器1. 简介用来过滤模型数据,在显示之前进行数据处理和筛选语法:{{ data | filter1(参数) | filter2(参数)}}2. 关于内置过滤器vue1.0中内置许多过滤器,如: currency、uppercase、lowercase limitBy orderBy filterByvue2.0中已经删除了所有内置过滤器,全部被废除如何解决: a.使用第三方工具库,如lodash、date-fns日期格式化、accounting.j原创 2020-09-20 23:29:02 · 127 阅读 · 0 评论 -
4.事件和属性
事件和属性1. 事件1.1 事件简写v-on:click="" 简写方式 @click=""1.2 事件对象$event包含事件相关信息,如事件源、事件类型、偏移量target、type、offsetx1.3 事件冒泡阻止事件冒泡: a)原生js方式,依赖于事件对象 b)vue方式,不依赖于事件对象 @click.stop1.4 事件默认行为阻止默认行为: a)原生js方式,依赖于事件对象1.5 键盘事件回车:@keydown.原创 2020-09-19 23:35:27 · 199 阅读 · 0 评论 -
3.指令
1. 什么是指令?用来扩展html标签的功能angular中常用的指令: ng-model ng-repeat ng-click ng-show/ng-hide ng-if2. vue中常用的指令v-text预期:string详细:更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。示例:<span v-text="msg"></span><原创 2020-09-18 09:18:56 · 290 阅读 · 0 评论 -
2.模板语法
模板语法模板的理解:动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性)双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行简洁写法::xxx=‘yyy’指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:click=‘xxx’简洁写法:@c原创 2020-09-16 23:34:04 · 217 阅读 · 0 评论 -
1.vue基础介绍
VUE是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。它不仅易于上手,还便于与第三方库或即有项目进行整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。简单的说,Vue是一个用来开发Web界面的前端库,也是原创 2020-09-12 12:59:02 · 159 阅读 · 0 评论