前端框架Vue知识点总结

最新推荐文章于 2024-07-14 08:31:17 发布

置顶会编程的小范闲

最新推荐文章于 2024-07-14 08:31:17 发布

阅读量484

点赞数 3

分类专栏： vue 文章标签： vue vue.js es6

本文链接：https://blog.csdn.net/weixin_42081923/article/details/109537540

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vuejs介绍及入门

1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/
渐进式：选择性使用，就是在需要用的时候就可以使用，能够和JavaScript，jQuery等框架一起结合使用，没有严格的使用场景；
实现响应的数据绑定和组合的视图组件：将视图UI和业务逻辑分开，简单理解就是前后端可以分离开来，后端代码写好，测试通过后可以再去写前端，把数据绑定过来即可。

1.2 MVVM模式
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

1.3 VueJS 快速入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">      
			{{message}}       <!--//vue的插值表达式，把data中定义的数据显示在这-->
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",               //表示当前vue对象接管了div区域
			data:{
			    message:"hello vue?"  //此处不要加分号
			}
		})
	</script>
</html>

{{message}}：插值表达式，数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对

象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

注意：v-bind的用法
插值语法不能作用在 HTML 标签属性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<font size="5" v-bind:color="ys1">范延钧</font>
			<font size="8" :color="ys2">范延钧</font>
			<hr>
			<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",   //表示当前vue对象接管了div区域
			data:{
			    ys1:"red",
				ys2:"green",
				id:1
			}
		})
	</script>
</html>

ys1:“red”,ys2:“green”,是修饰两个字体的颜色的，这里需要v-bind：或者：修饰标签属性

1.4 v-for

它的作用用到的比较多，用来循环遍历数组，对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products">
					<td>{{index}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
                products:[
                    {id:1, name:"bijiben", price:6000},
                    {id:2, name:"shouji", price:8000},
                    {id:3, name:"dainshi", price:5000},
                ]
            }
        })
	</script>
</html>

1.5 v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码,以
v-on:click为例

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button v-on:click="fun1('vue v-on')">点击改变数据</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
                message:"hello vue"
			},
			methods:{
			    fun1:function (msg) {
					alert("hello");
					this.message=msg;
                }
			}

		});
	</script>
</html>

1.6 .VueJS ajax
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，相当于之前学的Ajax。
先得引入库如下

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

语法格式见下面代码

在这里插入图片描述
这里简单说明一下，created()这个函数不用管，这是vuejs生命周期的东西，基本开发时不涉及到，几乎能用到的就是created()。黑色圈住的this的意思是，products是定义在vue里面的，相当于是全局变量，created()函数里面要想给他赋值，首先得把之前的全局变量放进来，var _this = this;这句代码就起这个作用的。
蓝色圈住的就是类似Ajax的post请求，括号里就是url,可以是本地文件路径，也可以是请求路径。
下一个博客我会具体一个案例来说明vuejs的使用，今天大家先学一些基础入门。如果觉得不错，点赞收藏一下！

会编程的小范闲

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端框架Vue知识点总结

Vuejs介绍及入门1.1 VueJS介绍Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/渐进式：选择性使用，就是在需要用的时候就可以使用，能够和JavaScript，jQuery等框架一起结合使用，没有严格的使用场景；实现响应的数据绑定和组合的视图组件：将视图UI和业务逻辑分开，简单理解就是前后端可以分离开
复制链接

扫一扫