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>