Vue.js的学习记录_1-优快云博客

本文详细介绍了一个简单的Vue实例，包括HTML模板、Vue实例的创建、数据绑定及方法调用。通过一个具体的例子，展示了如何在页面上显示数据并使用方法进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的初始化、数据与方法

vue.html

<!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>Vue  Studying</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="Vue-app">
        <h1>{{greet('night')}}</h1>
        <h2>{{name}}</h2>
    </div>  
    <script src="app.js"></script>
</body>
</html>

vue.js

 new Vue ({
    el: '#Vue-app',
    data: {
        name: 'shuan', 
        job: 'teacher',
        website: 'http://www.baidu.com',
        websiteTag: '<a href:"http://www.baidu.com">百度一下，你就知</a>'
    },
    methods:{
        greet: function (time) {
            return 'Good ' + time + ' ' + this.name ;
        }
    }
});