ECMAScript6随学随记

1.let

ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
可以简单的理解为,var声明的是全局变量,let声明的局部变量。

function f1() {
    var n = 5;
    if (true) {
      var n = 10;
    }
    console.log(n);
  }
  f1();//输出结果为10

  function f2() {
    var n = 5;
    if (true) {
      let n = 10;
    }
    console.log(n);
  }
  f2();//输出结果为5

2. const

const声明一个只读的常量。一旦声明,常量的值就不能改变。
这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

但对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。

3. 模板字符串

传统的JavaScript语言,输出模板通常是这样写的($('#xxx')是JQuery语法)。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通单行字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob";
var time = "today";

//模板字符串中嵌入变量,需要将变量名写在${}之中。
var nameTime = `Hello ${name}, how are you ${time}?`;
console.log(nameTime);//输出:Hello Bob, how are you today?

//大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`// 3

//模板字符串之中还能调用函数。
function fn() {
  return "Hello World";
}
`foo ${fn()} bar`// foo Hello World bar

4. 标签模板

模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

alert`123`
// 等同于
alert(123)

“标签模板”的一个重要应用,就是过滤HTML字符串,防止用户输入恶意内容。

var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;//SaferHTML是个自定义函数。

console.log(message);// <p><script>alert("abc")</script> has sent you a message.</p>

5. 对象扩展

ES6允许在对象之中,只写属性名,不写属性值。这时,属性值等于属性名所代表的变量。下面是另一个例子。

function f(x, y) {
  return {x, y};
}
// 等同于
function f(x, y) {
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

6. Module

6.1 解决Javascript的模块化问题。

早期的Javascript,最让人头痛的就是js代码无法互相引用的问题。这对于大型项目而言就像噩梦一般。
ES6原生了代码引用功能,从根本上解决了js代码模块化的问题。

6.2 export和import语法。

6.2.1 使用export暴露模块。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function v1() { ... }
export {
  firstName,
  lastName,
  year,
  v1 as streamV1,
};
6.2.2 使用export default暴露模块
export default function foo() {
  console.log('foo');
}
//等同于
function foo() {
  console.log('foo');
}
export default foo;

每个模块只能有一个export default

6.2.3 使用import使用模块。
// 使用export default输出
export default function crc32() {
  // ...
}
// 针对export default的输入语法
import anyName from 'crc32';

// 使用普通export输出
export function crc32() {
  // ...
};
// 针对普通export的输入语法
import {crc32} from 'crc32';

上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法。

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。

6.4 ECMAScript6和CommonJS在模块化上的区别

参考:https://www.w3cschool.cn/ecmascript/ueqp1q5g.html

6.4.1 Node.js不支持ES6的模块语法

做这个比较主要是由于Node.js不支持ES6的import和export功能导致的。说来也奇怪,Node.js已经支持了92%的ES6语法,唯独对ES6这个最重要的模块功能不支持。这一点可以通过安装ES-Checker模块来查看Node.js对ES6的支持:

$ npm install -g es-checker
$ es-checker

结果如下:
file

6.4.2 Node.js使用CommonJS解决模块问题

在Node.js中默认集成了CommonJS,所以一般都用CommonJS来实现模块的输入输出。
CommonJS的模块语法是使用require和exports。
exports示例如下:

//  ./utils/util.js
var textHello = "Hello World!";

function addFun(a,b){
    return a+b;
}
function sayHello(){
    return "Say Hello!";
}

//完整写法:module.exports.在外面被引用的名字 = 模块内的名字
module.exports.textHello = textHello;
//简写:exports.在外面被引用的名字 = 模块内的名字
exports.addFun = addFun;
//在外面被引用的名字和模块内的名字可以不一样
exports.sayH = sayHello;

//上面三个export语句等同于下面一句
module.exports = {
    textHello:textHello,    //完整写法 - 在外面被引用的名字:模块内的名字
    addFun,                 //简写 - 在外面被引用的名字和模块内的名字相同,可以只写一个
    sayH:sayHello           //如在外面被引用的名字与模块内的名字不同,则必须用:方式
}

require示例如下:

// main.js
moduleUtil = require("./utils/util");
console.log(moduleUtil.textHello);
console.log(moduleUtil.addFun(2,3));
console.log(moduleUtil.sayH());
/*以上三行输出:
Hello World!
5
Say Hello!
*/

当然,如果你必须要在Node.js中使用ES6原生的import和export也是可以的,前提是必须借助Babel这类的转换器。

6.4.3 两者的区别

ES6模块加载的机制,与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。

CommonJS模块输出的是被输出值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个动态的只读引用。等到真的需要用到时,再到模块里面去取值,换句话说,ES6的输入有点像Unix系统的“符号连接”,原始值变了,import输入的值也会跟着变。

7. 属性和方法的简写

var name = "Tom";
var app = {
    name = name,
    run:function(){
        console.log(`${name} is running!`);
    }
}

等同于:

var name = "Tom";
var app = {
    name, //前提是属性名和属性值相同
    run(){
        console.log(`${name} is running!`);
    }
}

8. 箭头函数

箭头函数可以理解为是对匿名函数的一种缩写。但是与匿名函数不同的是,箭头函数里面的this指向的是上下文。

8.1 极简示例。

function (x) {
    return x * x;
}

等同于

(x)=>{return x * x;}

8.2 另一个示例。

setTimeout(function(){
    console.log("Hello!There!");
},1000);

等同于

setTimeout(()=>{
    console.log("Hello!There2!");
},1000);

ECMAScript6入坑

1. 前言

话说自己是从2015年左右从一线Web开发人员转为电商运营的。这段时间由于个人的求知欲不断暴涨,又开始接触Web开发。才发现,2015年真是Web技术的爆发之年,感觉这几年的电商从业让自己和Web开发都有些脱节了。
不过好在之前的Web开发基础打得够深、够牢固(怎么说我也是有着十几年Web开发经验的高材生),现在学习2015年大爆发之后的技术也不会太费力。最重要的是,2015年开始诞生的那些新技术经过5年的沉淀,已经被广泛的支持,有了很好的生态环境,现在学习感觉也不晚。
今天开始入坑ECMAScript6,走起!

2. ECMAScript6入门理解

网上关于ECMAScript6的解释性文章有很多,有兴趣的可以自己去百度里面查找。我对ECMAScript6理解其实就是一句话:Javascript的进化

Web前端技术的三要素分别是:HTML,CSS,Javascript。

  • HTML进化为了HTML5
  • CSS进化为了CSS3
  • 而Javascript则进化为了ECMAScript6

当前很多Javascript衍生技术比如Node.js,Vue.js,微信小程序开发等,都是基于Javascript语言。而对于我这个中间断档了几年的前端开发人员而言,初看Node.js这些技术代码的时候总觉得有些不可思议,后来才发现,Node.js这些技术使用的是ECMAScript6,所以呢,在学些这些新技术之前,把ECMAScript6的基础打好才是最重要的。

3. 一些名词解释

3.1 ES6和ES2015

ES6就是ECMAScript6的简写,由于是2015年正式发布的,也被成为ES2015,所以,ES6和ES2015是一个意思。

3.2 Babel和Traceur

和HTML5、CSS3类似,由于ES6标准的推出时间也不过5年,很多浏览器包括对ES6支持度非常高的Node.js都没有做到对ES6标准的100%支持。如果想要在开发中发挥ES6的全部能量(所有代码完全依照ES6标准编写),就需要Babel这个转码器工具。

Babel和Traceur都是被广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。

3.3 REPL

在Babel,Node.js等技术中,经常会提到REPL这个词。
REPL是英语:“Read-Eval-Print Loop”的缩写,简单的来说,就是一个简单的基于cmd(或者Linux的shell)命令行工具。你可以把简单的代码通过cmd输入进REPL,REPL则会输出代码运行结果。这个类工具一般只适合进行简单的代码块验证。

2020年微信小程序开发扫盲课程,第三篇:样式和布局

1. 尺寸单位。

1.1 rpx和px

微信小程序规定了特有的尺寸单位“rpx”。
原理是无视设备原有尺寸,将所有设备的屏幕宽度统一规定为750rpx。
比如,iPhone6的屏幕宽度像素为:375px,那么在iPhone6下,1rpx = 0.5px。
由于iPhone6的屏幕宽度与微信开发时的屏幕宽度换算为简单的1:2关系,所以实际开发时一般都使用iPhone6屏幕环境进行模拟开发。

1.2 vw和vh

vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。

  • 小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
  • 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh

2. 样式。

xsss样式和css样式的语法和运作方式非常相似,如果有css基础,xsss样式非常好理解。

2.1 样式写法。

和css一致:

class样式:.className{/*样式内容*/}
元素样式:elementName{/*样式内容*/}
内联样式:<element style="/*样式内容*/" />

2.2 常用属性。

基本上也和css一致:

color,font-size,background-color,border,width,height

2.3 样式导入。

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径。

3. Flex布局

微信小程序使用Flex布局。
有关Flex布局的详细说明请见:http://www.uyts.com/archives/319

2020年微信小程序开发扫盲课程,第二篇:代码结构介绍

1. 程序总体架构。

通过微信小程序开发工具新建一个项目后,会自动生成项目框架代码如下:
file

2. 全局文件。

全局文件的文件名是固定的,不可随意指定。
程序入口文件:app.js,app.json,app.wxss
项目配置文件:project.config.json
配置小程序及其页面是否允许被微信索引:sitemap.json
公共方法和变量:utils/util.js

3. pages文件夹下的目录结构。

pages文件夹的名字是可以随便指定的,但是习惯上使用pages。
pages下面存放的是小程序里面的页面文件,一个小程序页面由四个“同名但不同扩展名”的文件组成,这个四个文件又被放在一个与这四个文件同名的文件夹中。
页面文件夹与四个对应的页面文件可以手工新建,也可以通过微信新建page的方式自动生成:
file

4个页面的运作方式和普通网页HTML+CSS+JS的运行方式非常相似,具体如下:

4.1 .js文件

负责实现页面逻辑。

4.2 .json文件

负责设置标题栏和一些状态参数。

4.3 .wxml文件

页面显示内容。类似HTML文件。

4.4 .wxss文件

负责设置页面排版。类似CSS文件。

2020年微信小程序开发扫盲课程,第一篇:开发准备

1. 前言

1.1 为啥标题要加个2020呢?

因为我是从2020年2月开始学的微信小程序开发,微信的生态时刻都在更新,用时间来标识一下以便让读者能够更好地判断本文是否适合。

1.2 微信小程序的语言逻辑和Vue.js有点像

还好我是先学了些Vue.js,开始做微信小程序的时候,发现代码结构和语法和Vue.js有很多相似的地方。
不过即使你没有学过Vue.js,只要你懂Javascript,一样可以做微信小程序开发。

2. 注册微信小程序账号

2.1 如果你没有微信【服务号】【订阅号】账号

进入微信公众平台:https://mp.weixin.qq.com
注册一个微信小程序开发账号。
file
然后
file
再然后
file

2.2 如果你有微信【服务号】【订阅号】账号

可以直接登陆【服务号】或【订阅号】账号,然后在该账号下面添加微信小程序账号。

3. 填写小程序基本信息。

file

4. 下载微信小程序开发工具

点击上方【文档】
file

点击上方【工具】然后选择合适的版本下载:
file

5. 使用微信小程序开发工具

5.1 安装、登陆程序

正常安装开发工具软件,安装完毕后打开,默认出现下面的登录框:
file
用你注册小程序时认证的微信号扫描二维码即可登陆进入软件开发环境。

5.2 添加新的小程序项目

file
然后看到下面的页面:
file
上面创建小程序的时候填写的AppID要到微信公众平台里面查找:
file
点击【创建】按钮后,进入开发环境:
file

Flex布局语法

前言

本文摘自:https://www.runoob.com/w3cnote/flex-grammar.html

网页布局(layout)是CSS的一个重点应用。
file

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

file

Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。

1. Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

2. 基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

file

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

3. 容器的属性

以下6个属性设置在容器上。

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

file
它可能有4个值:

  1. row(默认值):主轴为水平方向,起点在左端。
  2. row-reverse:主轴为水平方向,起点在右端。
  3. column:主轴为垂直方向,起点在上沿。
  4. column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

file
它可能取三个值:

  1. nowrap(默认):不换行。
    file
  2. wrap:换行,第一行在上方。
    file
  3. wrap-reverse:换行,第一行在下方。
    file

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

file

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右:

  1. flex-start(默认值):左对齐
  2. flex-end:右对齐
  3. center: 居中
  4. space-between:两端对齐,项目之间的间隔都相等。
  5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

file
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下:

  1. flex-start:交叉轴的起点对齐。
  2. flex-end:交叉轴的终点对齐。
  3. center:交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

file

该属性可能取6个值:

  1. flex-start:与交叉轴的起点对齐。
  2. flex-end:与交叉轴的终点对齐。
  3. center:与交叉轴的中点对齐。
  4. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  5. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch(默认值):轴线占满整个交叉轴。

4.项目的属性

以下6个属性设置在项目上:

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: <integer>;
}

file

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

file
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

file
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

file
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

Python查询MySQL数据库并将查询结果输出到csv文件

1. 安装Python链接MySQL插件。

$ pip3 install PyMySQL

2. 完整代码如下:

import os
import pymysql

sku = []

#定义递归函数findPNG,寻找当前目录下所有png类型的文件
def findPNG(sku,dir):
    for ffName in os.listdir(dir):
        if os.path.isfile(dir+"/"+ffName):
            if ffName.split(".")[1] == "png":
                sku.append(ffName.split(".")[0]);
        elif os.path.isdir(dir+"/"+ffName):
            findPNG(sku,dir+"/"+ffName)
findPNG(sku,"./")

h = open("./ProductsInformation.csv","a")
db = pymysql.connect("地址","用户","密码","数据库名" )
cursor = db.cursor()

for s in sku:
    SQL = '''SELECT t1.model,t2.name,t2.tag
             FROM `product` AS t1, `product_description` AS t2
             WHERE t1.product_id = t2.product_id AND t1.model ="{}"'''.format(s)
    cursor.execute(SQL)
    data = cursor.fetchone()
    if data:
        for d in data:
            h.write('"'+d+'",')
        h.write('\n')
    else:
        print(s)

h.close()
db.close()

通过Vue-cli创建Vue项目流程

0 .Vue.js,Vue-cli,Node.js的理解。

一个js文件就是Vue.js

项目中,通过<script>标签引入一个vue.js文件,这就是我们理解的Vue.js。

命令行里运行vue就是Vue-cli

如果想要在cmd里面运行vue命令,那么就需要安装vue-cli工具。

Node.js就是Javascript的JVM

Node.js就好像是Javascript世界里面的JVM。
vue-cli工具是通过npm的安装的。

1. 安装Node.js

Node.js环境具体安装方法见:http://www.uyts.com/archives/278

2. 安装vue-cli

vue-cli在vue官网上叫做“脚手架工具”,其实就是个vue的客户端(client)。安装命令如下:

npm install -g vue-cli  //这是npm命令

3. 基于webpack-simple初始化项目

当然,你可以不基于webpack-simple初始化项目,通过vue list命令可以看到,有以下几种初始化方式备选:
file
通过命令行切换到你的项目创建目录,运行如下命名:

vue init webpack-simple my-project //这是vue命令

这时,基于webpack-simple创建的项目就建好了。

4. 安装相关的依赖。

第三步只是创建了项目骨架,在你实际运行这个项目前,还需要根据自动生成的package.json文件,安装相关的依赖,安装依赖命令如下:

cd my-project //先进到项目目录。
npm install //或者cnpm install,这是npm命令

5. 运行项目

npm run dev //这也是npm命令,npm run命令将会运行项目中的package.json文件中的script部分内容。run后面跟dev,就是运行package.json文件中script部分的dev部分内容。

Vue.js组件学习(4)高级篇—单文件组件

1. 单文件组件的意义。

在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。

2. 单文件组建的使用环境搭建。

在本机安装:

  • npm(Node.js)
  • vue-cli
  • webpack

3. 单文件组件的结构。

<template>
</template>

<script>
</script>

<style>
</style>

4. 第一个单文件组件的例子。

4.1 新建一个Vue项目

可以通过vue命令行创建:

vue init webpack 项目名

也可以通过HBuilder创建:

4.2 创建完的项目目录结构如下:

file

  • node_modules:依赖文件
  • public:静态文件
  • src
    • assets:资源文件
    • components:单文件组件文件
    • App.vue:项目入口文件
    • main.js:主js文件

4.3 新建test.vue

在components下新建test.vue文件,内容如下:

<template>
    <button>{{btncontent}}</button>
</template>

<script>
    export default{
        props:["btncontent"],
        data:function(){
            return {
            }
        }
    }
</script>

<style>
</style>

4.4 修改App.vue

<template>
  <div id="app">
    <SuperButton btncontent="点我吧!"></SuperButton>
  </div>
</template>

<script>
import SuperButton from './components/test.vue'

export default {
  components: {
    SuperButton
  }
}
</script>

<style>
</style>

这样就可以了!

Vue.js组件学习(3)升级篇

1. 组件的命名规则

1.1 两种命名可选方案

使用kebab-case(短横线分隔命名)方法命名

Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>

使用PascalCase(驼峰命名法)方法命名

Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name><MyComponentName> 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

1.2 强烈建议使用kebab-case命名法

命名组件的时候,强烈推荐使用kebab-case方法命名。这样可以避免和HTML既有元素相冲突。

2. 组件中的props命名规则

HTML中的attribute名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时,camelCase (驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名:

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

如果你使用字符串模板,那么这个限制就不存在了。

3. 组建的全局注册和局部注册

3.1 全局注册和使用。

Vue.component("Com-Name",{...});

全局注册后,任何新创建的Vue根实例id对应的模板中都可以直接使用。

3.2 局部注册和使用

var newCom = {...}

局部注册后,如果需要使用,则需要在创建的Vue的components选项中先定义你想要使用的组件。

var vm = new Vue({
el:"app",
components:{
    'new-com':newCom
}
data:{}
});