Vue框架

最新推荐文章于 2024-05-09 19:47:27 发布

空空少年郎 

最新推荐文章于 2024-05-09 19:47:27 发布

阅读量597

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/XXY411636013/article/details/93849557

版权

Vue框架的介绍Vue框架是渐进式 JavaScript 框架；只关注视图层；使用MVVM模式Vue的实例使用Vue需要在http://cn.vuejs.org/上进行下载，并在使用之前用导入；Vue在使用的时候需要将对象new出来，需要传入选项对象，对象包含挂载元素，数据，模板，方法等；el：挂载元素选择器data：代理数据methods:定义方法 <!DOCTYPE...

摘要由CSDN通过智能技术生成

Vue框架的介绍

Vue框架是渐进式 JavaScript 框架；只关注视图层；使用MVVM模式

Vue的实例

使用Vue需要在http://cn.vuejs.org/上进行下载，并在使用之前用导入；
Vue在使用的时候需要将对象new出来，需要传入选项对象，对象包含挂载元素，数据，模板，方法等；
el：挂载元素选择器
data：代理数据
methods:定义方法

	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'#box',  //挂载元素选择器,后边跟着 id class等名字
				data:{  //代理数据，里边为数据
					msg:'Hello Vue' //msg 为自己定义的名称，后边跟随的是具体数据
				}
			});
			
			
		}
	</script>
</head>
<body>
	<div id="box">
		<input type="text" id="box" value="" v-model="msg" />  //   v-model	一般用于表单元素(input)	双向数据绑定

<br>
		{
  {msg}}
		<br>
		<span v-text="msg"></span>
	</div>
</body>
</html>

事件绑定

v-on:click=“show()”

通过制作一个按钮点击转到指定网页来具体讲解

	<!DOCTYPE html>
<ht

最低0.47元/天解锁文章

空空少年郎 

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架

Vue框架的介绍Vue框架是渐进式 JavaScript 框架；只关注视图层；使用MVVM模式Vue的实例使用Vue需要在http://cn.vuejs.org/上进行下载，并在使用之前用导入；Vue在使用的时候需要将对象new出来，需要传入选项对象，对象包含挂载元素，数据，模板，方法等；el：挂载元素选择器data：代理数据methods:定义方法 <!DOCTYPE...
复制链接

扫一扫