vue.js入门上 - 爱码网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='vue_person'>
    <h1>name:{{name}}</h1>
    <h1>age:{{age}}</h1>    
    <h1>{{SayHi()}}</h1>
    <!-- 在h1标签中的{{}}是用来输出对象属性和函数的返回值的。 -->
</div>
    <script src="vue.min.js"></script>
    <script type="text/javascript">
    //每个Vue应用都需要通过实例化Vue来实现。
        //1、创建Vue实例
        //var MyInfo = { name: "stephen", age: "26"}
        var vm = new Vue({
            el:'#vue_person',    //el通常绑定的是一个选择器。
            data:{                //data用于定义属性，当前存在name和age这两个属性。
                    name:"vichin",
                    age:27,        
                },
            //data:MyInfo,可以使用对象来与vue构造函数中的data进行绑定。
            methods:{            //用于定义函数，可以通过return来返回函数值。
                SayHi:function () {
                    return 'Hello World';
                }
            }
        });
    //当一个Vue实例被创建时，它向Vue的响应式系统中加入其data对象中能够找到的所有属性，当这些属性的值发生变化的时候，html视图将也会产生相应的变化。
    //我们创建的vue对象vm还有一些有用的属性和方法。在使用的时候都以$作为前缀，以便与用户自定义的属性进行区别。
    //例如：当我们需要获取到id为vue_person的这个div标签时，
    //1、使用js手段：
    let jsGetDOM = document.getElementById('vue_person');
    //2、使用vue提供的方法        
    let vueGetDOM = vm.$el;
    jsGetDOM===vueGetDOM;//这里返回的是true!!!
    //更多属性与方法：https://cn.vuejs.org/v2/api/#vm-data
    </script>
</body>
</html>
vue的简单介绍