随笔分类 - Vue
摘要:一、TabBar导航切换 效果图: 1、布局拆分 红色部分为最外层组件,蓝色部分为里面的item 在src/components目录下新建tabbar文件夹,并在里面创建两个文件,TabBar.vue对应红色部分,TabBarItem.vue对应蓝色部分 TabBar.vue 1 <template
阅读全文
摘要:一、目录划分 src目录下文件划分: assets:资源文件 css img components:组件 common:公共组件(其它项目也可用) content:本项目和业务相关的公共组件 common:公共js文件 const.js:公共的常量 utils.js:公共的方法 mixin.js:公
阅读全文
摘要:一、axios 1、基本使用 文档 axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和node.js中。 axios是vue作者推荐使用的网络请求库,它具有以下特性: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promis
阅读全文
摘要:一、概念 Vuex官网 Vuex是一个专为Vue.js应用程序开发的状态管理模式 通俗讲就是把多个组件共享的变量全部存储在一个对象里面 二、使用方式 vuex不是vue内置的,但是是官方的 使用步骤 安装vuex 创建store对象管理数据 挂载store对象到vue实例 安装vuex npm i
阅读全文
摘要:一、路由的概念 路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。 路由分为前端路由和后端路由: 前端路由 根据不同的事件来显示页面的内容,是事件与事件处理函数之间的对应关系 本质:事件与事件处理函数之间的对应关系 后端路由 由服务器端进行实现并实现资源映射分发 本质:URL请求
阅读全文
摘要:一、安装 Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。 Node.js 官网 Vue Cli 官网 安装 npm i -g @vue/cli 注:如果需要指定版本,可以使用npm i -g @vue/cli@版本号进行安装 安装成功后,检查 vue -
阅读全文
摘要:一、挂载 初始化相关属性 beforeCreate 注意:在此时不能获取data中的数据,也就是说this.msg得到的是undefined created beforeMount mounted 默认情况下,此函数在组件的生命周期中只会触发一次 二、更新 元素或组件的变更操作 beforeUpda
阅读全文
摘要:一、组件的定义 组件(Component)是Vue.js最强大的功能之一,组件是一个自定义元素或一个模块,包括所需的模板(HTML)、样式(CSS)、逻辑(JavaScript) 组件分为全局组件(component)、局部组件(components) 二、组件的注册及使用 注意: 构造Vue实例时
阅读全文
摘要:vue常用特性 一、computed 计算属性:计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是当多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函
阅读全文
摘要:vue常用指令 官网详细api 一、v-cloak 作用:解决浏览器在加载页面时因存在时间差而存在的闪动问题,隐藏未编译的nustache标签直到实例准备完毕 1 <div id="app"> 2 <div>{{message}}</div> 3 <div v-cloak>{{message}}</
阅读全文
摘要:vue官网 一、vue基础入门 一、声明式渲染 Vue.js的核心是一个允许采用简洁的模板语法来声明数据渲染进DOM系统,如下: 1 <div id="app"> 2 <!-- 渲染 --> 3 {{ message }} 4 </div> 5 6 <script type='text/javasc
阅读全文