攀登Fox的博客

目录1、概念2、指令与事件3、组件与路由4、渲染函数1、概念1）是什么Vue是一套轻量级的前端渐进式框架，"渐进式"可以理解为按需引入，根据业务场景逐步从简单实现到复杂实现。2）实例化new Vue()的过程就叫函数的实例化。Vue构造器要求在实例化时传入一个选项对象，选项对象包含挂载元素（el）、数据（data）、方法（methods）、模板（tamplate）、生命周期钩子函数等选项。3）MVVMMVVM（Model-View-ViewModel）：是一种前端开发架构模式，核心是数据的双

目录1、自定义指令1.1、全局指令1.2、局部指令2、JSX语法3、过滤器3.1、全局过滤器3.2、局部过滤器1、自定义指令1.1、全局指令在main.js中使用directive()函数自定义一个v-focus全局指令（实际开发过程中，我们可以创建一个js文件专门管理自定义全局指令，然后在main.js中引入该文件即可）import Vue from 'vue'import App from './App'//自定义全局指令 v-focusVue.directive('focus',{

目录1、css过渡动画使用2、 Animate动画库使用1、css过渡动画使用在vue中使用css过渡动画，一方面需要transition元素，另一方面还要用到6个过渡类名，它们分别为v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to，enter表示动画从0开始淡入，直到1完全显示，leave表示从1开始淡出，直到变成0完全消失。下面是官网的效果图新建一个MyAnimate.vue组件，并定义一个渐变动画效果，给tr

目录1、访问根实例2、二级目录3、三级目录1、访问根实例项目中的根实例在main.js中，初始代码如下// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'Vue.config.prod

目录1、动态组件1.1、组件切换1.2、keep alive缓存2、异步组件1、动态组件1.1、组件切换分别创建3个组件AComponent.vue、BComponent.vue、CComponent.vue，并且在A中引用B和C代码分别如下：AComponent.vue，这里是通过component 标签中的is属性来控制不同组件内容的显示<template> <div> 动态组件: <button @click="showB">显示B

目录1、自定义事件2、二级目录3、三级目录1、自定义事件自定义事件需要使用到$emit(eventName,params)函数，编写一个组件MyComp.vue，定义sendParamHandler函数发送参数<!-- 使用$emit自定义事件传递参数 --><template> <div> <p>{{ title }}</p> <button @click="sendParamHandler">send&l

目录1、计算属性2、Class与Style绑定3、表单输入绑定4、组件4.1、组件结构4.2、组件复用4.3、组件传参1、计算属性需要用到computed函数<!-- 计算属性 --><template> <div> <p>{{ getMsg }}</p> </div></template><script> export default { name: 'HelloWor

目录1、模板渲染2、条件渲染3、列表渲染4、事件处理1、模板渲染<!-- 模板渲染 --><template> <div> <!-- 1、文本取值：使用双花括号 --> <h1>{{ msg }}</h1> <!-- 2、原始HTML渲染：使用v-html属性 --> <p v-html="role"></p> <!-- 3、v-bi

目录1、安装node2、安装vue-cli3、初始化命令（v2版本）4、创建项目5、启动验证1、安装node去node中文网下载对应版本进行安装，然后在dos窗口中分别使用node -v和npm -v命令查看版本，如果正常输出版本则说明安装成功。这里我们先执行命令npm install -g cnpm --regisrty=https://registry.npm.taobao.org指定淘宝镜像，后续使用cnpm安装其它依赖时效率更高。2、安装vue-cli执行命令cnpm install