vue | 易学教程

vue脚手架引入MD5加密函数

阅读更多关于 vue脚手架引入MD5加密函数

可以在全局定义一个MD5的方法，然后引入到vue的脚手架中。首先 npm install crypto --save 然后引用定义一个对象， import crypto from 'crypto'; let Md5Util = {}; Md5Util.getEncryption = function (text) { const md5 = crypto.createHash('md5'); md5.update(text); //md5算法 let md5password = md5.digest('hex'); return md5password; }; export default Md5Util; 以下边是MD5加密的代码来源： https://www.cnblogs.com/chenmz1995/p/11375930.html

(vue.js)Vue element tab 每个tab用一个路由来管理？

阅读更多关于 (vue.js)Vue element tab 每个tab用一个路由来管理？

(vue.js)Vue element tab 每个tab用一个路由来管理？来源：网络整理时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js)Vue element tab 每个tab用一个路由来管理？”问题疑问，本网通过在网上对“ (vue.js)Vue element tab 每个tab用一个路由来管理？”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：问题： (vue.js)Vue element tab 每个tab用一个路由来管理？描述: 每个tab如何用一个路由来管理这个页面。同级路由会出现问题。怎么解决呢？想要的效果就是点击侧边导航，右边新建tab，但是每个tab想要单独的路由控制跳转，怎么整？解决方案1: 有一个问题，就是会导致路由在切换了之后，页面之间输入的内容无法保留，举个例子：用户在 a.vue 页面的文本框中输入了 123 ,这个时候切换到 b.vue ，再切换回 a.vue ，会发现a.vue 组件输入的123消失了，可以用<keep-alive> 去解决这个问题： <template> <div> <p>项目管理</p> <el-tabs type="card" v-model="$route.name" @tab-click="onTabClick"> <el-tab-pane v-for=

vue项目准备与骨架搭建（一）

阅读更多关于 vue项目准备与骨架搭建（一）

首先保证这些条件满足：然后全局安装vue cnpm install -g vue-cli 安装完成后可以使用vue -h查看vue的帮助文档 vue -list 查看vue支持的模板我们接下来会用到的是webpack vue init webpack mall 项目名输入必须是英文，我这里输入mall 为什么不选择npm install呢，因为我们选择的是cnpm install 接下来就根据上面黄色字体的提示来操作 cd mall cnpm install 安装完成后打开项目，找到根目录下的 .eslintric.js文件可以配置自己的代码风格，然后通过命令行自动来修改 cnpm run lint -- --fix 修正修改webpack配置 config目录下的index.js cnpm run dev 再开一个cmd，使用ipconfig查看自己的ip地址在浏览器访问：192.168.56.1:8080 文件和目录结构在src--assets目录下，新建fonts/img/js/scss四个目录这边存放的是公共的文件，如果是组件特有的文件，会跟自己的组件放在一起在src目录下，创建四个目录： pages （页面组件） base （公共组件，可以移植到其他项目中） api （使用ajax或者jsonp与后端交互相关的）公共资源的准备：图标字体

Vue 入门

阅读更多关于 Vue 入门

vue是国人开发的一个js框架，国人用得比较多。 Vue等框架与jQuery的区别 jQuery基于dom操作 Vue框架以数据驱动、组件化开发为核心下载vue.js 如果安装了node，执行命令 npm install vue 下载vue.js，可在vue后面加上 @版本号指定要下载的vue.js版本，未指定时默认下载最新稳定版。在代码中引入下载的vue.js： <script type="text/javascript" src="vue.js"></script> 上线时要换为生产版 vue.min.js demo vue.js的简单使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title>  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>  <div id="app"></div> <div class="red"></div> <div></div> <script> new Vue({ el:'#app', //通过id来指定 template:'<p>hello vue1</p>' /

vue项目准备与骨架搭建（二）

阅读更多关于 vue项目准备与骨架搭建（二）

接上篇 https://www.cnblogs.com/chenyingying0/p/12608666.html 为什么导航不使用fixed定位：首先解释下，手机端的头部导航和底部导航，位置一般都是固定不变的但是我们这里不使用固定定位fixed，因为它在手机端的兼容性并不好我们可以设置总容器为relative，并且溢出隐藏，然后设置头部导航和底部导航absolute 页面中除去头部和底部的部分作为滚动区域在vue中，组件一般不包含位置信息，这样不利用组件复用。位置信息一般由父组件和页面组件来提供修改app.vue <template> <div id="app" class="g-container"> <div class="g-view-container"> <router-view></router-view> </div> <div class="g-footer-container"></div> </div> </template> <script> export default { name: 'App' } </script> 新建_containers.scss（书写app.vue中对应的全局样式） @import "mixins"; .g-container{ position: relative; width:100%; height:100%

Vue 常用指令

阅读更多关于 Vue 常用指令

指令是以数据去驱动DOM行为，简化DOM操作。常用指令如下 v-text innertext，不能解析文本中的html标签 v-html innerhtml，可解析文本中的html标签 v-show 控制元素的显示、隐藏 v-if、v-else-if、v-else 满足条件才显示对应的元素 v-for 遍历数组、对象 v-bind 单向数据绑定 v-model 双向数据绑定 v-on 事件绑定 demo v-text、v-html、v-show <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <script> new Vue({ el:'#div1', template:'<p v-text="info"></p>', //相当于'<p>{{info}}</p>' data:function(){ return{ info:"are you ok?" //如果里面含有html标签，不解析，直接作为文本输出 } } }); new Vue({ el:'#div2', template:'<p v-html="info"></p>', data:function(){ return{ info:"<h3>are you ok?</h3>" //会解析里面的html标签 } } }); new Vue({

vue状态管理vuex+slot插槽+vue-resource请求

阅读更多关于 vue状态管理vuex+slot插槽+vue-resource请求

vue状态管理vuex 全局状态管理，所有页面共享数据设置数据： this.$store.dispatch("increment",100000); 获取数据： this.$store.state.num; 首先下载插件： cnpm install vuex --save 然后导入插件：找到main.js 在src下新建一个store文件夹，里面创建一个index.js文件使用vueX vue----slot插槽：常用于组件调用中首先在components文件夹中创建slot.vue用于测试然后在页面中使用组件在浏览器中访问：作用就是：在组件中写入的内容，都会被放置到插槽中如果没有插件，在组件中写入内容是无法显示的如果组件中有多个插槽，默认都会插入第一个插槽中需要给插槽命名，在模板使用时指定插槽名插入到具名插槽中不过这种写法已经被废弃，使用报错主要是不支持在元素上直接使用slot，你可以改写在template上或者使用新版本推荐的语法 v-slot 这两种方法都能正常使用具名插槽 vue-resource请求 cnpm install vue-resource --save main.js 引入插件使用resource 因为没有后台数据，只是简单演示下用法来源： https://www.cnblogs.com/chenyingying0/p

vue路由router-link

阅读更多关于 vue路由router-link

vue路由router-link 首先需要cnpm install vue-router 不过我之前在安装vue时已经顺便安装上了，哈哈用法：首先是最简单的写法：带参数的跳转：（to前面有个冒号别忘了）路由这里给path补充上参数，记得带冒号在跳转之后的页面可以获取到传递过来的参数跳转过来的页面 query定义url中，问号后面的键值对可以在接收页面获取到query 浏览器上访问使用js实现跳转：简单跳转新建demo2 路由文件点击完成跳转 js实现命名的url，并且带参数 js实现带查询参数的跳转：来源： https://www.cnblogs.com/chenyingying0/p/12603221.html

Vue Element几个用法

阅读更多关于 Vue Element几个用法

1，单选按钮回显（1）设置v-model，label （2）给model绑定的变量赋值注：变量的值不可以是整数 2，多选按钮回显（1）设置v-model，label （2）给model绑定的变量赋值注：变量的值不可以是整数 3，子模块表单赋值（1）问题：在列表页面（父模块）打开添加页面（子模块）时会执行一些操作，例如：需要先执行：显示"添加模块" 在执行：调用添加界面的表单赋值操作但是这两行代码异步执行的，但是在"显示"之前调用子模块的方法就会导致子模块的resetForm（）方法还没加载就执行了，因此报方法未定义的错误（2）解决：如上图所示使用async/await控制执行顺序 4，模块间方法调用（1）父模块调用子模块　　1）在父模块使用子模块的地方声明ref 　　　　2）在子模块编写父模块要调用的方法　　　3）在父模块中通过ref调用子模块的方法，同时可以将父页面的对象以参数的形式传递过去　　　　（2）子模块调用父模块　 1）在父模块中绑定要执行的方法：　　 2）在父模块编写子模块要调用的方法，同时可以将子页面的对象以参数的形式传递过来　　 3）在子模块中通过this.$emit()调用　 5，监听变量值的变化（1）声明变量（2）设置监听 /** * 监听"隐藏已关联模型“动态设置可选列表 */

vue通信、传值

阅读更多关于 vue通信、传值

一、通过路由带参数进行传值 ①两个组件 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（长期保存）的区别。三、父子组件之间的传值（一）父组件往子组件传值props ①定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多

订阅 vue