Vue 入门

最新推荐文章于 2025-06-06 16:47:17 发布

让我打个盹

最新推荐文章于 2025-06-06 16:47:17 发布

阅读量249

点赞数 1

文章标签： vue.js 前端 javascript 开发语言前端框架

本文链接：https://blog.youkuaiyun.com/weixin_48494427/article/details/125487387

版权

一 . vue2_templates模型实例:

二. vue3_templates模型实例:

三. v-text,v-html,v-on,v- show,v-if,v-else-if,v-else,v-for实例应用:

vue ui 图形化指令

指令化：npm init(初始化）
npm install vue@2 安装软件
vue create myapp 创建vue项目
npm run server 运行项目

一 . vue2_templates模型实例:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 引入vue2.xx -->
	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 2.dom节点 -->
	<div id="app">
		{{msg}}
	</div>
	<!-- 3.vue对象 -->
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'qikuedu'
			}
		})
	</script>
	
</body>
</html>

二. vue3_templates模型实例:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 引入vue2.xx -->
	<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 2.dom节点 -->
	<div id="app">
		{{msg}}
	</div>
	<!-- 3.vue对象 -->
	<script>
		var app =Vue.createApp({
			data(){
				return{
					msg:'qikuedu'
				}
			}
		})
		var vm = app.mount("#app")
	</script>
	
</body>
</html>

三. v-text,v-html,v-on,v- show,v-if,v-else-if,v-else,v-for实例应用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<!--1. 引入Vue 2.xx -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>

		<!-- 2. Dom节点 -->
		<div id="app">
			{{msg}}

			<!--1. v-text  innerText 的属性用法 -->
			<h1 v-text='flag?msg:say'></h1>
			<!--2. v-html innerHTML 的属性用法 ， html可以识别标签 -->
			<h1 v-html='flag?msg:say'></h1>
			<h1>{{flag?msg:say}}</h1>

			<!-- 4. v-on 事件绑定 -->
			<button v-on:click="flag = !flag;count+=1" type="button">按钮{{count}}</button>

			<br>

			<!-- 3. v-show  -->
			<!-- <img v-show="flag" src="img/pic72.jpg" > -->
			<!-- <img v-if="flag" src="img/npm.png" > -->


			<!-- 5. 条件渲染 v-if  v-else-if  v-else  -->

			<!-- <img v-if="count==1" src = 'img/lesscss.png'>
		   <img v-else-if="count==2" src = 'img/nodejs.png'>
		<img v-else src = 'img/npm.png'> -->


			<!-- 6. 列表渲染  v-for -->
			<!--  v-for  在严格情况下 要添加 :key 唯一标识 -->
			<!-- <div v-for="item,index in myImgs" :key="index"  class="item">
				<h1>{{index+1}}-{{item.title}}</h1>
				<img :src="item.img">
			</div> -->


		</div>

		<!-- 3.Vue对象 -->
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'qikuedu',
					say: '你好奇酷',
					flag: true,
					count: 0,
					myImgs: [{
							title: 'nodejs',
							img: 'img/nodejs.png'
						},
						{
							title: 'npm',
							img: 'img/npm.png'
						},
						{
							title: 'lesscss',
							img: 'img/lesscss.png'
						},
						{
							title: 'pic72',
							img: 'img/pic72.jpg'
						}
					]
				}
			});
		</script>
	</body>
</html>

四. vue面试题分享：

1、什么是mvvm 、 mvc 模型？

MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

mvvm: MVVM：MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据。

2、vue双向数据绑定的原理？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图黑马程序员。

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回调，则功成身退。第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer 来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和 Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。