场景分析 在前端开发中，我们常常会运用到“组件库”。在main入口中引入组件库，就可以很轻松的在页面中引入，并做一些基本的配置，如样式，颜色等。只需要在引入的组件中写入特定的属性，就能够定义。 举例说明 例如：element-ui组件库中使用switch开关，有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。<el-switchv-model="value":active-color="activecolor"@change="touchSwitch"> </el-switch><s...
如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。 1、Toast组件 首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。 (1). toast.vue <template lang="html"><div v-if="isShowToast" class="toast-container" @touchmove.prevent><!-- 这里content为双花括号 --><span class="loading-tx...
数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作，而在这些初始化操作里面，和数据绑定关联最大的是 initState。 首先，来看一下他的代码： function initState(vm) {vm._watchers = [];var opts = vm.$options;if(opts.props) {initProps(vm, opts.props); //初始化props}if(opts.methods) {initMethods(vm, opts.methods); //初始化methods}if(opts.data) {initData(vm); //初始化data} else {observe(vm._data = {}, ...
实现todolist功能，具体实现如下： 可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addFun();进行调用。<div id="app"><input type="text" v-model="msg" @keydown="kaddFun($event)"/><button @c...
具体代码如下所述： v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue实例化</title> </head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> </div> <script type="text/javascript"> var app2 = new Vue({el: #app-2,data: {message: 页面加载...
本文实例讲述了Vue 事件处理操作。分享给大家供大家参考，具体如下： 1 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 html： <div id="app1"><button v-on:click="counter +=1">递增</button><p>按钮已被点击 {{ counter }} 次。</p> </div>js： var app1 = new Vue({el: "#app1",data: {counter: 0} });效果：2 事件处理方法 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 ...
本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考，具体如下： 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件： <component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然...
本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考，具体如下： 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： html： <div id="app-1"><!-- HTML 中是 kebab-case --><blog-post post-title="你好！"></blog-post...
本文实例讲述了Vue 组件注册。分享给大家供大家参考，具体如下： 1 组件名 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： Vue.component(my-component-name, { /* ... */ })该组件名就是 Vue.component 的第一个参数。 你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范 中的自定义组件名...
1、基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标。 本文以vue项目为例，当然在react中的使用原理基本相似。 svg图标可以直接通过img标签来使用，也可当做icon来使用。 本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。 2、配置 安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理，所以需要处理下： {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: url-loader,optio...
具体代码如下所述：<strong>组件部分</strong> <template><div class="main"><div class="page-tab"><div :class="nowPath == item.path ? tab-item tab-item_active : tab-item"v-for=(item, index) in tabList:key="index"><router-link mode="out-in":to="item.path">{{item.name}}</router-link></div> </div><transition :name="slideDirection"><slot></slot> </transition></div> </template> <script> export default {...
在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。 仔细看看文档，就知道axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能使用vue.use()方法的。?查看vue插件 那么难道...
vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link>编程式的导航 router.push 编程式导航传递参数有两种类型：字符串、对象。 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数： this.$router.push("home");对象 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。 命名路由 命名路由的...
这篇文章在vue里使用codemirror遇到的问题，写的很不错，还有下载的方法，大家可以点击查看。 以下是自己使用过的，做出来的例子： 做出来的效果图：记住使用之前要npm下载哦 npm install vue-codemirror --savemain.js import { codemirror } from vue-codemirrorimport codemirror/lib/codemirror.cssVue.use(VueCodemirror)再到组件中使用 import { codemirror } from vue-codemirrorrequire("codemirror/mode/python/pyt...
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。 vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example {color: red; } </style><template><div class="example">hi</div> </template>渲染结果： <style> .example[data-v-f3f3eg9] {color: red; } </style><template><div class="example" d...