1 <!-- 定义唯一根元素div -->
2 <div id="app">{{name}}</div>
3 <script>
4 var vm = new Vue({
5   el: '#app', // 通过el与div元素绑定
6   data: {name: 'Vue实例创建成功！'}
7 })
8 <script>

2.2.data初始数据

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。

案例展示：在data中定义name的初始数据为“定义初始数据”。

 1  <div id="app">
 2     <p>{{name}}</p>
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       data: {
 8         name: '定义初始数据'
 9       }
10     })
11   console.log(vm.$data.name)
12   console.log(vm.name)
13   </script>

2.3methods基本概念

• pmethods属性用来定义方法，通过Vue实例可以直接访问这些方法
• p在定义的方法中，this指向Vue实例本身
• p定义在methods属性中的方法可以作为页面中的事件处理方法使用
• p当事件触发后，执行相应的事件处理方法

案例展示：

1. 编写初始页面结构。

2. 在methods选项中定义showInfo()方法，实现页面内容的更新。

   1

   2 3 @click="showInfo">请单击 4

   {{msg}}

   5
   
   6                     

单击页面中的“请单击”按钮，更新页面内容。

2.4computed计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

案例展示：根据商品单价和数量计算出商品的总价格。

1. 首先编写总价格页面结构。

2. 在computed中定义totalPrice函数返回计算后的总价格。

   1

   2

   总价格：{{totalPrice}}

   3

   单价：{{price}}

   4

   数量：{{num}}

   5

   6 @click="num == 0 ? 0 : num--">减少数量 7 @click="num++">增加数量 8

   9
   
   10

2.5watch状态监听

案例展示：通过watch获取cityName的新值和旧值。

1. 首先定义vm实例对象。

2. 在Vue配置对象中定义watch监听cityName属性。

   1

   2 3 4
   
   5

在浏览器查看运行效果。

2.6filters过滤器

在页面中直接操作数据，返回最终结果。

案例展示：在插值表达式中使用filters过滤器，将小写字母转换成大写字母。

1. 编写初始页面结构。

2. 首先创建vm实例对象，并定义message初始数据。

3. 在vm中定义filters过滤器，并在filters中定义toUpcase()方法实现小写字母转大写字母。

4. 编写页面结构。

5. 定义vm实例对象。

6. 在vm实例对象中定义filters，并在filters中定义formatId()方法实现属性的过滤。

   1

   2

   {{message | toUpcase}}

   3
   
   4

在v-bind属性绑定中使用filters过滤器。

三、Vue数据绑定

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

案例展示：通过绑定data中的类名实现元素的样式。

1. 通过v-bind绑定类名，并设置类名的值为{box}和{inner}。

2. 在vm实例的data中定义box和inner的属性值分别是box和inner。

   1
   2 3 4 5 6 19 20 21 22

   23

   我是box 24

   我是inner1

   25

   我是inner2

   26

   27
   28 37 38

Vue官网（API — Vue.js (vuejs.org)）介绍的内置指令有14个，这里只介绍其中的8种常用指令。

2.1v-model双向数据绑定

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

案例展示：实现表单元素双向数据绑定。

 1 <div id="app">
 2     <input type="text"  v-model="msg">
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       data: {
 8         msg: 'v-model指令'
 9       }
10     })
11   </script>

2.2v-on监听事件

v-on是事件监听指令，直接与事件类型配合使用

案例实现：在vm实例的methods中定义事件处理函数showInfo()。

 1  <div id="app">
 2     <p>{{msg}}</p>
 3     <button v-on:click="showInfo">请单击</button>
 4   </div>
 5   <script>
 6     var vm = new Vue({
 7       el: '#app',
 8       data: {msg: '请单击按钮查看内容'},
 9       methods: {
10         showInfo () {
11           this.msg = '我是v-on指令'
12         }
13       }
14     })
15   </script>

单击“请单击”按钮，页面中的内容发生更新。

2.3v-bind单向数据绑定

v-bind可以实现属性单向数据绑定

案例实现：将data中的msg初始数据绑定到页面中 。

 1  <div id="app">
 2     <input v-bind:value="msg">
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       data: {
 8         msg: '我是v-bind'
 9       }
10     })
11   </script>

2.4v-text插入文本内容

v-text是在DOM元素内部插入文本内容

案例展示：在vm实例的data中定义msg初始数据。

 1  <div id="app">
 2     <p v-text="msg"></p>
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       data: {
 8         msg: '我是v-text'
 9       }
10     })
11   </script>

2.5v-html插入包含HTML的内容

v-html是在DOM元素内部插入HTML标签内容

案例实现：将msg初始数据绑定到页面中。

 1 <div id="app">
 2     <div v-html="msg"></div>
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       data: {
 8         msg: '<h2>我是v-html</h2>'
 9       }
10     })
11   </script>

2.6v-for列表渲染

v-for可以实现页面列表渲染，常用来循环数组

案例实现：创建vm实例并在data中定义数组list。

 1 <div id="app">
 2     <div v-for="(item,key) in list" data-id="key">
 3       索引是：{{key}}，元素内容是：{{item}}
 4     </div>
 5   </div>
 6   <script>
 7     var vm = new Vue({
 8       el: '#app',
 9       data: {
10         list: [1, 2, 3]
11       }
12     })
13   </script>

2.7v-if条件渲染和v-show显示隐藏

v-if用来控制元素显示或隐藏，属性为布尔值

案例实现： 创建vm实例并在data中定义isShow属性。

 1 <div id="app">
 2     <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
 3     <button @click="isShow=!isShow">显示/隐藏</button>
 4   </div>
 5   <script>
 6     var vm = new Vue({
 7       el: '#app',
 8       data: {
 9         isShow: true
10       }
11     })
12   </script>

单击“显示/隐藏”按钮，控值“我是v-if”的显示和隐藏。

四、Vue事件处理

v-on绑定事件：在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。

案列展示：使用按键enter修饰符监听按键

1. 在页面中定义表单元素input输入框。

2. 创建vm实例对象并在methods中定义submit()事件处理函数。

3. 在浏览器中查看运行效果。

   1

   2 3
   
   4

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

2.1 .stop阻止事件冒泡

在前端开发中，复杂的页面结构需要很多事件来完成交互行为

默认的事件传递方式是冒泡，同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止事件冒泡行为

案例展示：通过.stop修饰符实现阻止事件冒泡。

1. 在div元素内部定义按钮，分别为“事件冒泡”和“阻止事件冒泡”。

2. 创建vm实例并定义methods选项。

3. 在methods中定义doParent()和doThis事件处理函数。

   1

   2

   3 事件冒泡 4 阻止事件冒泡 5

   
   6
   
   7

2.2.prevent阻止默认事件行为

HTML标签具有自身特性，例如，标签被单击时会自动跳转。在实际开发中，如果标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止标签的默认行为。

定义a标签，并设置href属性值为“https://www.baidu.com”。

1  <div id="app">
2     <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
3     <a href="https://www.baidu.com">不阻止默认行为</a>
4   </div>
5   <script>
6     var vm = new Vue({
7       el: '#app'
8     })
9   </script>

2.3.capture事件捕获

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

1. 编写页面结构代码。

2. 创建vm实例对象，并定义methods选项。

3. 在methods中分别定义doParent()和doThis事件处理函数。

   1

   2

   3 事件捕获 4

   
   5
   
   6

2.4.self将事件绑定到自身，只有自身才能触发

事件修饰符.self用来实现只有DOM元素本身会触发事件。

1. 定义页面结构代码，并绑定单击事件。

2. 在methods中定义doParent()和doThis()事件处理函数。

   1
   2 3 4 5 6 10 11 12 13

   14

   a 15

   b

   16

   17

   c 18

   d

   19

   20
   21 34 35

2.5.once事件只触发一次

只触发一次事件处理函数

 1  <div id="app">
 2     <button v-on:click.once="doThis">只执行一次</button>
 3   </div>
 4   <script>
 5     var vm = new Vue({
 6       el: '#app',
 7       methods: {
 8         doThis () {
 9           console.log('我是当前元素的单击事件且只执行一次')
10         }
11       }
12     })
13   </script>

五、Vue扩展组件

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件特性：

• 能够减少重复代码的编写，提高开发效率。
• 降低代码之间的耦合程度，使项目更易维护和管理。
• 根据业务逻辑实现复杂的项目功能。

案例展示：在根标签中，通过标签定义组件页面结构。

注册计数器组件。

 1 <div id="app">
 2     <my-component></my-component>
 3     <my-component></my-component>
 4     <my-component></my-component>
 5   </div>
 6   <script>
 7     Vue.component('my-component', {
 8       data () {
 9         return {
10           count: 0
11         }
12       },
13       template: '<button v-on:click="count++">被单击{{count}}次</button>'
14     })
15     var vm = new Vue({ el: '#app' })
16   </script>

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

1. 定义根标签。

2. 设置components选项中myComponent的属性值为com1。

   1

   2 3
   
   4

Vue提供了