vue | 易学教程

vue局部组件的使用

阅读更多关于 vue局部组件的使用

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>vue组件的使用</title> <style> body{ color:burlywood; } .header{ width: 100%; height: 40px; background-color: #333; line-height: 40px; text-align: center; } </style> </head> <body> <div id='app'></div> <script> // 1.声明组件 var Vheader = { template : ` <div class='header'> 头部区域 </div> `, } new Vue({ el:'#app', data(){ return{ } }, // 3.使用组件 template:` <Vheader/> `, // 2.挂载组件 components:{ Vheader, } }) </script>

windows下安装node，cnpm，vue脚手架

阅读更多关于 windows下安装node，cnpm，vue脚手架

一、安装node 下载地址 http://nodejs.cn/download/ 下载二进制包 (.zip)需要自己配置环境变量下载安装程序 (.msi)，安装完成自动配置环境变量利用cmd命令进入安装路径检测是否安装成功二、安装淘宝镜像cnpm npm包含的很多依赖包是部署在国外的，在天朝，大家都知道下载速度是超级慢啊。所以我们要安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就快多了。安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org 三、安装vue-cli脚手架,用于帮助搭建所需的模板框架 vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。安装命令为：cnpm install -g vue-cli 如图输入vue检测安装成功四、新建项目找到一个合适的目录，新建vue项目命令：vue init webpack my-front(项目文件夹名) $ vue init webpack my-front 　　-- 这个是那个安装vue脚手架的命令 This will install Vue 2.x

vue将表格导出为excel

阅读更多关于 vue将表格导出为excel

vue将表格导出为excel 一：在项目中需要安装2个依赖项，如下命令： npm install --save file-saver xlsx 二：在vue文件中如下使用即可： <template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <p><button type="button" id="export-table" @click="exportFunc">下载excel文件</button></p> <div id="out-table"> <table> <thead> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> </tr> </thead> <tbody> <tr> <td>111111</td> <td>我是前端开发</td> <td>今年29岁</td> </tr> </tbody> </table> </div> </div> </template> <script> import FileSaver from 'file-saver'; import XLSX from 'xlsx'; console.log(FileSaver); export default { name: 'helloworld', data () { return { msg:

Vue图片懒加载插件

阅读更多关于 Vue图片懒加载插件

图片懒加载是一个很常用的功能，特别是一些电商平台，这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。 Vue.use() 就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实就是官方内部实现的一个方法，供广大开发者灵活开发属于自己的插件。只需要按照约定好的规则开发就行。用法安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次。注：install方法或者被当做install方法的方法它的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。参考链接： https://cn.vuejs.org/v2/api/#Vue-use https://segmentfault.com/a/1190000012296163 Vue.direction自定义指令用法 ——全局注册和局部注册全局注册 //

vue组件递归

阅读更多关于 vue组件递归

刚才写了篇《 element多层导航菜单》文章，顺便也写写其中核心原理其实没啥好说就是组件递归，这里呢简单写个例子，面试被问到的时候直接拿来手写代码也行，有看到本文章的同学可以复制代码去试试没多少代码量，主要是让还没懂组件递归的同学好理解核心就这个，组件自己调用自己： // ====== 组件： ================== <template> <ul> <li v-for="(item,index) in list " :key="index"> <p>{{item.name}}</p> <treeMenus :list="item.children"></treeMenus> </li> </ul> </template> <script> export default { name: "treeMenus", props: { list: Array } }; </script> <style> ul { padding-left: 20px !important; } </style> // ====== 调用： ==================  <treeMenus :list="treeMenusData"></treeMenus> treeMenusData: [ // 数据格式 { name: "菜单1",

v-bind指令

阅读更多关于 v-bind指令

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Title</title>  <script src="js/vue-2.4.0.js"></script> </head> <body> <div id="app">  <input type="button" value="按钮" v-bind:title="mytitle+'123'">   </div> <script> const vm = new Vue({ el: '#app', data: { msg: '欢迎学习Vue', mytitle:'这是一个自己定义的title' } }); <

vue 添加项id自动获取id

阅读更多关于 vue 添加项id自动获取id

(function (window) { 'use strict'; const vm = new Vue ({ el:'#app', data:{ name:'', list:[ {id:1,name:'抽烟',completed:false}, {id:2,name:'喝酒',completed:true}, {id:3,name:'烫头',completed:false}, ] }, methods:{ add(){ if(this.name.trim() === ''){ return } let id if(this.name.length === 0){ id = 1 }else{ id=this.name[this.name.length - 1].id+1 } //数据为0的时候 -1产生的错误 this.list.push({id,name:this.name,completed:false}) this.name='' } }, }) })(window); 来源： https://www.cnblogs.com/xiannv/p/10996603.html

vue 实现滑块验证码

阅读更多关于 vue 实现滑块验证码

图一为拖拽前效果，图二为拖拽后效果一、新建文件JcRange.vue，代码如下：　　1、模板代码: 1 <template> 2 <div class="jc-component__range"> 3 <div class="jc-range" :class="rangeStatus?'success':''" > 4 <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i> 5 {{rangeStatus?successText:startText}} 6 </div> 7 </div> 8 </template> 　　2、js代码 <script> export default { props: { // 成功之后的函数 successFun: { type: Function }, //成功图标 successIcon: { type: String, default: 'el-icon-success' }, //成功文字 successText: { type: String, default: '验证成功' }, //开始的图标 startIcon: { type: String, default: 'el-icon-d-arrow-right' }, //开始的文字

Vue指令1：v-text及v-html

阅读更多关于 Vue指令1：v-text及v-html

v-text://插入一段文本<div id="app"> <p v-text="message"></p></div><script> var vm = new Vue({ el:'#app', data:{ message:'hello world !' } })</script> v-html: //既可以插入一段文本也可以插入html标签 <div id="app"> <p v-html="message"></p></div><script> var vm = new Vue({ el:'#app', data:{ message:"<input type='button'>" } })</script> 来源： https://www.cnblogs.com/zhaodagang8/p/7819684.html

vue中从一个页面传参到另一个页面

阅读更多关于 vue中从一个页面传参到另一个页面

首先我在home.vue中定义 updates(id){ this.$router.push({ path:'/world', name:'world', params:{ id : id } }) } 其次在另一个页面world.vue中 export default { name: '', data () { return { id: '' } }, created(){ this.getParams() }, methods: { getParams () { // 取到路由带过来的参数 var routerParams = this.$route.params.id // 将数据放在当前组件的数据内 this.id = routerParams } }, watch: { // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可 '$route': 'getParams' } } 来源： https://www.cnblogs.com/zz191308/p/12484372.html

订阅 vue