一、vue-cli介绍 vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）： cnpm install -g vue-cli更新： cnpm update vue-cli查看安装成功否（有版本号就是成功,V大写） vue -V查看npm注册表里vue-cli版本号： cnpm view vue-cli三、vue-cli 使用 安装过webpack 、vue-cli后，可以开始搭建vue项目： vue init webpack <Project Name>eg：右击G...
本文实例讲述了Vue自定义属性。分享给大家供大家参考，具体如下： 1 事件名 跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件： this.$emit(myEvent)则监听这个名字的 kebab-case 版本是不会有任何效果的： <my-component v-on:my-event="doSomething"></my-component>跟组件和 prop 不同，事件名不会被用作一个 JavaS...
本文实例分析了vue组件之间数据传递的方法。分享给大家供大家参考，具体如下： 1、props:父组件 -->传值到子组件 app.vue是父组件 ，其它组件是子组件，把父组件值传递给子组件需要使用 =>props 在父组件（App.vue）定义一个属性（变量）sexVal = 男 把该值传递给 子组件(B.vue)，如下： App.vue <template><div id="app"><!--<router-view></router-view>--><parentTochild :sex="sexVal"></parentTochild></div> </template> <s...
vue组件的概念是变得越来越重要了噢。今天小编我就来给大家分享一下编写vue组件的经验噢。 1、首先引入vueJS框架并且在底部new一个vue实例便可得到一个组件了哦。 vue实例本身就是一个最大的组件了噢。2、然后可以在vue实例中使用template来编写组件的模板数据了哦。3、接着整个vue实例就会绑定到div上面了哦。这样浏览器所呈现的便是整个组件的所有template的内容了。4、但是一个大组件中是有许许多多不同的组件来进行开发的。 所...
本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考，具体如下： 在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式： 方式一： 1. 路由配置meta: {footShow: true, }， routes: [{path: /,name: home,redirect: /home, // 默认路由添加classcomponent: home,meta: {footShow: true, // true显示，false隐藏},},2. 在...
在vue的源码中，vue/src/shared/util.js文件中存放的是一些方法。其中作者用了Object.prototype.toString这个方法来判断类型，但是并没有直接用，而是单独保存在一个变量：const _toStr = Object.prototype.toString那么为什么要这么做呢？ 先说下判断类型。众所周知，typeof在判断对象时不能正确判断Null，并且不能识别出Array，但在判断基础类型时是没问题的。所以尤大也写了： export function isPrimitive (value: any): boole...
本文实例讲述了vue自定义指令的创建和使用方法。分享给大家供大家参考，具体如下： 一、自定义指令的创建和使用 Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令. 1、自定义指令 ① 创建 new Vue({directives:{change:{bind:function(){},update:function(){},unbind:function...
今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式先看下面的第一个小实例：源代码 html 文件： 请看注释 <!DOCTYPE html> <html><head><meta charset=...
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一： 开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！ move (e) {let odiv = e.target // 获取目标元素// 算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopdocument.onmousemove = e => {// ...
源码这个东西对于实际的工作其实没有立竿见影的效果，不会像那些针对性极强的文章一样看了之后就立马可以运用到实际项目中，产生什么样的效果，源码的作用是一个潜移默化的过程，它的理念、设计模式、代码结构等看了之后可能不会立即知识变现(或者说变现很少)，而是在日后的工作过程中悄无声息地发挥出来，你甚至都感觉不到这个过程 另外，优秀的源码案例，例如 vue 、 react 这种，内容量比较庞大，根本不是三篇五篇十篇八篇文章就...
安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader先在index.html页面head标签内插入这段代码 <script>(function (doc, win) {var docEl = doc.documentElement,resizeEvt = orientationchange in window ? orientationchange : resize,recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if (clientWidth >= 640) {docEl.style.fontSize = 100px;...
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title> </head> <body> <div id="app"><p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)">{{item.message}}</p> </div> <script src="../../dist/vue.min.js"></script> <script>var vm2=new Vue({el...
一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令） CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试...
vue项目在安卓低版本机显示空白原因： 可能的原因一 查看安卓debug，报错，可能有箭头函数语法错误，或者其他语法问题，那可能是ES6语法问题。 这时候需要安装babel-pollyfill。 网上找到方法如下： https://www.gxlcms.com/article/146840.htm 1.安装babel-polyfill和es6-promisenpm i babel-polyfill --save npm i es6-promise --save2.main.js引入 import ‘babel-polyfill‘ import Es6Promise from ‘es6-promise‘ Es6Promis...
Vue入门 Vue是一个MVVM（Model / View / ViewModel）的前端框架，相对于Angular来说简单、易学上手快，近两年也也别流行，发展速度较快，已经超越Angular了。比较适用于移动端，轻量级的框架，文件小，运行速度快。最近，闲来无事，所以学习一下Vue这个流行的框架，以备后用。 一、指令 v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的...