Vue.js笔记(一)

Vue.js笔记(一)

Vue.js引入方法

  • CDN引入
  • 下载vue.js

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属性
如：

  • v-bind:href=""
  • v-bind:value="
  • v-html=""

5.事件绑定
v-on:事件名="方法名"
@事件名="方法名"
如：

  • on:click="add()"
  • 列表项
posted @ 2019-06-02 19:18  pu_xb  阅读(144)  评论(0)    收藏  举报