随笔分类 -  Vue

Vue 中使用 vuex（十三）
摘要：1、基本使用 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。 通常在多个组件之间需要共享数据或状态时就会用到。 （1）核心对象： State：存储状态数据 Getter：从状态数据派生数据，相当于state的计算属性。 Mutation：存 阅读全文
posted @ 2020-03-25 14:18 d0usr 阅读(274) 评论(0) 推荐(0)
Vue 中使用 vue-router（十二）
摘要：1、路由基础 （1）安装 vue-router： cnpm install vue-router --save （2）如果在一个模块化工程中使用它，必须要通过 Vue.use() 初始化路由插件： import Vue from 'vue' import VueRouter from 'vue-ro 阅读全文
posted @ 2020-03-25 14:00 d0usr 阅读(1721) 评论(0) 推荐(0)
Vue 中使用 axios（十一）
摘要：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1、安装 axios： cnpm install axios --save 2、引入 axios： import Axios from "axios" Vue.prototype.$axios = Ax 阅读全文
posted @ 2020-03-25 00:32 d0usr 阅读(346) 评论(0) 推荐(0)
Vue 过滤（十）
摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ message | c 阅读全文
posted @ 2020-03-25 00:24 d0usr 阅读(232) 评论(0) 推荐(0)
Vue 自定义指令（九）
摘要：自定义指令注册分为全局注册和局部注册，比如注册一个 v-focus 指令，用于在<input>，<textarea>元素初始化时自动获得焦点。 1、全局注册方法： main.js ： import Vue from 'vue' import App from './App' Vue.config.p 阅读全文
posted @ 2020-03-25 00:18 d0usr 阅读(229) 评论(0) 推荐(0)
Vue 插槽（八）
摘要：1、插槽的基本使用 在子组件内使用特殊的 <slot> 元素就可以为这个子组件开启一个 slot（插槽）； 在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。 子组件 Learn.vue ： <template> <div class="container"> < 阅读全文
posted @ 2020-03-24 20:41 d0usr 阅读(295) 评论(0) 推荐(0)
Vue 组件（七）
摘要：1、组件创建及使用 （1）在 components 目录下，新建 Learn.vue 文件，示例代码如下： <template> <!-- 只能存在一个根容器 --> <div class="container"> <p>hello world</p> </div> </template> <scr 阅读全文
posted @ 2020-03-24 20:30 d0usr 阅读(192) 评论(0) 推荐(0)
Vue 表单与 v-model（六）
摘要：1、基本用法 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面的例子： <template> <div id="app"> <input type="text" v-model="message" placeho 阅读全文
posted @ 2020-03-24 20:06 d0usr 阅读(267) 评论(0) 推荐(0)
Vue 中 class 与 style 绑定（五）
摘要：在数据绑定中，最常见的两个需求就是元素的样式名称 class 和 内联样式 style 的动态绑定，它们也是 html 的属性，因此可以使用 v-bind 指令。 1、绑定 class 的几种方式 （1）对象语法： 给 v-bind:class 设置一个对象，可以动态的切换 class，例如： <t 阅读全文
posted @ 2020-03-24 18:40 d0usr 阅读(308) 评论(0) 推荐(0)
Vue 计算属性（四）
摘要：1、computed 选项： <template> <div id="app"> {{ reversedText }} </div> </template> <script> export default { name: "App", data() { return { text: '123,456 阅读全文
posted @ 2020-03-24 18:26 d0usr 阅读(323) 评论(0) 推荐(0)
Vue 方法与事件（三）
摘要：1、v-on 指令类似原生 Javascript 的 onclick 等写法，也是在 html 上进行监听的。例如： <template> <div id="app"> 点击次数：{{ counter }} <button @click="counter++">+1</button> </div> 阅读全文
posted @ 2020-03-24 18:21 d0usr 阅读(513) 评论(0) 推荐(0)
Vue 基本指令使用（二）
摘要：1、模板语法： 使用双大括号(Mustache 语法) “{{ }}” 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。例如： <template> <div id="app"> <p>{{ msg }}</p> <p>{{ 20+1 }}</p> <p>{{ "ok" ? 'ye 阅读全文
posted @ 2020-03-24 18:15 d0usr 阅读(272) 评论(0) 推荐(0)
Vue 项目开发环境搭建（一）
摘要：1、初始化 Vue 项目： （1）彻底删除 cnpm （假如已安装过）： npm uninstall cnpm -g （2）安装 cnpm 淘宝的包管理器（由于 npm 的插件都是从国外服务器下载，因网络不稳定，可能出现异常，所以需要更换为 cnpm）： npm install cnpm -g -- 阅读全文
posted @ 2020-03-23 16:20 d0usr 阅读(560) 评论(0) 推荐(0)