前端Vue框架_view框架

作者：笔触狂放9 | 2024-05-15 15:13:21

踩

view框架

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 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

在特定的时间进行特定的操作

创建前的四个阶段:

初始化阶段：beforeCreate（），此时无法通过vm访问到data中的数据，methods中的方法。

created（），此时可以通过vm访问到data中的数据，methods中的方法。

挂载阶段：beforeMount（）此时，页面呈现的是未经vue编译的dom结构，所有对dom的操作，最终都不奏效。

mounted（），此时，页面中呈现的是经过vue编译的dom，对dom的操作均有效，至此初始化过程结束，一般再次进行，开启定时器，发生网络请求，绑定自定义事件等初始化操作。

更新阶段：beforeUpdate（）此时，数据是更新的，但是页面是旧的，页面和数据还未同步。

updated（），此时，数据和页面都是更新的，数据和页面是同步的。

销毁阶段：beforeDestroy（），此时vm中所有的：data，methods，指令等待，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，解绑自定义事件等。

destroyed（），实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

6.ElementUI

Element UI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，了解设计指南,帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/573514