俗话说，要想攻其玉，必先利其器。工作中老是在用angular开发，但慢慢会有vue的业务，所以需要学习学习vue。今天开始折腾vue，我是用webstorm开发前端的，当使用vue-cli创建好一个项目后，使用webstorm打开简直不能入目啊，倒是没有啥错误提示，倒是一大堆的各种编辑器警告，无奈，还得去搞好IDE对vue的支持啊。 前提vue的官方文档上建议新手是先不要使用vue-cli，而是直接先用类似于JQuery一样的方式引入vue来学习。鉴于前面已经搞...
今天，在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功，问题如下：结果这个对象的key值并不能够显示：后来查阅了文档才知道，这是因为在Vue2.0中，v-for迭代语法已经发生了变化： 丢弃了：新数组语法 value in arr (value, index) in arr新对象语法 value in obj (value, key) in obj (value, key, index) in obj解决后：以上这篇浅谈Vue2.0中v-for迭代语法的变化(key、index)就是小编分享给大家的全部内容了，希望能给...
如下所示： function formatDate(date,fmt) {if(/(y+)/.test(fmt)){fmt = fmt.replace(RegExp.$1,(date.getFullYear()+).substr(4-RegExp.$1.length));}let o = {M+:date.getMonth() + 1,d+:date.getDate(),h+:date.getHours(),m+:date.getMinutes(),s+:date.getSeconds()};// 遍历这个对象for(let k in o){if(new RegExp(`(${k})`).test(fmt)){// console.log(`${k}`)console.log(RegExp.$1)let str = o[k] + ;fmt = fmt.replace(...
当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% verbatim myblock %} {% endverbatim myblock %}被此标签包裹的代码将不会被Django的模板引擎渲染。 因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如: <div id="app1">{% verbatim myblock %}{{ message1 }}{% endverbatim myblock %} </div>解决...
vue jsx 语法与 react jsx 还是有些不一样，在这里记录下。 let component = null// if 语句 if (true) {component = (<div></div>); } else {component = (<div></div>); } var ul = (<ul>{component}</ul> ); // map 语句 var coms = limit.map(i => {return {<li>{ul}</li>}; }) // 属性 <li onClick={() => console.log()}> // 自定义指令 let directives = [{name: prod-img, value: params.row.skn, modifiers: {skn: tr...
通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 1.传统的createElement方法 createElement(anchored-heading, {props: {level: 1}}, [createElement(span, Hello), world!] )渲染成下面这样<anchored-heading :level="1"><span>Hello</span> world! </anchored-heading>2.使用jsx语法 这就是会用到一个Babel plugin 插件，用于在 Vue ...
使用Webstorm创建nodejs express应用时，默认使用的是jade或者ejs模板，对于不习惯这两种模板语法的人来说确实不是很方便。没关系，这里我们使用art-template模板引擎，使用后可以直接使用html模板： 1、安装art-template npm install art-template2、修改app.js文件，添加如下代码： // view engine setup app.set(views, path.join(__dirname, views)); var template = require(art-template); template.config(base, ); templat...
本文介绍了如何使用webpack在vue项目中写jsx语法，分享给大家，具体如下: 我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素，而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。data: {msg: Hello world }, render (h) {return h(div,{ attrs: { id: my-id },[ this.msg ]); }渲染后的内容为：<div id=my-id>Hello world</div>Vue 2.0中的render为我们开启了一片新的天地，赋予了我们无限的...
Vue.js是当下很火的一个JavaScript MVVM（Model-View-ViewModel）库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，...
本文介绍了vue语法之拼接字符串的示例代码，分享给大家，具体如下。 先来一行代码： <div class="swiper-slide" v-for="item in message"><img v-bind:src="[xxx(需要拼接的字符串)+item.picurl]" alt="" width="100%" height="245" /> </div>如代码所示，只需要在数组语法中拼接字符串即可。 ***知识点*** 顺便总结一下vue语法 写法也分为：style的绑定和class的绑定 （以下代码部分为官网例子） (1)对象语法 顾名思义，就是有使用...
本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持，分享给大家，具体如下： 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了。先让我们膜拜大神！vue项目的创建者尤大写了个sublime下语法高亮的插件，有人问他how about webstorm support?他是这么回答的。默哀一分钟。 添加高亮和语法支持 这个我是通过插件来实现的。网上目前有两个插件： 插件1：https://github.com/henjue/vue-for-idea 插件2：https...
让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight。 下载地址： https://github.com/vuejs/vue-syntax-highlight 下载页面并下载：解开压缩包vue-syntax-highlight-master，其内所有文件备用。 2.将vue-syntax-highlight植入sbulime。 进入sublime，选择菜单项“Preferences->Browse Packages...”。在打开的文件夹中创建“Vue”文件夹。在Vue文件夹中，将vue-syntax-highlight-master压缩包解压后的所...
目录 * 核心例子 * 修改成静态变量（const）或块级变量（let）* 开始修改* 疑问解释（重复定义会发生什么）* 疑问解释（let的块级作用域是怎样的）* 疑问解释（const定义的变量在基础数据类型和引用类型中的差异） * 修改成Promise的形式* 预备知识（回调函数是什么）* 预备知识（如何把回调函数改为Promise）* 开始修改 * 修改成箭头函数（Arrow Function）* 预备知识（箭头函数是什么）* 预备知识（箭头函数函数中的this是个坑）...
其实es6的面向对象很多原理和机制还是ES5的，只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一、用es6封装一个基本的类 class Person{constructor( uName ){this.userName = uName;}sayName(){return this.userName;}}是不是很向php和java中的类, 其实本质还是原型链，我们往下看就知道了 首先说下语法规则： class Person中的Person就是类名，可以自定义 constructor就是构造函数，这个是关键字，当实例化对象的时...
es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了，所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 function Person( uName ){if ( this instanceof Person ) {this.userName = uName;}else {return new Person( uName );}}Person.prototype.showUserName = function(){return this.userName;}console.log( Person( ghostwu ).showUserName()...