前端Vue框架

最新推荐文章于 2024-07-28 11:20:53 发布

暴走的小帅

最新推荐文章于 2024-07-28 11:20:53 发布

阅读量621

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_71243923/article/details/127223058

版权

1.什么是MVVM

MVVM, 是Model-View-ViewModel(数据(图片数组)-前端的html-前端框架(vue框架))的简写, 它是将View的状态行为化和抽象化.

ViewModel的作用是将用户界面视图UI与业务逻辑分开, 它可以取出Model数据的同时帮忙处理View中需要展示的内容的业务逻辑分析

MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

2.Vue

什么是Vue.js: Vue是一套用于构建用户界面的渐进式框架,是前端的主流框架之一, 它对js语法做了大量的封装,是的语法更加简洁,功能更加强大

3.第一个Vue程序

1.导入Vue,js 2.创建Vue实例对象,设置el属性和data属性 3.使用更加简洁的语法把数据加到对应的页面上

<div id="a1">
			{{message}}<!-- 插值表达式  不允许写其他语句,例如流程语句,控制变量,表达式最终需要返回一个结果显示 -->
			<p>
				{{message}} <!-- 变量,来自于data里面定义的变量-->
			</p>
		</div>
		
		<script type="text/javascript">
			/* 创建一个vue对象,使得此对象与id=a1的div进行绑定 */
			var a = new Vue({
				el:'#a1',//将指定的标签与vue对象绑定在一起
				data:{//就是定义数据,vue对象实现双向绑定
					message:'HelloVue!'
				}
			})
		</script>

4.Vue指令

Vue提供的一些属性

v-text: 设置标签的文本内容, 使用插值表达式来替换指定内容

v-html: 设置元素的innerHTML,内容中有html标签会被解析为标签

v-on: 为元素绑定事件,事件名不需要写成v-on ,只需简写为@

v-model: 设置和获取表单元素的值,绑定的数据会和表单元素的值相关联

<input type="text" v-model="message"/> 

     <p>{{message}}</p> 

       data:{ 

            message:"" 

}

v-show: 切换元素的显示状态, 原理是修改元素的display,从而实现元素的隐藏的和显示,

指令后的内容会解析成布尔值,值为true元素显示,false隐藏元素

<body>
		<div id="a1">
		    <p v-show="isShow">aaaaaaa</p>
			
		</div>
		<script type="text/javascript">
              var a1 = new Vue({
				  el:'#a1',
				  data:{
					  isShow:false,
					  num:10
				  }
			  })
			  
		</script>
	</body>

v-if: 根据表达式的真假切换元素的显示状态, 其本质是对通过操纵dom元素来切换,

不一样的是它是通过从dom对象中移除

v-for: 根据数据生成列表结构, 数组会常与v-for结合

<body>
		<div id="a1">
			<table>
				<tr v-for="a in user">
					<td>{{a.name}}</td>
					<td>{{a.age}}</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
              var a1 = new Vue({
				  el:'#a1',
				  data:{
					  user:[{name:"张三",age:20},{name:"李四",age:30}]
				  }
			  })
			  
		</script>
	</body>

v-bind: 为元素绑定属性, 为标签的属性动态赋值, 完整写法是v-bind,简写为 : 属性名

<div id="a1">
		    <img v-bind:src="array[index]" />
			 <img :src="array[index]" />
			<input type="button" value="下一张" @click="text()" />
		</div>
		<script type="text/javascript">
              var a1 = new Vue({
				  el:'#a1',
				  data:{
					 array:["img/1.jpg","img/2.jpg"],
					 index:0
				  },
				  methods:{
					  text(){
						  this.index++;
					  }
				  }
			  })
			  
		</script>

5.Vue实例生命周期

生命周期: 一个vue组件从创建到销毁的整个过程.

实例生命周期函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。