1分钟,带你了解 Vue2.x 渐进式框架!

文章目录

    • 什么是渐进式框架
    • Vue与Jquery对比
    • 快速开始
    • 声明式渲染
    • MVVM模式实践
    • 常见Vue指令
    • Vue快速入门免费视频地址


什么是渐进式框架

Vue 没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已 ()


Vue与Jquery对比

JQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,数据和界面还是是在一起的。当页面结构较为复杂时,Jquery选择器的难度和代价都会增加

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM (MVVM是什么鬼,大家自行谷百哈)


快速开始

引入vue.js 即可开始vue.js之旅, 后续学习建议保存在本地运行会更快!

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,代码如下 (图片右上角单击可复制代码)


<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue数据绑定功能title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	head>
	<body>
		
		<div id="app">	
		div>
		<script type="text/javascript">
			// el属性来指定Vue对象挂载到那个标签元素中
			var app = new Vue({
				el: '#app'
			})
		script>
	body>
html>

MVVM模式实践

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM:

<body>
	
	<div id="app" v-bind:title='title'>
		{{message}}
	div>
	<script type="text/javascript">
		var app = new Vue({
			// el属性来指定Vue对象挂载到那个标签元素中
			el: '#app',
			// 需要与前端绑定的数据都写在data中
			data:{
				message: 'Hello Vue!',
				title: 'vue data title'
			}
		})
	script>
body>
html>

常见Vue指令

在Vue中v-开头都称为指令,每个都有特殊的功能。例如,v-for 指令可以绑定数组的数据来渲染一个项目列表

<body>
	<div id="app">
		<ol>
			<li v-for="item in list">{{item.text}}li>
		ol>
	div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				list: [{text: '学习 JavaScript'},
					   {text: '学习 Vue'},
					   {text: '整个牛项目'}]
			}
		});
	script>
body>

Vue快速入门免费视频地址

视频观看地址:https://study.163.com/course/introduction/1006272002.htm

1分钟,带你了解 Vue2.x 渐进式框架!_第1张图片

你可能感兴趣的:(前端开发)