Vue学习（一）

最新推荐文章于 2022-12-04 13:06:04 发布

Siyucat

最新推荐文章于 2022-12-04 13:06:04 发布

阅读量96

点赞数

分类专栏： vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_42475953/article/details/80895872

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<!--vue-app是根容器-->
	<div id="vue-app">
		<p>Name:{{ name }}</p>
		<p>Job:{{ job }}</p>
		<h1>{{ greet('morning') }}</h1>
		<a v-bind:href="website">web</a>
		<input type="text" v-bind:value="job">
	    <p v-html="websiteTag"></p>

	</div>
   <script  src="app.js"></script>

</body>
</html>

app.js

//实例化vue对象
new Vue({
     el:"#vue-app",
     data:{
     	name:"siyu",
     	job:"web开发",
     	website:"http://www.baidu.com",
     	websiteTag:"<a href='http://www.baidu.com'>The new step</a>"
     },
     methods:{
     	greet:function(time) {
     		return 'Good ' + time + " " +this.name + "!";
     	}
     }
	});


/*
*el:element   元素，html中的根容器元素
*data   用于数据的存储
*methos 用于存储各种方法
*data-binding:给属性绑定对应的值
*/

style.css