web前端框架VUE的结构分析以及基本用法解释

最新推荐文章于 2022-05-04 15:07:17 发布

antu58

最新推荐文章于 2022-05-04 15:07:17 发布

阅读量1.4k

点赞数 1

文章标签： web js vue 框架

本文链接：https://blog.csdn.net/weixin_41735943/article/details/85918188

版权

先说一下如何引入vue框架，这里推荐一个简单的方法

<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

VUE采用了MVVM的模式，也就是 M（数据模型层）、V（视图层）、VM（调度层）

个人理解，如果有误欢迎指正！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest 以及MVVM结构分析</title>
</head>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<body>

	<!--视图层 V -->
	<div id="page"></div>

	<script>
		// 调度层 VM
 		var vm = new Vue({
 			//作用域 关联了id="page"这个div下的所有内容
 			el:'#page',
 			// 用来存放数据 M
 			data:{
 				
 			},
 			//用来存放方法
 			methods:{

			}
 		})
	</script>
</body>
</html>

基本用法

这里主要介绍几个vue常用的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>
	<div id = "page">

		<!-- 将值插入p标签，在低网络速度下它会显示  {{ msg }}  等加载完成才会显示携带的值-->
		<p>{{ msg }}</p>

		<!-- v-cloak 解决差值闪烁问题 需要和style配合使用-->
		<p v-cloak>{{ msg }}</p>

		<!-- 这样可以同时显示标签内所有内容 -->
		<p v-cloak>=== {{ msg }} ===</p>

		<!-- 注意，这里233会被msg的值覆盖 它不会出现低网络速度下的闪烁问题-->
		<p v-text="msg">233</p>

		<!-- 插入html的方法 v-html -->
		<div v-html='msg2'></div>

		<!-- 事件绑定 v-on -->
		<input type="button" value="按钮" v-on:click="show">
		<input type="button" value="按钮" v-on:mouseover="show">

        <!-- 可以简写为 @ -->
		<input type="button" value="按钮" @click="show">
		
	</div>

	<script>
		var vm = new Vue({
			el:'#page',
			data:{
				msg:'233',
				msg2:'<h1>这是h1<h1>',
			},
			methods:{
				show:function () {
					alert('hellow')
				}
			}

		})
	</script>
</body>
</html>

补充一个小案例，做文字跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字跑马灯</title>
</head>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<body>
	<div id="page">
		<p v-text='msg'></p>
		<input type="button" value="start" @click='start'>
		<input type="button" value="stop" @click='stop'>
	</div>

	<script>
		var vm = new Vue({
			el:'#page',
			data:{
				msg:'猥琐发育，别浪～～！',
				intervalID:null
			},
			methods:{
				start() {
					if (this.intervalID != null ) return;
					this.intervalID = setInterval(() => {
					var startStr = this.msg.substring(0,1)
					var endStr = this.msg.substring(1)
					this.msg = endStr + startStr
					},400)
				},
				stop() {
					clearInterval(this.intervalID)
					this.intervalID = null
				}
			}
		})
	</script>
</body>
</html>

antu58

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端框架VUE的结构分析以及基本用法解释

先说一下如何引入vue框架，这里推荐一个简单的方法&lt;!-- 引入vue框架 --&gt;&lt;script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"&gt;&lt;/script&gt;VUE采用了MVVM的模式，也就是 M（数据模型层）、V（视图层）、VM（调度层）个人理解，如果有误欢迎指正！...
复制链接

扫一扫