Vue学习（二）——内容显示和绑定事件

最新推荐文章于 2024-02-20 09:57:22 发布

Bambi12

最新推荐文章于 2024-02-20 09:57:22 发布

阅读量200

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Bambi12/article/details/83896884

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Vue入门</title>
   <script src="./vue.js"></script>
</head>
<body>
   <div id="root">

      <!-- 插值表达式：{{number}} -->
      <!-- v-text显示文本内容 -->
      <!-- v-html可以自动转义处理显示dom节点中的内容 -->
      <!-- v-on:click 绑定事件,其实是监听  简写为@click -->
      <h1 v-text="msg" @click="handleClick"></h1>
      <h1 v-html="content"></h1>

   </div>
   <script>
   new Vue({
    el:"#root", 
    data:{
    	msg:"Hello World",
     	msg2:'Hello Wanglu',
     	msg3:'',
     	content:'<span>123</span>'
  	},
    methods:{
    	handleClick:function(){
      		this.msg3=this.msg;
      		this.msg=this.msg2;    //改变的是Vue实例中的数据
        	this.msg2=this.msg3;
       }
   }
})
   </script>
</body>
</html>

注：学习笔记内容来自：https://www.imooc.com/learn/980
官网：cn.vuejs.org