diff --git a/21-Vue基础/01-01.Vue的系统指令.md b/21-Vue基础/01-01.Vue的系统指令.md index 7d0e537..5d7ef04 100644 --- a/21-Vue基础/01-01.Vue的系统指令.md +++ b/21-Vue基础/01-01.Vue的系统指令.md @@ -18,6 +18,13 @@ - v-on +- 举例：文字滚动显示（跑马灯效果） + +- v-on的事件修饰符 + + + + ## Vue初体验 新建一个空的项目，引入vue.js文件。写如下代码： @@ -457,102 +464,6 @@ v-on 提供了click 事件，也提供了一些其他的事件。 - .... -### v-on的事件修饰符 - -`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下： - -- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。 - -- `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。 - -- `.capture` 添加事件监听器时，使用 capture 模式。 - -- `.self` 只有当事件是从侦听器绑定的元素本身触发时，才触发回调。 - -- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。 - -- ``.native` 监听组件根元素的原生事件。 - -写法示范： - -```html - - - - - - - - - - - - - - - - -
- - - -``` - - -**举例**：（`.prevent`的用法举例） - -现在有一个form表单： - -```html -
- -
-``` - - -我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。 - -现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下： - -```html - - - - - - Document - - - - -
- -
- - -
- -
- - - - - -``` - -上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。 - ## 举例：文字滚动显示（跑马灯效果） 我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。 @@ -714,8 +625,9 @@ v-on 提供了click 事件，也提供了一些其他的事件。 }, stopMethod: function () { - //停止定时器：点击按钮后，停止字符串的滚动 + // 停止定时器：点击按钮后，停止字符串的滚动 clearInterval(this.intervalId); + // 每当清除了定时器之后，需要重新把 intervalId 置为 null this.intervalId = null; } } @@ -745,5 +657,3 @@ v-on 提供了click 事件，也提供了一些其他的事件。 ![](http://img.smyhvae.com/2016040102.jpg) - - diff --git a/21-Vue基础/01-02.v-on的事件修饰符.md b/21-Vue基础/01-02.v-on的事件修饰符.md new file mode 100644 index 0000000..a846164 --- /dev/null +++ b/21-Vue基础/01-02.v-on的事件修饰符.md @@ -0,0 +1,263 @@ + +## v-on的事件修饰符 + +### v-on的常见事件修饰符 + +`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下： + +- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。 + +- `.prevent` 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。 + +- `.capture` 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。 + +- `.self` 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。 + +- `.once` 事件只触发一次。 + +- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。 + +- ``.native` 监听组件根元素的原生事件。 + +PS：一个事件，允许同时使用多个事件修饰符。 + +写法示范： + +```html + + + + + + + + + + + + + + + + +
+ + + +``` + + +### `.stop`的举例 + +我们来看下面这个例子： + +```html + + + + + + + + Document + + + + + +
+
+
+
+
+
+ + + + + +``` + +上方代码中，存在冒泡的现象，父标签中包含了一个子标签。当点击子标签时，父标签也会被触发。打印顺序是： + +``` + child 被点击了 + father 被点击了 +``` + +那么问题来了，如果我不想让子标签的点击事件冒泡到父亲，该怎么做呢？办法是：给子标签加一个**事件修饰符**`.stop`，阻止冒泡。代码如下： + +```html +
+``` + +阻止冒泡后，当点击子标签时，打印结果是： + +``` + child 被点击了 +``` + +PS：我发现一个有意思的现象。上方的这行代码中，如果把`.stop`改为`:stop`，造成的现象是，父标签被触发了，而子标签没有被触发。 + +### `.capture`举例 + +`.capture`：触发事件时，采用捕获的形式，而不是冒泡的形式。 + +还是采用上面的例子：当按钮点击时，如果想要采取捕获的方式，而不是冒泡的方式，办法是：可以直接在父标签上加事件修饰符`.capture`。代码如下： + +```html +
+``` + +当点击子标签时，打印结果是： + +``` + father 被点击了 + child 被点击了 +``` + + +### `.prevent`的举例1 + +比如说，超链接``默认有跳转行为，那我可以通过事件修饰符`.prevent`阻止这种跳转行为。 + + +```html + + + + + + + + Document + + + + + + + + + +``` + +上方代码中： + +- 如果去掉`.prevent`，点击按钮后，既会打印log，又会跳转到百度页面。 + +- 现在加上了`.prevent`，就只会打印loeg，不会跳转到百度页面。 + + + +### `.prevent`的举例2 + +现在有一个form表单： + +```html +
+ +
+``` + + +我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。 + +现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下： + +```html + + + + + + Document + + + + +
+ +
+ + +
+ +
+ + + + + +``` + +上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。 + + + +### `.self`举例 + +- `.self` 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。 + +我们知道，在事件触发机制中，当点击子标签时，父标签会通过冒泡的形式被触发（父标签本身并没有被点击）。可如果我给父标签的点击事件设置`.self`修饰符，达到的效果是：子标签的点击事件不会再冒泡到父标签了，只有点击符标签本身，父标签的事件才会被触发。代码如下： + +```html +
+``` + + +**疑问**：既然`.stop`和`.self`都可以阻止冒泡，那二者有什么区别呢？区别在于：前者能够阻止整个冒泡行为，而后者只能阻止自己身上的冒泡行为。 + + diff --git a/21-Vue基础/01-02.Vue的系统指令(二).md b/21-Vue基础/01-03.Vue的系统指令(二).md similarity index 87% rename from 21-Vue基础/01-02.Vue的系统指令(二).md rename to 21-Vue基础/01-03.Vue的系统指令(二).md index c38c5f5..57a2268 100644 --- a/21-Vue基础/01-02.Vue的系统指令(二).md +++ b/21-Vue基础/01-03.Vue的系统指令(二).md @@ -1,11 +1,19 @@ - ## v-model：双向数据绑定 -上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。 +之前的文章里，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，``标签里的内容会自动更新。 + +可我现在要做的是：我在``标签里修改内容，要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 + +**区别**： + +- v-bind：只能实现数据的**单向**绑定，从 M 自动绑定到 V。 + +- v-model：只有`v-model`才能实现**双向**数据绑定。注意，v-model 后面不需要跟冒号， + +**注意**：v-model 只能运用在**表单元素**中。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。 -可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 代码举例如下： @@ -21,6 +29,7 @@
+ diff --git a/21-Vue基础/01-03.过滤器.md b/21-Vue基础/01-04.过滤器.md similarity index 100% rename from 21-Vue基础/01-03.过滤器.md rename to 21-Vue基础/01-04.过滤器.md