标题:邂逅vue.js | 作者: catfish | 时间:2020年01月18日
暂无法显示图片

vue.js是什么?

vue.js是javascript的一个前端框架,目前,前端三大框架有:Angular, React, Vue

为什么要学习vue?

vue.js目前非常红火,可以说是前端开发必备的一个技能。

简单认识一下vue.js

读音类似于:view。

vue.js是一个渐近式框架。

vue全家桶:Core+Vue-router+Vuex

学习的前提?

html+css+javascript基础。

Vue.js的安装

开发环境:https://vue.js.org/is/vue.js

生产环境:https://vue.js.org/js/vue.min.js

将对应文件下载下来,引入即可。

基本使用示例

示例一:hello Vue!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="text/javascript">
	const app = new Vue({           // var,let(变量),const(常量)
		el:"#app",
		data:{
			message: "hello Vue!"
		},
	})
</script>
</body>
</html>

示例二:输出数组

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="item in movies">{{item}}</li>
		</ul>	
	</div>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			movies: ['星际穿越', '加勒比海盗', '少年派']
		}
	})
</script>
</body>
</html>

示例三:绑定事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button v-on:click="increment">+</button>
	<button @click="decrement">-</button>    <!--   语法糖,两种写法均可 -->
</div>
<script type="text/javascript">
	let app = new Vue({
		el: '#app',
		data: {
			counter: 0,
		},
		methods: {
			increment: function(){    
				this.counter++
			},
			decrement: function(){
				this.counter--
			},
		},
	})
</script>
</body>
</html>

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!