2.2 实例及选项

Vue.js应用的创建很简单，我们通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用。创建Vue实例的代码如下。

---

new Vue({ 
            el:"#app", 
            data:{ 
                 name:'zhonghui', 
                 age:30, 
                 msg:'你好,中慧科技。' 
             } 
}) 
//Vue实例赋值给变量vm 
var vm=new Vue({ 
              el:"#app", 
              data:{ 
                   name:'zhonghui', 
 10 第2章 
第一个Vue.js应用 
                   age:30, 
                   msg:'你好,中慧科技。' 
             } 
}) 

---

每个Vue应用都是从使用Vue函数创建一个新的Vue实例开始的。代码中的Vue实例也可以赋值给一个变量vm。通过Vue.js提供的$data属性来获取这个实例化对象的数据，如vm.$data、vm.$el等。还可以使用vm.$data.name来访问实例化对象中的name属性的值。

每一个Vue实例都会有一些参数选项，必不可少的一个选项就是el。el用于指定一个页面中已经存在的DOM元素来挂载Vue实例。上例中指定的挂载容器是id为app的块级容器，通常为div块级容器。el选项的渲染如图2-5所示。

Vue实例中还有一些重要的选项，下面来讲解这些选项。

2.2.1 模板

模板（template）选项可以将其指定的模板内容渲染el选项所挂载的位置，原来的div标签会被替换为模板中的p标签。template选项的渲染如图2-6所示。

---

var app=new Vue({ 
                  el:'#app', 
                  template:"<p>template选项渲染的内容</p>", 
              }) 

---

需要注意的是，template选项中的标签必须包含在一个根节点标签内，否则会报错。例如，上述代码写成时，浏览器渲染时会报错，错误信息如图2-7所示。

---

template:"<p>template选项渲染的内容</p><p>第二个标签</p>" 

---

正确的写法是把两个p标签包含在一个根节点内，即

---

template:"<div><p>template选项渲染的内容</p><p>11</p></div>" 

---

2.2.2 数据

数据（data）选项声明页面中可以使用的或者需要双向绑定的数据。通常，所有页面中需要用到的数据都会在data内声明，以避免数据因散落在业务逻辑中而难以维护，真正实现数据和视图的分离。data选项中的数据会在挂载的容器内或模板中，通过一种特殊的语法（双大括号“{{}}”）使用，代码如下。

---

<div id="app"> 
            {{msg}} 
        </div> 
        <script type="text/javascript"> 
             var app=new Vue({ 
                  el:'#app', 
                  template:"<p>template选项渲染的内容{{msg}}</p>", 
                  data:{ 
                       name:'zhonghui', 
                       age:30, 
                       msg:'你好,中慧科技。' 
                  } 
             }) 
        </script> 

---

2.2.3 方法

方法（methods）选项中定义的是页面或模板中需要调用的一些方法，这些方法会执行一些业务逻辑。前文介绍了在Vue构造函数外部可以使用vm.$data.属性名访问data中的数据，而在methods中，开发者可以直接使用this属性名访问data中的数据。其中，this表示的就是Vue实例对象，代码如下。

---

<div id="app">{{say()}} ，{{msg}}</div> 
         <script src="../js/Vue.js"></script> 
         <script type="text/javascript"> 
               //创建Vue实例 
               var vm = new Vue({ 
                    el: '#app', 
                    data: { /Vue中的ViewModel数据 
                          name: '中慧科技', 
                          age: 30, 
                          msg: '欢迎你!' 
                    }, 
                    methods: { 
                          say: function() { 
                               return "你好," + this.name 
                          } 
                    } 
               }); 
         </script> 

---

在上述代码中，methods选项定义了方法say()，根容器app通过“{{say()}}”调用了say方法。运行后，页面数据显示效果如图2-8所示。

2.2.4 计算属性

计算属性（computed）选项中的数据也可以和data选项中的数据一样进行渲染，但是数据是通过函数返回的。计算属性中的值会根据data中数据的变化进行同步更新，代码如下。

---

<div id="app"> 
<input type="text" name="" id="" value="" placeholder="请输入年龄..." v-model="age"/><br> 
         你的年龄是{{sum}}岁，{{msg}} 
         </div> 
         <script src="./js/Vue.js"></script> 
         <script type="text/javascript"> 
             //创建Vue实例 
             var app = new Vue({ 
                  el: "#app", 
                  data: { 
                       name: 'jiangmin', 
                       age: 30, 
                       msg: '你好,你该找个工作了。' 
                  }, 
                  computed: { 
                       sum() { 
                            return this.age + 20 
                       } 
                  } 
             }) 
         </script> 

---

在上述代码中，计算属性的sum的值会根据data中age的值的变化而更新，如果age不变化，则sum不会更新。计算属性实例的效果如图2-9所示。

计算属性是Vue.js的一个强大的功能，因为计算属性的值会随着其他属性的变化而动态更新。它可以使代码更加符合数据驱动的特性并且易于维护。

2.2.5 观察/监听

观察/监听（watch）选项是Vue.js提供的用于检测指定的数据是否发生改变的选项，代码如下。

---

<div id="app"> 
<input type="text" name="" id="" value="" v-model="age" /><br>  
         你的年龄是{{sum}}岁，{{msg}}    
</div> 
         <script src="../js/Vue.js"></script> 
         <script type="text/javascript"> 
              //创建Vue实例 
              var app = new Vue({ 
                   el: "#app", 
                   data: { 
                        name: 'jiangmin', 
                        age: 30, 
                        msg: '你好,你该找个工作了。' 
                   }, 
                   computed: { 
                        sum() { 
                             return this.age + 20 
                        } 
                   }, 
                   watch: { 
                     age() { 
                            alert('age变化了！') 
                   } 
            } 
            }) 
       </script> 

---

在上述代码中，使用watch选项来监听数据age是否发生了变化，如果监听到其发生了变化，则“age变化了！”对话框就会弹出。watch选项实例的效果如图2-10所示。