vue | 易学教程

Vue通信、传值的多种方式，详解

阅读更多关于 Vue通信、传值的多种方式，详解

Vue通信、传值的多种方式，详解转自： https://blog.csdn.net/qq_35430000/article/details/79291287 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.$route.query.orderId 二、通过设置 Session Storage缓存的形式进行传递 ①两个组件A和B，在A组件中设置缓存orderData const orderData = { 'orderId': 123, 'price': 88 } sessionStorage.setItem( '缓存名称', JSON.stringify(orderData)) ②B组件就可以获取在A中设置的缓存了 const dataB = JSON.parse(sessionStorage.getItem('缓存名称')) 此时 dataB 就是数据 orderData 朋友们可以百度下 Session Storage（程序退出销毁）和 Local Storage（长期保存）的区别。三

vue表单控件绑定+自定义组件

阅读更多关于 vue表单控件绑定+自定义组件

vue表单控件绑定 v-model 在表单控件元素上创建双向数据绑定文本框双向绑定多选框演示下拉列表演示 vue自定义组件组件放在components目录下组件基本要素：props $emit 通过import导入自定义组件制作一个倒计时组件： 1、在conponents目录下，新建一个time.vue 方法写在mouted声明周期函数内，代码如下：然后在index.vue中使用组件：我之前组件命名为time，可能与默认什么冲突了，然后报错不让用，所以改名成cyytime 但是这个组件还不够灵活，使用props能够接收到组件在调用时传入的属性值修改代码：想要让组件在结束时能触发一个事件，需要用到$emit 来源： https://www.cnblogs.com/chenyingying0/p/12601862.html

【04】Vue 之事件处理

阅读更多关于【04】Vue 之事件处理

4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法，当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便，而且能让ViewModel更简洁，逻辑更彻底。所以还是推荐大家使用的。 Vue提供了 v-on 指令帮助我们进行事件的绑定。基本的内联事件处理方法[官方demo]： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门之htmlraw</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="count += 1">您输入的信息是：{{ count }}</button> </div> <script> var app = new Vue({ el: '#app', data: { count: 1 } }); </script> </body> </html> 　　 4.2. 事件处理方法集成到Vue对象内联的方式绑定的事件，只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便，也不容易出错。 Vue对象中可以添加methods属性

如何在vue中全局引入stylus文件的公共变量

阅读更多关于如何在vue中全局引入stylus文件的公共变量

新建一个公共的stylus公共文件添加公共变量，如下：修改下图圈出的文件：具体的修改如下： // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', }) } else { return ['vue

Vue中跳转路如何传值

阅读更多关于 Vue中跳转路如何传值

在vue中有两个很重要的标签 <router-link></router-link> 和<router-view></router-view> router-link标签常常结和to属性使用达到点击跳转页面的目的，a标签的使用很像在跳转页面时如果我们想传值，有多种方法：一、<router-link to=”/one?a=1&b=2‘"></router-link> 接收：this.$route.query 二、，<router-link :to="{path='/one',query:{a:1,b:2}}"></router-link> 接收 :this.$route.query 三、<router-link :to="{path='/one',params:{a:1,b:2}}"></router-link> 接收：this.$route.params 四、<router-link :to="{name=One',params:{a:1,b:2}}"></router-link> 接收：this.$route.params 五.、<router-link :to="{name=One',query:{a:1,b:2}}"></router-link> 接收：this.$route.query 六、在路由 index.js文件中设置 { path:"/one/:id/:type

vue项目搭建（一）

阅读更多关于 vue项目搭建（一）

vue项目搭建（一）由于一直想要有自己的框架，因而一直在尝试搭建各类结构，结合 vue 官网及 git上大神bailicangdu 的项目，再看看网上一些意见，及个人思考，总结的一些，不到之处希望大家可以帮我指证，必定虚心接受技术栈： vue2 + vue-router + vuex + axios + webpack + es6/7 项目布局 vue-cli 构建初始项目后，在 src 中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── apsi | | ├── api.js // 接口详情配置 │ ├── components // 组件 | | ├── common // 公共组件 │ ├── config // 基本配置 │ │ ├── fetch.js // 获取数据 │ ├── images // 公共图片 │ ├── plugins // 引用的插件 │ ├── router │ │ └── router.js // 路由配置 │ ├── service // 数据交互统一调配 │ │ ├── getData.js // 获取数据的统一调配文件，对接口进行统一管理 │ ├── store // vuex的状态管理 │ │ ├── action.js // 配置actions │ │ ├── getters.js

vue2 上传图片

阅读更多关于 vue2 上传图片

<template> <div class="vue-upload-img-multiple"> <div v-if="images.length >0"> <ul> <li v-for="image in images"> <img :src="image" @click='delImage($index)' /> <a href="#" style="position: absolute;" @click='delImage($index)'> <span class="glyphicon glyphicon-remove"></span> </a> </li> </ul> <button @click="removeImage">移除全部图片</button> <button @click='addPic' >上传</button> </div> <div> <div v-if="!image"> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-else> <img :src="image" /> <button @click="removeImage">Remove image</button> </div> </div> </div> </template>

vscode设置VUE eslint开发环境

阅读更多关于 vscode设置VUE eslint开发环境

我的使用vscode开发VUE的常用设置 1.安装插件 ESLint Vetur Beautify Prettier - Code formatter Auto Rename Tag -重命名标签，闭合标签自动修改 Auto Close Tag -自动生成闭合标签 2.配置 (设置保存文件时自动格式化成符合eslint规范的代码) 文件》首选项》setting.json { "editor.fontSize": 16, "typescript.referencesCodeLens.enabled": true, "typescript.implementationsCodeLens.enabled": true, "git.enableSmartCommit": true, "explorer.confirmDelete": false, // "window.zoomLevel": 1, // 窗口大小比例 // "editor.tabSize": 2, // "editor.detectIndentation": false, // "emmet.triggerExpansionOnTab": true, // "update.channel": "none", "editor.formatOnSave": true, // eslint保存格式化 "javascript

npm、webpack、vue-cli 快速上手版

阅读更多关于 npm、webpack、vue-cli 快速上手版

Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。 npm 是Node.js 的包管理工具。 npm的安装和更新 Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。查看安装版本信息：　　-- node -v 查看Node.js 版本信息　　-- npm -v 查看npm版本信息更新npm到指定版本：　　-- npm install npm@5.3.0 -g 　　-- npm install npm@latest -g 更新最新的稳定版本 npm 常用操作之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。有了npm，我们管理自己的依赖包以及版本更加简单。到自己项目目录下，进行以下命令：　　-- npm init -y 输入-y使用默认配置项生成package.json文件。　　-- npm i jquery@0.0.0 简写install 为 i 下载依赖不写@ 默认最新版本　　-- npm uninstall jquery 卸载依赖包　　-- npm update jquery 更新依赖包　　-- npm list 列出已安装的依赖　　-- npm install

通过cordova将vue项目打包成app

阅读更多关于通过cordova将vue项目打包成app

准备工作包括nodejs、cordova、AndroidStudio。一、创建一个cordova工程　　 cordova create cordovaVue 　　 cd cordovaVue config.xml -包含应用相关信息，使用到的插件以及面向的平台 platforms - 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库 plugins - 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。 www - 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件 hooks - 包含为个性化应用编译系统所需的脚本二、添加安卓平台　　cordova platform add android -- save 三、在vue项目中生成编译完成的源文件　　npm run build 四、将cordova项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容五、在cordova项目中创建Android应用　　 cordova build android 六、将手机连接在电脑上，运行该 Android 程序　　 cordova run android 来源： https://www.cnblogs.com/sharpall/p/6780311.html

订阅 vue