vue的基本使用

最新推荐文章于 2022-09-11 19:56:24 发布

你真好看l

最新推荐文章于 2022-09-11 19:56:24 发布

阅读量158

点赞数

分类专栏： vue的学习

本文链接：https://blog.csdn.net/qq_40052011/article/details/102589515

版权

vue的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

vue的基本认识：

它是渐进式框架，可自底向上逐层应用
作用：动态构建用户界面
特点：遵循mvvm模式；编码简洁，体积小，效率高，适合移动和pc端开发
； vue核心库只关注视图层，便于与第三方库或既有项目整合
与其他js框架关联：
借鉴angular的模板和数据绑定技术
借鉴react的组件化和虚拟DOM技术
vue扩展插件：vue-cli 脚手架；vue-resourse ajax请求；vue-router 路由；vuex 图片滑动相关；vue-layload 图片懒加载；vue-scroller 页面滑动相关；mint-ui 基于vue的ui组件（移动端）；element-ui 基于vue的ui组件（pc端）
vue的基本使用：
1. 引入Vue.js
2. 创建Vue对象
el :指定根element（选择器）
data :初始化数据（页面可访问）
3. 双向数据绑定： v-model
数据绑定：数据在页面与内存中的变量自动转移
双向数据绑定：如果2个方向数据都可以自动转移
4. 显示数据 : {{}} 读取data中的数据显示
5. 理解Vue的mvvm实现：
model：模型，数据对象data
view: 视图，模板页面
modelView 视图模型，（Vue的实例）
vue mvvm模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入Vue.js-->
		<script src="vue.js" text="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		
		<div id="app"><!--view-->	
			<input type="text" v-model="username" />  <!--element.value = xxx-->
			<p>hello,{{username}}</p>
		</div>
		<script type="text/javascript">
			/*创建Vue实例（Vue是一个Vue.js提供的构造函数）*/
			var app = new Vue({   // 配置对象
				el: '#app',  //(id选择器选中了这个div元素） 表明将哪个元素交给vue管理
				data: { //数据(model）
					username: 'Vue'		
				}
			});
			
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
改变输入框的值，下面也会动态更新：