vue构造器的内容

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30460489

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/volcanorao/p/8627048.html

本文介绍了一个简单的Vue.js应用实例，展示了如何使用Vue的数据绑定特性，包括定义数据对象、使用methods来封装函数，并在HTML中通过插值表达式展示数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 学习</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
  <p>{{ print_message() }}</p>
  <p>{{ say_name() }}</p>
  <p>{{ age }}</p>
</div>

<script>
    var data = { message: 'Hello Vue.js!', name: 'rao', age: 19 } //data的所有属性都会响应式地添加到app中的data，即使没有的属性
    var app = new Vue({
      el: '#app',
      data: data,
      methods: {
          print_message: function(){
              return this.message;
          },
          say_name: function(){
              return this.name;
          }
      }
    });
    document.write(data.fuck === app.fuck) //true
    document.write(app.name); //data的属性这样引用
    document.write(app.$el === document.getElementById('app')); //实例属性前要加$
    document.write(app.$data === data); //实例属性前要加$
</script>
</body>
</html>