我们知道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...