Vue.js引入方法
- CDN引入
- 下载vue.js
1.创建Vue对象 new Vue({})
2.属性
- el:element 需要获取的元素,一定是html的根容器元素
- data:用于数据的存储
- methods:用于存储各种方法
3.在使用数据的地方使用{{ data的属性名}}或{{methods中方法名()}}
4.代码示例
js代码:
new Vue({
el:"#vue-app",
data:{
name:"andy",
job:"java Web开发"
},
methods:{
greet:function(time){
return 'Good '+time+'!';
}
}
});
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>{{greet('afternoon')}}</h1>
<p>Name:{{ name}}</p>
<p>job:{{job}}</p>
</div>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>
4.数据绑定
v-bind:属性=Vue属性
如:
原文:https://www.cnblogs.com/puxuebing/p/10963974.html