Vue框架笔记
学习Vue知识点
「已注销」
学习好难啊.只想做一条咸鱼!
展开
-
Vue2.X+TypeScript开发模式,使用Component、Model、Prop、Emit、Watch等构造器进行项目开发
在Vue+JavaScript模式中,我们在组件中使用component、watch、model、emit属性时,都是直接使用的.然而在Vue+TypeScript开发模式中.我们需要通过引入相应的构造器,在构造器中进行声明使用数据.// 在Vue+TypeScript开发模式中引入相应的构造器进行界面开发<script lang="ts"> import { Component,Vue,Watch,Prop,Model,Emit} from 'vue=property-decorator原创 2020-12-16 19:12:58 · 1399 阅读 · 0 评论 -
Vuex初步了解
1.什么是Vuex?Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。使用Vuex管理实现的场景:用户的登录状态、用户名称、头像、地理位置、商品收藏、购物车的物品…2.安装使用Vuex npm install vuex --sav原创 2020-11-12 19:36:26 · 170 阅读 · 0 评论 -
Vue事件修饰符笔记
事件修饰符 (1) .stop 阻止事件冒泡(事件从下向上冒泡似的触发) 语法: v-on:事件类型.stop="事件执行函数名" 或 @事件类型.stop="事件发生函数名" (2) .prevent 阻止默认事件 语法: v-on:事件类型.prevent="事件执行函数名" 或 @事件类型.prevent="事件发生函数名" @contextmenu.原创 2020-10-12 11:30:13 · 180 阅读 · 0 评论 -
在Vue项目中使用vue自带的过渡组件transition.
在Vue项目中使用vue自带的过度组件transition.Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡使用需求:条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点在进入/离开的过渡中,会有 6 个 class 切换。在我们使用组件transition时.需要配合css样式进行设置使用.v-enter-from:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter原创 2020-10-10 11:02:38 · 1418 阅读 · 0 评论 -
Vue组件间的通信了解
有时候我们在操作组件实现功能时,存在数据之间的传递,这就是组件间的通信组件间的数据传递1.组件间的通信----父传子父传子的通信是通过父组件传递数据,然后子组件通过自身属性prop来进行接收数据,做相应的处理实现的.方法:通过子组件的props属性进行传递.props属性设置数据内容变量的定义方式有两种方式:方式一: 字符串数组类型,数组中的字符串就是用于接收父组件所传数据的自定义变量名称(这种方式不常用) props:[‘自定义存储变量名1’,‘自定义存储原创 2020-09-21 19:18:17 · 181 阅读 · 0 评论 -
Vue组件插槽使用新增
组件的插槽是为了让我们封装的组件更加具有扩展性.让使用者可以决定组件内部可以展示那些内容.1.普通插槽(匿名插槽) 在默认情况下,我们在使用组件时,若是在组件中嵌套入其他内容,则是无效的,并不会显示出来.若想使得我们在组件中嵌套入的内容能够正常生效显示,这就需要使用组件插槽功能 默认情况下: <组件名> …嵌套的文字/元素/变量/表达式等 </组件名> 以上嵌套在默认情况下只会显示组件功能模板中的内容,嵌套在组件间的内容都不会起作用(不显示)原创 2020-09-21 19:16:53 · 350 阅读 · 0 评论 -
webpack了解笔记
了解知识: 一般项目中存在两个必要文件夹 src文件夹和dist文件夹,src文件夹用于存放开发的代码,dist文件夹用于存放我们打包好后的文件1.什么是webpack? webpack是一个前端模块化打包工具,能够帮助我们处理模块间的各种复杂关系,它在打包的过程中可以对资源进行处理,比如压缩图片,将scss转换为css,将es6语法转化为es5语法,将typescript转化为javascript等.2.webpack和grunt/gulp有什么不同 grunt/...原创 2020-06-05 10:07:39 · 151 阅读 · 0 评论 -
vueCli笔记
1.什么是Cli?什么是VueCli? Cli是Command-Line Interface,即命令行界面,俗称脚手架。 Vue Cli是官方发布Vue.js项目的脚手架,通过它我们可以快速搭建Vue开发环境以及对应的webpack配置.如果想要使用VueCli,就需要安装有NodeJs。因为VueCli依赖于NodeJs.2.VueCli脚手架的安装 安装新版本的VueCli脚手架 npm install -g @vue/cli //安装脚手架3...原创 2020-06-05 10:17:57 · 210 阅读 · 0 评论 -
Vue了解笔记
1.什么是Vue? Vue是一个渐进式框架,这意味着我们可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验. Vue具有很多特点:1.解耦视图和数据;2.可复用的组件;3.前端的路由技术;4.能够进行状态管理;5.虚拟DOM2.使用Vue 1.引入Vue.js文件 2.创建Vue实例对象,将一个具有id/class属性的容器挂载到Vue实例上. const app=new Vue({ el:'#id值(或.class值)',//...原创 2020-06-05 10:15:41 · 243 阅读 · 0 评论 -
Vue组件间的通信——子传父
实现方法:子组件向父组件中传递消息通过自定义事件。即子组件通过在自身的事件执行方法中使用this.$emit('自定义事件名称',需要传递的内容),这个方法,在组件使用时监听自定义事件,从而在父组件中处理自定义事件的带参数的执行方法来进行信息传递。 通信步骤: (1)子组件自身触发事件,在这个事件执行方法中通过调用this.$emit('自定义事...原创 2020-04-17 00:39:38 · 201 阅读 · 0 评论 -
Vue组件间的通信——父传子通信
父子组件间的通信(父传子通过组件属性props,子传父通过自定义事件) 1.父传子通过组件属性props props的值有两种方式: 方式一: 字符串数组,数组中的字符串就是传递时的名称(不常用) props:['数据名称','数据名称'...] ...原创 2019-12-10 19:55:40 · 222 阅读 · 0 评论