Vue简述

最新推荐文章于 2023-03-28 20:18:28 发布

原创最新推荐文章于 2023-03-28 20:18:28 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

3 篇文章

订阅专栏

Vue是一个渐进式JavaScript框架，具有易用、灵活和高效的特点。它提供声明式渲染、组件系统、客户端路由和集中式状态管理。文章介绍了Vue的基本使用，包括与传统开发模式的对比，如原生js和jQuery的差异。详细讲解了Vue实例的参数，如el和data，并展示了插值表达式的用法，以及Vue代码的运行原理。

这里写自定义目录标题

一、 Vue概述
二、基本使用
- 传统开发模式对比

一、 Vue概述

Vue：渐进式 JavaScript 框架

官网：https://cn.vuejs.org/v2/guide/

声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建

易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效： 20kB 运行大小，超快虚拟 DOM

二、基本使用

传统开发模式对比

原生js：

<div id="msg"></div>

<script type="text/javascript"> 
	var msg = 'Hello Word';
	var div = document.getElementById('msg');
	div.innerHTML = msg;
</script>

jQuery:

<div id="msg"></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" > 
	var msg = 'Hello';
	$('#msg').html(msg);
</script>

Vue:

<div id="app">
	<div>{{ msg }}</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" > 
	new Vue({
		el: '#app',
		data: {
			msg : HelloWorld
		}
	})
</script>