松哥的书里边，其实有涉及到 Vue，但是并没有详细说过，原因很简单，Vue 的资料都是中文的，把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了，个人感觉这个是最好的 Vue.js 学习资料 ，因此在我的书里边就没有多说。但是最近总结小伙伴遇到的问题，感觉很多人对前后端分离开发还是两眼一抹黑，所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事，算是一个简单的入门科普吧。 前后端不分 后端模板：Jsp、FreeMarker...
在vue使用echarts时，可能会遇到这样的问题，就是直接刷新浏览器，或者数据变化时，echarts不更新? 这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染，这是实现本需求的基础。我们再设想一下， 如果想要支持数据的自动刷新，必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。 所幸Vue为我们提供了==watcher==功能，通过它我们可以很方便的实现上述功能： watch:{...
需求背景：在一个后台的管理系统中，不同的用户角色对应不同的用户权限。现要求，同一个页面对有操作权限的用户来说是可操作的，对无操作权限的用户来说是只读的，即操作按钮均失效。系统用Vue.js开发。 一、mixin的概念 官方文档这么说：混入是一种分发Vue组件中可服用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 我自己的理解：混入对象具有Vue组...
前言 最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。 主体 flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible' 通过要以上两步，就完...
在网上看到一个这样的网站，STRML 它的效果看着十分有趣,如下图所示:这个网站是用 react.js 来写的，于是，我就想着用 vue.js 也来写一版，开始撸代码。 首先要分析打字的原理实现，假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码，并且我们看到，当 css 代码写完一个分号的时候，它写的样式就会生效。我们知道要想让一段 CSS 代码在页面生效，只需要将其放在一对 <style> 标签对中即可。比如: <!DOCTYPE html> <html> ...
插槽（Slot） 定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染。 在子组件中通过加入<slot>元素占位，便能够渲染父组件中子组件标签中的内容了。 插槽内容 任何模版代码HTML代码其他组件插槽可以有默认内容，当在父组件中没有提供内容的时候，来进行显示。 <!-- submit-button --> <button type="submit"><slot>Submit</slot> </button>1. <submit-butt...
首先我们会想着在mounted或者created里面加入想要执行的方法，但是有的时候会遇到在你执行这个方法的时候，页面还并没有被渲染完成，所以就会出现这个方法在匹配页面标签报错的情况。 解决思路： 1.通过子页面调用父页面的方法，因为在子页面开始渲染的时候，你的父页面肯定是已经渲染好了的，前提这里的方法中是去找寻父页面的标签。 2.直接在本页面监视一个参数，发现参数被初始化了，说明页面也已经加载完成，因为你的页面用到了...
本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能。分享给大家供大家参考，具体如下： v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器。 不然会不生效 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue.js数据双向绑定</title><style></style><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><script>window.onload...
本文实例讲述了Vue.js实现开发购物车功能的方法。分享给大家供大家参考，具体如下： 购物车一般包含商品名称、单价、数量等信息，数量可以任意新增或减少，商品项也可删除，还可以支持全选或多选：我们把这个小项目分为三个文件： index.html （页面）index.js （Vue 脚本）style.css （样式）1 index.js 首先在 js 中初始化 Vue 实例，整体模板如下： var app = new Vue({el: #app,data: {...},mounted: function () {...},comput...
什么是scoped slotsA scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.上面是官方的定义。作用域插槽（Scoped Slots）是vue.js中一个非常有用的特性，它可以使组件更加通用和复用。唯一的问题是理解起来比较困难。试图去让你理解父与子作用域的交织关系，像解决一道数学难题。简单点说slot就是插槽，它是可以被替换掉的，替换它...
本文实例讲述了Vue.js实现可排序的表格组件功能。分享给大家供大家参考，具体如下： 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。 一个表格包含表头和数据两部分内容。因此，我们定义两个数组，columns 表示表头信息，在 <thread> 中渲染，并可在此指定某一列是否需要排序；data 表示数据。 html： <div id="app" v-cloak><v-table :data="data" :columns="columns"></v-table><button @click="add">新增</button> </d...
Vue.js 组件提供了一个 functional 开关，设置为 true 后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。1 示例这里，我们用 functional 函数化组件来实现一个智能组件。html：<div id="app"><smart-component :data="data"></smart-co...
Vue 2.0 版本中取消了 v1 中的 $broadcast 方法，因此要使用全局事件时，不可避免地会使用到 event-bus 之类的方法，本文旨在提出一种不需要用到 event-bus 的全局事件使用方法。 主要思路是将事件全部绑定在 $root 上，并为所有全局事件添加一个前缀防止冲突，再通过向 $options 上注入新的 key 来简化使用方式。 以下为 mixin 文件代码 // event-mixin.js export default {created() {if (this.$options.events) {Object.keys(th...
本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}ul{margin:100px ;}li{width: 50px;height: 50px;border: 1px solid;float: left;text-align: center;line-height: 50px ;}.act{background: red;}</style> </head> <body> <ul id="app"><li @click="fun(x)" v...
在 v-for 代码块中，我们可以完全地访问父级作用域下的属性。 v-for 还支持可选的第二个参数，作为当前项的索引。 也可以使用 v-for 来遍历对象的属性。 还可以提供第二个参数，作为对象的键名(key)： <body> <div id="box"> <ul> <li @click="onclick(index)" v-for="(item,index) in dataList">{{item.name}}</li> </ul> </div> </body> <script src="assets/vue/vue.js"></script> <script> new Vue({ el:"#box", data:{ d...