Vue小案例_vue网站案例-CSDN博客

本文链接：https://blog.csdn.net/Hhytyq/article/details/94710236

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn方式引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <!--这是我们的View-->
    <div id="app">
    	<h1>{{greet("afternoon")}}</h1>
    	<p>{{name}}</p>
    	<input type="text" v-model="name"/>//v-model双向绑定
    	<p>Job:{{job}}</p>
        <a v-bind:href="website">web开发</a>
        <input type="text" v-bind:value="job">
        <p v-html="week"></p>
        <button v-on:click="add">加一岁</button>
        <button v-on:click="subtract">减一岁</button>
        <p>My age is {{age}}</p>
        <div id="canvas" v-on:mousemove="updateXY" style="width: 600px;padding:200px 20px;text-align: center;border: 1px solid #333">{{x}},{{y}} </div>
    </div>
    <script>
	  var abc=new Vue({
	  	el:"#app",
	  	data: {
            name:"你好",
            job:"web开发",
            website:"http://www.baidu.com",
            week:"<a href='http:www.baidu.com'>111111</a>",
            age:30,
            x:0,
            y:0
        },
        methods:{
        	greet:function(time){
        		return 'Good'+time+"!"+"  "+this.name+"！"
        	},
            add:function(){
                this.age++;
            },
            subtract:function(){
                this.age--;
            },
            updateXY:function(event){
                //console.log(event);
                this.x=event.offsetX;
                this.y=event.offsetY;
            }
        }
	  })
    </script>
</body>
</html>

实验效果：
在这里插入图片描述