我们知道jq是简化了dom操作，而react和vue则是通过使用虚拟dom的方式，不需要频繁的更改ui界面，而是通过更改数据的方式来更新界面。我们知道些jq插件时会在IFFE中传入jQuery，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。其实vue中new Vue（）对象，效果也是类似，可以避免vue范围类的数据或变量被污染。我们先来看一些基本的用法插入文本值v-html 直接插入html结构 v-bind属性 <a :href="url" rel="external n...
webpack的打包依赖于它的一个重要配置文件webpack.config.js，在这个配置文件中就可以指定所有在源代码编译过程中的工作了，就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了。 一个完整的工程项目中的webpack的配置远远没有这么简单，随着工程的构建要求的增加，webpack.config.js内的配置项目也会随之增加，webpack还有许许多多的选项提供给我们进行灵活配置，它只是一个构建工具，我们只需要了解在Vue项目中它基本能为我...
本文实例讲述了JavaScript封装的常用工具类库bee.js。分享给大家供大家参考，具体如下： bee.js下载地址： github下载地址：https://github.com/shadowOfCode/bee.js 或点击此处本站下载。 使用： <!--area.js存放区域编码的一个常量。由于bee.js里面的getPersonInfo18()方法需要调用这个常量，所以在bee.js之前引入。如果不需要用到这个方法也可以不引入area.js--> <script type="text/javascript" src="js/area.js" ></script> <...
vue2.0在使用的过程中， .vue文件之间的跳转，在template中的常见写法是： <router-link to="/miniCard/statement/horizon"><button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push ，用法如下： this.$router.push({path: /...}); 希望本文对您有所帮助！ 拓展知识：解决this.$router.push无...
最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要的样子。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title...
先贴上官方定义。 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例（方法，过滤器and so on） 使用场景：货币单位，时间格式。这些如果在用到的页面使用的话代码会重复的很多，所以在全局混入这些实例会减少代码量，可维护性也比较高。 ex： step1: 先定义mixin.js const mixin = {methods: {/*** 格式化时间* @param {string|number|object|Array} dateTime - 时间，可以是一个字符串、时间戳、表示时间的对象、Date对象或...
本文实例讲述了JavaScript引用类型RegExp基本用法。分享给大家供大家参考，具体如下： 1、正则表达式定义 三个标志：全局模式g，不区分大小写模式i，多行模式m。 1) 字面量定义 var pattern = /[fe]at/gim;2) 构造函数定义： 接收两个参数——要匹配的字符串模式和可选的模式字符串(g,i,m)。 var pattern = new RegExp("[fe]at","gim");注意： 1) 若需要匹配的字符串中包含以下元字符，就必须对它们进行转义：( [ { \ ^ & | ) ? * ...
本文实例讲述了JavaScript原型对象、构造函数和实例对象功能与用法。分享给大家供大家参考，具体如下： 大家都知道，javascript中其实并没有类的概念。但是，用构造函数跟原型对象却可以模拟类的实现。在这里，就先很不严谨的使用类这个词，以方便说明。 下面整理了一些关于javascript的构造函数、原型对象以及实例对象的笔记，有错误的地方，望指正。 先用一张图简单的概括下这几者之间的关系，再细化：构造函数和实例对象 构造函...
Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为： props down, events up 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。 父子级组件比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。 这里我们先定义父子两个组件和一个 Vue 对象： var childNode = {template: `<div>ch...
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素） 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> ...
大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。如果不想使用views文件夹，想自己设置文件夹名字，那么app.set("views","aaaa"); 如果想写一个快速测试页，当然可以使用res.send()。这个函数将根据内容，自动帮我们设置了Content-Type头部和200状态码。send()只能用一次，和end一样。和end不一样在哪里？能够自动设置MIME类型。 如果想使用不同的状态码，可以： res.status(404).send(Sorry, we canno...
1、约定本文的 demo 代码有些是伪代码，不可以直接执行。没有特殊说明，本文所有 demo 都是基于 ES6 规范。Object.method 代表是静态方法， Object#method 代表的是实例方法。如 Promise#then 代表的是 Promise 的实例方法, Promise.resolve 代表的是 Promise 的静态方法.2、什么是 Promise?首先我们来了解 Promise 到底是怎么一回事 Promise 是抽象的异步处理对象，以及对其进行各种操作的组件。我知道这样解释你肯定还是不明白 P...
说下我对vue中mixin的一点理解vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 而mixins则是在引入组件之后，则是将组件内部的内容如data等方...
先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N） 4.npm i (这个是安装项目的依赖包) 5.npm run dev（启动你的vue项目） 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件 6.webpack sell默认...
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件： <template> <div class="train-city"> <span @click=select(`大连`)>大连</span> </div> </template> <script> export default { name:trainCity, methods:{ select(val) { let data = { cityname: val...