<!-- Vue属性绑定 -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>name :{{ name }}</h1>
<h1> {{ greet('morning')}}</h1>
<p>Job :{{ job }} </p>
<a v-bind:href="website">web开发</a><!--属性绑定 -->
<input type="text" v-bind:value="name">
<p v-html="websiteTag"></p>
</div>
<script src="app1.js"></script>
</body>
</html>
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"zouzouzou",
job:"web开发",
website:"https://www.baidu.com",
websiteTag:"<a href='https://www.baidu.com'>百度</a>"
},
methods:{
greet: function(time){
return 'Good'+' '+time+' '+this.name+'!';
}
}
});
//el:element:需要获取的元素，一定是html中的根容器元素
//data:用于数据的存储
//methods:用于存储各种方法
//data-binding:给属性绑定对应的值
网友评论