Vue.js介绍

小俱的一步步

已于 2023-05-01 21:29:23 修改

阅读量2.6k

点赞数 2

文章标签： vue.js 前端 ui

于 2023-05-01 21:25:32 首次发布

本文链接：https://blog.csdn.net/weixin_63541561/article/details/130309736

版权

一、基本概述

Vue.js：由尤雨溪在2014年作为其个人项目创建，是前端的一个框架，核心只关注视图层，便于与第三方库或即有项目整合。是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！

框架：技术、代码的封装。

MVVM (Model-view-viewModel)：将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Vue.js 优点：

1.体积小，压缩后33K

2.更高的运行效率，用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。

3.双向数据绑定，简化Dom操作，通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,把更多的精力投入到业务逻辑上。

4.学习成本低，资料多。

二、Vue安装

在官网Vue.js (vuejs.org)下载Vue.js ，再导入js文件

三、Vue程序指令

1.Hello Vue

创建Vue实例对象，设置el属性和data属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ message }} 
			<!-- 插值表达式，获取data数据 -->
		</div>
		<script type="text/javascript">
			var app = new Vue({    //创建Vue对象
				el:'#app',     //数据挂载的dom对象，建议使用id选择器，
								//可以使用其他标签，但不能使用html和body
				data:{
					message:"Hello Vue"  //model 数据，可以写复杂类型的数据，对象数组。
				}
			});
		</script>
	</body>
</html>

2.Vue指令

指令都是v-开头

v-text
作用是设置标签的文本内容,默认写法会替换全部内容，使用差值表达式可以替换指定内容,内部支持写表达式

<p v-text="message+1">v-text</p> //Hello vue1 
<p>{{message+1}}v-text</p> //Hello vue1v-text

v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签,内部支持写表达式

插值表达式，v-text,v-html 区别：

<p>{{ message }}-bbbb</p><!--插值表达式，不会覆盖标签中的其他内容 -->
<p v-text="message">gr </p><!-- 覆盖标签中的其他 -->
<p v-html="message">g r rg r</p><!-- 覆盖标签中的其他 -->

v-on
作用是为元素绑定事件 ,事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test(1,3)" />
methods:{
        test(a,b){
        alert(a);
        }
}

v-model
作用是便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联绑定的数据,表单元素的值双向数据绑定.

			<div id="app">{{ message }}<br />
				<input type="text" v-model="message" />
			<br /></div>

		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:""
				},
			
			})
		</script>

v-show
作用是根据真假切换元素的显示状态,原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值，值为 true 元素显示，值为 false 元素隐藏，数据改变之后，对应元素的显示状态会同步更新。
<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />
data:{
isShow:true,
age:20
}

v-if
作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

		<div id="app">
			<p v-show="isShow">aaaaa</p>
			<p v-show="num>5">abcddd</p>
			<p v-if="isShow">ccc</p>
			<p v-else>aaaaa</p>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					isShow: true,
					num:10
				}

			})
		</script>

v-bind
作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名
<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/3.jpg'
imgTitle:"这是一张图片"
}
我们可以传给 v-bind:class 一个对象，以动态地切换 class

        <style>
			.dzcss{
					color:red;
					}
		</style>

        <div id="app">
			<div v-bind:class="{dzcss:dz}">点赞</div>
			<input type="button" value="测试" @click="text()" />
		</div>
		
		<script type="text/javascript">
			var a = new Vue({
				el:"#app",
				data:{
					dz:false,
				},
				methods:{
					text(){
						this.dz=true;
					}
				}
			})
		</script>

v-for
作用是根据数据生成列表结构，数组经常和 v-for 结合，使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用，数组长度的更新会同步到页面上是响应式的为循环绑定一个 key 值 :key=”值” 尽可能唯一。

        <div id="app">
			<div id="box">
				<div v-for="user in users">{{user.name}},{{user.age}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					users:[{name:"tim",age:10},{name:"tom",age:9},{name:"liming",age:8}],
				}
			})
		</script>

四、Vue 实例生命周期

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

与methods同级
beforeCreate: function () {
        console.log('Vue对象刚刚创建之前 ’);
},
created: function () {
        console.log('Vue对象刚刚创建完毕 ' );
},
beforeMount:function(){
        onsole.log('Vue对象刚刚创建完毕，还没有与标签挂载’);
},
mounted:function(){
        console.log('与标签挂载完毕’); //经常使用
}

小俱的一步步

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js介绍

一、基本概述：由尤雨溪在2014年作为其个人项目创建，是前端的一个框架，核心只关注视图层，便于与第三方库或即有项目整合。二、Vue安装三、Vue程序指令，v-show，v-bind,v-for......四、Vue 实例生命周期
复制链接

扫一扫