vue基础 - 实例中的数据，事件和方法

转载于 2019-01-16 16:16:00 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjiayi/p/10277652.html

文章标签：

#javascript #ViewUI

本文通过一个简单的Vue.js实例，展示了如何使用Vue进行DOM操作，包括事件绑定、数据绑定及条件渲染等基本功能。介绍了Vue的数据响应式原理，并演示了如何在页面中动态更新数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue - demo</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="root">
    <!-- v-on:绑定事件，这里绑定了click事件 -->
    <div @click="headleClick">{{content}}</div>
    <!--几种打印方式-->
    <h1 v-html="content"></h1>
    <h1 v-text="content"></h1>
    <h1>{{msg}}</h1>
  </div>
  <script>
    new Vue({
      el:"#root",
      data:{
        content:"<h2>hello_content</h2>",
        msg:"hello_msg"
      },
      methods:{
        headleClick:function(){
          this.content = "world"//点击改变文本内容，一定要写在methods方法里
        }
      }
    })
  </script>
</body>
</html>