1.4 Vue.js起步
每个Vue应用都需要通过实例化Vue来实现。语法格式如下：
var vm = new Vue({
// 选项
})
下面我们通过实例来了解Vue构造器中需要哪些内容。
1.4.1 Vue中变量的显示和自定义方法的使用
本节讲解变量的定义和显示、在自定义方法（函数）中返回变量的值。
我们在data代码块中定义了两个变量site（网站名称）和url（网站网址），直接在页面使用{{}}语法格式来显示。此外，在methods代码块中定义了一个方法details，使用方法来返回变量site（网站名称）和字符串的内容，在页面中调用该方法来显示。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 起步</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--显示变量site的值：“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值: www.taobao.com-->
<h3>网站网址：{{url}}</h3>
<!--显示函数details的返回值：“淘宝网 - 购物的天堂！”-->
<h4>最终结果：{{details()}}</h4>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app', //app为前面div代码块的id的值，通过“#”号绑定
//data区域定义属性/变量的值
data: {
site: "淘宝网", //定义变量site的值
url: "www.taobao.com" //定义变量url的值
},
//在methods区域中定义自己所写的函数
methods: {
//自定义了一个函数，名称为details
details: function()
{
//调用该函数的时候，会返回下面的值
return this.site + " - 购物的天堂！";
}
}
})
</script>
</body>
</html>
效果如图1-18所示。
图1-18 Vue中变量的显示和自定义方法的使用
可以看到在Vue构造器中有一个el参数，它是DOM元素中的id。在上面实例中id为app，在div元素中：
<div id = "app"></div>
这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响。
接下来我们看看如何定义数据对象。
·data用于定义属性，实例中有两个属性：site、url。
·methods用于定义函数，可以通过return来返回函数值。
·{{}}用于输出对象属性和函数返回值。
当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也将产生相应的变化：
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--显示变量site的值“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值：“www.taobao.com”-->
<h3>网站网址：{{url}}</h3>
<!--显示函数details的返回值：“淘宝网 - 购物的天堂！”-->
<h4>最终结果：{{details()}}</h4>
</div>
1.4.2 data内容的另外一种定义方式
下面我们通过实例来了解一下data内容的另一种定义方式，该实例的步骤如下：
1）在script代码块中定义一个对象mydata，内容如下：
var mydata = { site: "淘宝网", url: "www.taobao.com"}
同时在初始化Vue的时候赋值给data，代码如下：
var vm = new Vue({
el: '#app', //app为前面div代码块的id的值，通过“#”绑定
//data区域定义属性/变量的值，是我们的数据对象
data:mydata
})
2）改变Vue实例中site的内容，html视图的内容也会改变：
vm.site = "淘宝网-变更为-xx网";
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 起步-data内容的另外一种定义方式</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--显示变量site的值“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值：“www.taobao.com”-->
<h3>网站网址：{{url}}</h3>
</div>
<script type="text/javascript">
// 我们的数据对象
var mydata = { site: "淘宝网", url: "www.taobao.com"}
var vm = new Vue({
el: '#app', //app为前面div代码块的id的值，通过“#”绑定
//data区域定义属性或变量的值，是我们的数据对象
data:mydata
})
// 它们引用相同的对象
document.write(vm.site === mydata.site); // 返回值true
document.write("<br>");
// 设置属性也会影响到原始数据
vm.site = "淘宝网-变更为-xx网";
document.write(mydata.site + "<br>")
</script>
</body>
</html>
效果如图1-19所示。
图1-19 改变Vue实例中site内容的效果
1.4.3 系统属性
除了数据属性，Vue实例还提供了一些有用的实例属性，称为系统属性，都使用了前缀“$”，以便与用户定义的属性区分开来。代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 起步-前缀 $ 的使用</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--显示变量site的值“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值：“www.taobao.com”-->
<h3>网站网址：{{url}}</h3>
</div>
<script type="text/javascript">
// 我们的数据对象
var mydata = { site: "淘宝网", url: "www.taobao.com"}
var vm = new Vue({
el: '#app', //app为前面div代码块的id的值，通过“#”绑定
//data区域定义属性/变量的值
data:mydata
})
document.write(vm.$data ===
mydata) // 返回true
document.write("<br>")
document.write(vm.$el ===
document.getElementById
('app')) // 返回true
</script>
</body>
</html>
效果如图1-20所示。
图1-20 使用前缀“$”的页面效果
1.4.4 入门知识点总结
知识点：Vue中data数据的第2种定义方式。
我们可以先定义一个对象，将内容赋值在对象里面，然后将对象赋值给Vue中的data。示例代码如下：
var duixiang = { site: "大学课堂", url: "www.123.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: duixiang
})
知识点：Vue中data数据的改变和设置方式一。
示例代码如下：
var myvue = new Vue({
el:"#myapp001",
data:{
site:"大学课堂",
url:"www.123.com"
},
methods:{
cs:function(){
return "你好，" + this.url;
}
}
})
改变方法如下：
myvue.site = "腾讯"
知识点：Vue中data数据的改变和设置方式二。
示例代码如下：
var duixiang = { site: "大学课堂", url: "www.123.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: duixiang
})
vm.site = "腾讯"
duixiang .site = "百度"
知识点：原生JavaScript如何输出Vue中的data数据。
示例代码如下：
document.write(vm.alexa)
知识点：Vue中的系统属性。
除了数据属性，Vue实例还提供了系统属性与方法，用前缀“$”表示，示例代码如下：
<script>
var shuju={xing:"黄",ming:"菊华",dianhua:"13516821613"}
var v = new Vue({
el:"#app",
data:shuju
})
document.write(shuju);
document.write(v.$data);
document.write(v.$data===shuju);
</script>