web前端——VUE

最新推荐文章于 2024-08-29 21:07:49 发布

404_NOT_FOUND@

最新推荐文章于 2024-08-29 21:07:49 发布

阅读量1k

点赞数 22

分类专栏： web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_70830675/article/details/139721187

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是框架？

①概述

框架结构就是基本功能，把很多基础功能已经实现了、封装了。在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率

②前端框架

javaScript是原生的

vue.js： 是一个js框架，不是代替js的，是对js进行了封装

UI框架：将前端常用的的一些组件（表单，表格，消息提示）进行封装（对html和css进行了封装）

③后端框架

mybatis--jdbc

spring

2.什么是 Vue.js？

vue.js是一个js框架，不是代替js的，是对js进行了封装。Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架。

https://v2.cn.vuejs.org/https://v2.cn.vuejs.org/

3.Vue.js 优点

①体积小压缩后 33K

②更高的运行效率

用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交

③双向数据绑定,简化 Dom 操作

通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,把更多的精力投入到业务逻辑上. MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

④生态丰富、学习成本低

市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件，来即用实现快速开发，对初学者友好、入门容易、学习资料多

4.vue安装

①方式 1:直接用 <script> 引入

新建一个vue项目普通模式

导入 js 文件

<script src="js/vue.js"></script>

②方式 2:命令行工具 (CLI)

安装教程给出了更多安装 Vue 的方式，请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时

③ 第一个 Vue 程序

● 导入开发版本的 Vue.js

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

● 使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<div id="app">
			{{ message }},{{ name }}<!-- {{  }} 差值表达式，可以获取data中定义的数据-->
			<input v-model="name"/>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',//绑定挂载点，可以使用其他的选择器，建议使用id选择器，不能使用body,html与vue对象绑定
			  data: {//定义数据，可以定义多个
			    message: 'Hello Vue!',
				name:"jim"
			  }
			})
		</script>
	</body>
</html>

5.Vue 指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性

①差值表达式

{{ }} 差值表达式，可以获取data中定义的数据，插入一个值不影响标签中的其他内容，不能解析内容中的html标签

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

②v-text

作用是设置标签的文本内容，默认写法会替换全部内容，不能解析内容中的html标签，使用差值表达式可以替换指定内容，内部支持写表达式

<p v-text="message">博客</p>

<p>{{message}}博客</p>

③v-html

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

<p v-html="message">博客</p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<!-- {{ message }} ，v-text="message" 不能解析内容中的html标签
		     v-html="message" 可以解析内容中html标签
		-->
		<div id="app">
			<!-- ①{{  }} 差值表达式  插入一个值不影响标签中的其他内容-->
			<p>{{ message }} aaaa</p>
			<!-- ②v-html 会覆盖标签中的其他内容 -->
			<p v-html="message">aaaa</p>
			<!-- ③v-text 会覆盖标签中的其他内容-->
			<p v-text="message">aaaa</p>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>
	</body>
</html>

④v-on

作用是为元素绑定事件，事件名不需要写 on 指令可以简写为@，绑定的方法定义在methods 属性中,可以传入自定义参数

<input type="button" value="按钮" v-on:click="test(1,2)" />

<input type="button" value="按钮" @click="test" />

methods:{

test(a,b) {

alert(a);

}

}

⑤v-model

作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<---->表单元素的值双向数据绑定

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

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

data:{

message:""

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<div id="app">
			<input type="button" value="按钮" v-on:click="test1(1)"/>
			<input type="button" value="按钮" @click="test2(2)"/>
			<input v-model="name"/>
			 <p>{{message}}</p>
			 <p>{{name}}</p>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!',
				name:""
			  },
			  methods:{//在vue中声明函数
				  test1(a){
					this.message = this.message.split("").reverse().join("");
				  },
				  test2(a){
				  	this.name = "tom";			  
				  }
			  }
			})
		</script>
	</body>
</html>

⑥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，前者的切换消耗小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<!-- 
		 v-show ="布尔值" true-"显示" false-"隐藏" 控制标签display属性，隐藏显示标签的，效率高
		 v-if = "布尔值" true-"显示" false-"隐藏" 会在隐藏时，删除了标签，显示时重新创建标签，效率低
		    v-if 可以和 v-else 联合使用，两个必须紧挨着
		 -->
		<div id="app">
			<img v-show="isShow" src="img/1.jpg"/>
			<img v-show="age>18" src="img/2.jpg"/>
			
			<img v-if="isShow" src="img/1.jpg"/>
			<img v-if="age>18" src="img/2.jpg"/>
			<img v-else src="img/1.jpg"/>
            <input type="button" @click="oper()" value="操作"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			   isShow:true,
			   age:15
			  },
			  methods:{//在vue中声明函数
				oper(){
					this.isShow = !this.isShow;
					this.age = 15;
				}
			  }
			})
		</script>
	</body>
</html>

⑧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：

<div v-bind:class="{ active: isActive }"></div>

data:{

isActive :true

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
			.active{
				color:red;
				background-color:aqua;
			}
		</style>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 
		 需求：标签的属性值可以动态修改
		 v-bind:属性名="变量名" 一旦为属性添加v-bind值就是一个在data中定义的变量了
		 还可以简写为:属性名
		 -->
		<div id="app">
			<img v-bind:src="imgurl[index]" :title="array[index]"/>
			
			<div v-bind:class="{active:isActive}">wwww</div>
			
            <input type="button" @click="oper()" value="操作"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			     imgurl:["img/1.jpg","img/2.jpg"],
				 array:["苹果手机","华为手机"],
				 index:0,
				 isActive:true
			  },
			  methods:{
				oper(){
					this.index++;
					this.isActive = !this.isActive
				}
			  }
			})
		</script>
	</body>
</html>

⑨v-for

作用是根据数据生成列表结构，数组经常和 v-for 结合，使用语法是（item，index）in 数据

item 和 index 可以结合其他指令一起使用，数组长度的更新会同步到页面上是响应式的

为循环绑定一个 key 值 :key=”值” 尽可能唯一

<li v-for="item in array">

{{item}}省

</li>

<li v-for="(item,index) in array">

{{index+1}}{{item}}省

</li>

<li v-for="(item,index) in objects">{{index+1}}{{item.name}}{{item.age}}

</li>

data:{

array:['陕西','山西','河南'],

objects:[

{name:'admin',age:23},

{name:'jim',age:22}

]

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<div id="app">
		   <ul>
			   <li v-for="user in users">
				   姓名:{{user.name}}
				   年龄:{{user.age}}
				   性别:{{user.gender}}
			   </li>
		   </ul>
		   {{student.name}} {{student.age}}
		</div>
		<script>
			
			var app = new Vue({
			  el: '#app',
			  data: {
			   users:[//数组，模拟从后端响应回来的数据
				   {name:"jim",age:20,gender:"男"},
				   {name:"jYY",age:19,gender:"男"},
				   {name:"jkk",age:15,gender:"女"}
			   ],
			   student:{name:"张三",age:20}
			  }			
            })
		</script>
	</body>
</html>

⑩Vue 实例生命周期

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

beforeCreate: function () {

console.log('beforeCreatea ’);

},

created: function () {

console.log('createda ' );

},

beforeMount:function(){

console.log('beforeMounta’);

},

mounted:function(){

console.log('mounteda’);

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<div id="app">
			
		</div>
		<script>
			
			var app = new Vue({
			  el: '#app',
			  data: {
			   users:[

			   ]
			  },
			  beforeCreate(){
				  console.log("beforeCreate")
			  },
			  created(){
				  console.log("created")
			  },
			  beforeMount(){
				  console.log("beforeMount")
			  },
			  mounted(){//vue对象创建成功且与标签绑定后执行，这是我们常用的，再次自动的与后端交互
				  console.log("created")
			  }
			})
		</script>
	</body>
</html>

404_NOT_FOUND@

关注

22
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
web前端——VUE

框架结构就是基本功能，把很多基础功能已经实现了、封装了。在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率vue.js是一个js框架，不是代替js的，是对js进行了封装。Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架。3.Vue.js 优点①体积小压缩后 33K。
复制链接

扫一扫

专栏目录