VueJS

最新推荐文章于 2024-02-25 11:00:00 发布

volunteer1024

最新推荐文章于 2024-02-25 11:00:00 发布

阅读量209

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/volunteer1024/article/details/102926464

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

VueJS入门

0 什么是VueJS
1 介绍

0 什么是VueJS

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

体积小，压缩后33k
更高的运行效率
基于虚拟dom，可以预先通过JS进行各种运算，将最终的DOM操作计算出来并优化的技术。
双向数据绑定
让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上
生态丰富、学习成本低
ui框架多，即拿即用。对初学者友好，入门容易、学习资料多
使用场景广泛
应用于web、移动端、跨平台开发

1 介绍

1.1 安装和部署

使用

1.2 创建第一个Vue应用

类似小程序的开发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			</br>
			{{name}}
		</div>
		<script>
			var a = new Vue({
				el: '#app',
				data:{
					name: "haa",
					message:'hehee'
				}
			})
		</script>
	</body>
</html>

1.3 声明式渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{a}}
			</br>
			{{b}} 				<!--没有变化，需要在vm中声明--> 
		</div>
		<script>
			var data = {a : 1} 
			var vm = new Vue({
				el: '#app',
				data: data
			})
		data.a = 11
		alert(data.a == vm.a)	//true
		vm.b = 'Hello'			//没用
		</script>
		</script>
	</body>
</html>

1.4 条件与循环

条件：可以通过修改seen的值，决定是否现实组件

<div id="app">
			<p v-if="seen"> 看得到吗 </p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data:{
					seen: false
				}
			})
		</script>

循环渲染项目列表

<div id='app'>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data:{
					todos:[{text: '学习JavaScript'}, {text: '学习Vue'}, {text: '整个牛项目'}]
				}
			})
		</script>

vm.todos.push({text : "新项目"})

处理用户输入
v-on指令添加事件监听器

<div id='app'>
			<p v-on:click="reverseMessage">
				{{message}}
			</p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data:{
					message: 'hello vue！'
				},
				methods:{
					reverseMessage: function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
		</script>

Vue提供的v-model指令，可以轻松实现表单输入和应用状态之间的双向绑定

<div id='app'>
			<p>
				{{message}}
			</p>
			<input v-model="message" />
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data:{
					message: 'hello vue！'
				}
			})
		</script>

volunteer1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJS

VueJS入门0 什么是VueJS1 安装和部署2 创建第一个Vue应用0 什么是VueJSVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂...
复制链接

扫一扫