Vue的事例

最新推荐文章于 2021-09-27 15:11:45 发布

周思梦

最新推荐文章于 2021-09-27 15:11:45 发布

阅读量261

点赞数

分类专栏： Vue的事例文章标签： Vue的事例

本文链接：https://blog.csdn.net/weixin_37635400/article/details/79935424

版权

Vue的事例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：创建一个HTML，里面的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>



<div id="vue-app">

<div>{{ name }}</div>
<div>{{ age }}</div>
<div>{{ job }}</div>

<p>{{ greet("你好，爱丽丝") }}</p>

<a v-bind:href="website">百度一下</a>

<input type="text" v-bind:value="age" />

<p v-html="webSiteTag"></p>





<button @dblclick="add(1)">涨一岁</button>
<button v-on:dblclick="subtract(1)">减一岁</button>

<button @click="add(10)">涨十岁</button>
<button v-on:click="subtract(10)">减十岁</button>
<p> My age is {{age}}</p>

<div id="canvas" v-on:mouseover="updateXY">
{{x}},{{y}}

</div>
</div>

<script type="text/javascript" src="js/app.js" ></script>
</body>

</html>

第二步：再写一个js文件，代码如下：

//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:'爱丽丝',
job:'java初级工程师',
age:'23',
website:"http://www.baidu.com",
webSiteTag:"<a href='http://www.sina.cn'>新浪网</a>",
x:0,
y:0
},
//方法。greet是方法名.如果想要调用name为爱丽丝直接使用this.name
methods:{
greet:function(Name1){
return "hello"+Name1+this.name+"!";
},
/* add:function(){
this.age++;
},
subtract:function(){
this.age--;
},*/
add:function(addAge){
this.age += addAge;
},
subtract:function(subAge){
this.age -= subAge;
},
updateXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY;
}
}

});

/**
* el:表示element 需要获取的元素，一定是html中的根容器元素
* data:用于存储数据。
* methods：用于存储各种方法
* v-bind:用于数据的绑定
* 点击事件 v-on:click=""

第三步：书写style.css，代码如下：

#vue-app{
font-family: "微软雅黑";
font-size: 20px;
}
#canvas{
width:600px;
/* padding属性值得中间不能有逗号分隔*/
padding: 200px 20px;
text-align: center;
border:1px solid #333;
}