Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var app = new Vue({
// 选项
})
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：
实例1：（传统写法)
<div id="app">
<h1>title : {{title}}</h1> //title : 百度
<h1>url : {{url}}</h1> //url : www.baidu.com
<h1>{{details()}}</h1> //有问题问度娘！
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
title: "百度",
url: "www.baidu.com",
},
methods: {
details: function() {
return this.title + " 有问题问度娘！";
}
}
})
</script>
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 app，在 div 元素中：
<div id = "app"></div>
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性，实例中有两个属性分别为：title、url。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
数据响应：data实例对象下的属性发生改变，html视图随之改变！！
其他实例扩展
实例2：（data实例对象下引对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>title : {{title}}</h1> //title : 百度
<h1>url : {{url}}</h1> //url : www.baidu.com
</div>
</body>
<script type="text/javascript">
var data = { title: "百度", url: "www.baidu.com", }
var app = new Vue({
el: '#app',
data: data
})
</script>
</html>
实例3：（data实例对象下引数组套对象)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="x in list">
<p>{{x.title}}</p>
<p>{{x.price}}</p>
</div>
</div>
</body>
<script>
var list=[{
title:"苹果",
price:5
}]
var app =new Vue({
el:"#app",
data:{
list
}
})
</script>
</html>
网友评论