diff --git a/03-JavaScript基础/06-对象、作用域和this.md b/03-JavaScript基础/06-对象、作用域和this.md index ef82627..d31c390 100644 --- a/03-JavaScript基础/06-对象、作用域和this.md +++ b/03-JavaScript基础/06-对象、作用域和this.md @@ -260,6 +260,7 @@ var name = "全局的name属性"; //obj.sayName(); + //以函数形式调用，this是window //fun(); //可以理解成 window.fun() diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md index 3ddeb7d..28840c4 100644 --- a/20-前端综合/2018年-前端日记.md +++ b/20-前端综合/2018年-前端日记.md @@ -59,6 +59,32 @@ - npm命令中，--save 和 --save-dev的区别。参考链接： +### 2018-05-07 + +- Vue组件的注册 + +有一种组件注册的方式是 Vue+jQuery： + +```javascript +Vue.component('my-div', $.extend({ + props:[], + methods:{ + + }, + filters:{ + + } + +}), vueTpl.subs.myDiv) +``` + + +根据 zqc 的建议，不一定要使用`$.extend()`，还可以使用`object.assign()`。 + +### 2018-05-08 + +- sku的概念 + diff --git a/20-前端综合/前端中的一些概念.md b/20-前端综合/前端中的一些概念.md new file mode 100644 index 0000000..16b7cb8 --- /dev/null +++ b/20-前端综合/前端中的一些概念.md @@ -0,0 +1,14 @@ +前端中的一些概念.md + + + +## SPU 和 SKU + +### SKU + +SKU（stock keeping unit）：库存量单位。 SKU是物理上不可分割的最小库存单元。 + +比如说，同一款手机，颜色有白色、红色，那么，白色和红色的sku是不一样的。 + +单品：对一种商品而言，当其品牌、型号、配置、等级、花色、包装容量、单位、生产日期、保质期、用途、价格、产地等属性中任一属性与其他商品存在不同时，可称为一个单品。 + diff --git a/21-Vue基础/01-01.Vue基础语法：系统指令.md b/21-Vue基础/01-01.Vue的系统指令.md similarity index 60% rename from 21-Vue基础/01-01.Vue基础语法：系统指令.md rename to 21-Vue基础/01-01.Vue的系统指令.md index 35b094f..7d0e537 100644 --- a/21-Vue基础/01-01.Vue基础语法：系统指令.md +++ b/21-Vue基础/01-01.Vue的系统指令.md @@ -3,6 +3,21 @@ > 以下是正文。 + +## 本文主要内容 + +- 插值表达式 {{}} + +- v-cloak + +- v-text + +- v-html + +- v-bind + +- v-on + ## Vue初体验 新建一个空的项目，引入vue.js文件。写如下代码： @@ -285,9 +300,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： 20180506_2330.png -## v-bind +## v-bind：属性绑定机制 -`v-bind`：用于绑定属性。 +`v-bind`：用于绑定**属性**。 比如说： @@ -357,65 +372,10 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： ![](http://img.smyhvae.com/20180313_1745.png) -## v-model：双向数据绑定 -上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。 +## v-on：事件绑定机制 -可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 - -代码举例如下： - -```html - - - - - Document - - - -
- -
- - - - - -
-
- - - - - -``` - - -此时，便可实现我们刚刚要求的双向数据绑定的效果。 - - - - - -## v-on：注册事件 - -### v-on 的用法举例 +### `v-on:click`：点击事件 ```html @@ -446,7 +406,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： data: { //data就是MVVM中的 module name: 'smyhvae' }, + //注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改 + //这个 methods 属性中定义了当前Vue实例所有可用的方法 methods: { change: function() { //上面的button按钮的点击事件 this.name += '1'; @@ -461,7 +423,6 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： 上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。 - ### `v-on`的简写形式 例如： @@ -479,6 +440,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： ### v-on的常用事件 +v-on 提供了click 事件，也提供了一些其他的事件。 + + - v-on:click - v-on:keydown @@ -589,250 +553,188 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： 上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。 +## 举例：文字滚动显示（跑马灯效果） -## v-for：for循环 +我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。 -**作用**：根据数组中的元素遍历指定模板内容生成内容。 +**文字滚动显示的思路**： -### 引入 +（1）每次点击按钮后，拿到 msg 字符串，然后调用字符串的`substring`来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。这就实现了滚动的效果。 +（2）为了实现文字**自动连续滚动**的效果，需要把步骤（1）中点击按钮的操作，放到**定时器**中去。 -比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值： +我们先来看一下 点击事件里的代码改怎么写。 +**步骤 1**：每次点击按钮，字符串就滚动一次。代码如下： -```html - -
- -
- - - ``` -效果： +**步骤2**：给上面的操作添加定时器。代码如下： -![](http://img.smyhvae.com/20180329_1713.png) - -为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了： - - -```html - -
- -
- - - ``` -接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法 +上面的代码中，我们发现，如果在定时器中直接使用this，这个this指向的是window。为了解决这个问题，我们是通过`_this`来解决了这个问题。 +另外，我们还可以利用箭头函数来解决this指向的问题，因为箭头函数总的this指向，会继承外层函数的this指向。如下。 -### 数组的遍历赋值 +**步骤2的改进版**：用箭头函数来改进定时器，解决this指向的问题。代码如下： -针对下面这样的数组： - - -```html - ``` -将数组中的**值**赋给li： +**步骤3**：停止定时器。如下： -```html -
  • {{item}}
    • -``` +我们还需要加一个按钮，点击按钮后，停止文字滚动。也就是停止定时器。 +提示：我们最好把定时器的id放在全局的位置（放到data里），这样的话，开启定时器的方法和停止定时器的方法，都可以同时访问到这个定时器。 -将数组中的**值和index**赋给li： +代码如下： - -```html - -
  • 值：{{item}} --- 索引：{{index}}
    • -``` - - -效果如下： - -![](http://img.smyhvae.com/20180329_1856.png) - - - -### 对象的遍历赋值 - - -针对下面这样的对象： - -```html - ``` -将上面的`obj1`对象的数据赋值给li，写法如下： +**【重要】步骤4**：一开始的时候，还需要判断是否已经存在定时器。如下： -```html - -
    - -
    - +- **停止定时器的时候，虽然定时器停止了，但定时器并不为 null**。因此，最后我们还需要手动将定时器设置为null。这样，才能恢复到最初始的状态。 -``` +**完整版代码**： -效果如下： - -![](http://img.smyhvae.com/20180329_1850.png) - - -## v-if：设置元素的显示和隐藏 - -**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。 - -在切换时，元素和它的数据绑定会被销毁并重建。 - -举例如下：（点击按钮时，切换和隐藏盒子） +针对上面的四个步骤，为了实现这个案例，完整版代码如下： ```html - - Document - + + + + Document -
    - -
    我是盒子
    -
    - +
    +

    {{msg}}

    + + - +
    + + + + ``` -效果如下： -![](http://img.smyhvae.com/20180329_1920.gif) +**上方代码的总结**： +- 在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过`this`来访问。这里的**this指向的是Vue的实例对象**。 -## v-show：设置元素的显示和隐藏 +- VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。这样做 的好处是：**程序员只需要关心数据，不需要考虑如何重新渲染DOM页面；减少DOM操作**。 -**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。 - -举例如下：（点击按钮时，切换和隐藏盒子） - -我们直接把上一段代码中的`v-if`改成`v-show`就可以了： - -```html - - - - - - Document - - - - -
    - -
    我是盒子
    -
    - - - - - - -``` - -效果如下： - -![](http://img.smyhvae.com/20180329_2040.gif) - -**v-if和v-show的区别**： - -`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。 +- 在调用定时器 id 的时候，代码是`this.intervalId`，这个`this`一定不要漏掉了。 ## 我的公众号 diff --git a/21-Vue基础/01-02.Vue的系统指令(二).md b/21-Vue基础/01-02.Vue的系统指令(二).md new file mode 100644 index 0000000..c38c5f5 --- /dev/null +++ b/21-Vue基础/01-02.Vue的系统指令(二).md @@ -0,0 +1,301 @@ + + + +## v-model：双向数据绑定 + +上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。 + +可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 + +代码举例如下： + +```html + + + + + Document + + + +
    + +
    + + + + + +
    +
    + + + + + +``` + + +此时，便可实现我们刚刚要求的双向数据绑定的效果。 + + + +## v-for：for循环 + +**作用**：根据数组中的元素遍历指定模板内容生成内容。 + +### 引入 + +比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值： + + +```html + +
    + +
    + + + +``` + +效果： + +![](http://img.smyhvae.com/20180329_1713.png) + +为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了： + + +```html + +
    + +
    + + + +``` + +接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法 + + +### 数组的遍历赋值 + +针对下面这样的数组： + + +```html + +``` + + +将数组中的**值**赋给li： + +```html +
  • {{item}}
    • +``` + + +将数组中的**值和index**赋给li： + + +```html + +
  • 值：{{item}} --- 索引：{{index}}
    • +``` + + +效果如下： + +![](http://img.smyhvae.com/20180329_1856.png) + + + +### 对象的遍历赋值 + + +针对下面这样的对象： + +```html + +``` + +将上面的`obj1`对象的数据赋值给li，写法如下： + + +```html + +
    + +
    + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180329_1850.png) + + +## v-if：设置元素的显示和隐藏 + +**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。 + +在切换时，元素和它的数据绑定会被销毁并重建。 + +举例如下：（点击按钮时，切换和隐藏盒子） + +```html + + + + + + Document + + + + +
    + +
    我是盒子
    +
    + + + + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180329_1920.gif) + + +## v-show：设置元素的显示和隐藏 + +**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。 + +举例如下：（点击按钮时，切换和隐藏盒子） + +我们直接把上一段代码中的`v-if`改成`v-show`就可以了： + +```html + + + + + + Document + + + + +
    + +
    我是盒子
    +
    + + + + + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180329_2040.gif) + +**v-if和v-show的区别**： + +`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。 + diff --git a/21-Vue基础/01-02.Vue的举例：列表功能.md b/21-Vue基础/01-04.Vue的举例：列表功能.md similarity index 100% rename from 21-Vue基础/01-02.Vue的举例：列表功能.md rename to 21-Vue基础/01-04.Vue的举例：列表功能.md