vue.js入门

最新推荐文章于 2025-04-28 11:34:18 发布

以眼泪淋花吧！

最新推荐文章于 2025-04-28 11:34:18 发布

阅读量672

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/DarKer_LB/article/details/121250350

本文介绍了Vue.js的基础知识，包括它是一个渐进式框架，专注于视图层，易于上手且可与其他库结合。文章详细讲解了如何引入Vue.js，展示了模板语法如{{test}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js入门

欢迎大家来到我的博客！

vue入门知识以及模板语法，指令。

我们先来了解一下vue.js。
什么是Vue.js？
vue.js是一套用于构建用户界面的渐进式框架。
vue.js的核心库只关注视图层，不仅容易上手而且还方便和其他的第三方库进行整合例如jq。
学习vue.js必须要对html，css，js有一定的了解。

模板语法以及指令

引入Vue
引入vue可以通过原远程连接来引入。
在这里插入图片描述
代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

也可以去官方文档下载vue.js的文件来本地引入。
官方下载链接：
https://cn.vuejs.org/v2/guide/installation.html

模板语法
在这里插入图片描述

我们引入vue文件后创建一个新的vue应用。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

<!DOCTYPE html>
<html>
	<div id='cs'>
			{{test}}
	</div>
</html>


	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var cs = new Vue({
			el: '#cs',
			data: function() {
				return {
					test: 'Hello World！！！'
				},
			},
			methods: {},

		})
	</script>

在这里插入图片描述
指令
vue,js的指令一共是
v-text
相当于innertext
v-html
相当于innerhtml
v-bind
绑定属性
v-on
绑定事件
v-model
双向绑定
v-if v-else v-esel-if
布尔值为真时显示，为假的时候将这个元素在html销毁，删除
v-show
布尔值为真时显示，为假的时候将这个元素display:none隐藏
v-for
for循环
v-per
不解析模板语法
v-clock
当vue还未渲染完成时隐藏源码
v-once
只渲染元素一次，使用这个指令子节点都会当作静态内容跳过

由于vue.js的指令较多，所以我就挑两个个常用的为大家举个栗子。

v-bind
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	
	<style>
	.color{
		color:red;
	}
	</style>
</head>
<body>
	<div id='cs'>
			<div v-bind:class="color">{{test}}</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var cs = new Vue({
			el: '#cs',
			data: function() {
				return {
					test: 'Hello World！！！',
					color:'color',
				}
			},
			methods: {
				
			},
	
		})
	</script>
</body>
</html>

v-on：

在这里插入图片描述
这边可以看到我绑定的是一个点击事件，通过点击事件换到div的类名。
点击前：

点击后：

<!DOCTYPE html>
<html>
<head>
	
	<style>
	.color{
		color:red;
	}
	.color_s{
		color:blue;
	}
	</style>
</head>
<body>
	<div id='cs'>
			<div v-bind:class="color" v-on:click='alter()'>{{test}}</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var cs = new Vue({
			el: '#cs',
			data: function() {
				return {
					test: 'Hello World！！！',
					color:'color',
				}
			},
			methods: {
				alter(){
					this.color = 'color_s';
				},
			},
	
		})
	</script>
</body>
</html>

栗子我就帮大家举到这里了，接下来总结。

总结
在vue里面数据都是跟DOM有关联的，所有东西都是响应式就像我们最后的v-on一样在后边只是改了变量，但是却可以改变文字的颜色。
我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上然后对其进行完全控制。
我们新建的vue应用中有el，data，methods。
其中el指的是：提供一个在页面上存在的DOM元素来作为vue实例挂载的目标。
data：data是一个用来放变量的对象，data有两种写法，

对象写法
函数写法
这篇文章我使用的就是函数写法。


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