Vue2.0入门之实例化Vue对象

作者: 66be37b2096c | 来源:发表于2018-11-01 11:19 被阅读11次

1.新建index.html并以CDN形式引入Vue。

<script src="https://unpkg.com/vue"></script>

2.新建index.js实例化一个Vue对象。
index.js内容如下:

new Vue({
    el:'#vue', // el: element(元素) 需要挂载的元素,也是html的根容器元素
    data:{ //存储数据
        'key':'value'
    },
    methods:{
        //存储方法
        //没有参数
        sayHello(){
            return 'Hello World!'
        },
        //有参数
        sayWord(word){
            return 'Hello'+word+'!'
        }
    },
    computed:{
        //计算属性
    }
});

3.在index.html中引入index.js。

<body>
    <div id="vue">
        <!-- 方法和属性只能作用于id为vue的容器内 -->
        <h3>{{key}}</h3>
        <h2>{{sayHello()}}</h2>
        <h1>{{sayWord('World')}}</h1>
    </div>
    <script src="index.js"></script>
</body>

至此，Vue的实例化对象已经完成。
运行效果:

xiaoguo.png