Vue.js的第一天学习

最新推荐文章于 2024-03-26 22:25:48 发布

Joker_Tonglp

最新推荐文章于 2024-03-26 22:25:48 发布

阅读量951

点赞数 4

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

本文链接：https://blog.csdn.net/Bmom_1Mpac/article/details/107093352

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、Vue.js
1.1 概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 起步
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

2、Node (后端)中的MVC与前端中的MVVM之间的区别

●MVC是后端的分层开发概念;
●MVVM是前端视图层的概念,主要关注于视图层分离,也就是说: MVVM把前端的视图层,分为了三部分Model，View，VM ViewModel
●为什么有了MVC还要有MVVM

MVVM与MVC间的联系 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

下面可以以一个小页面带大家感受一下(我也是通过这样一个页面来感受了一下Vue.js跟以前用的jquery的不同之处，从jquery到vue或者说是到mvvm的转变则是一个思想的转变，是将原有的直接操作dom的思想转变到操作数据上去。
1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低
2.vue：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvvm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起 )

3、第一个Vue.js页面：
描述：导入Vue的包(“vue.js”)
放进js包内，

在script标签内，引入vue.js的路径，
在标签内，引入vue.js的路径

<!-- 描述：1、导入Vue的包 -->

<body>
	<!-- 描述：用来new的Vue实例，会控制这个元素的所以内容 -->
    <!-- Vue实例控制的这个元素区域，就是我们的v -->
	<div id="app">
		<p>{{msg}}</p>
		<!--<p id="content"></p>-->
	</div>
	<script type="text/javascript" src="js/vue.js" ></script>
	<script>//2.创建一个Vue的实例
	//当我们导入包之后，在浏览器的内存中，就多了一个Vue的构造函数
	var vm = new Vue({
		el: '#app',//表示我们当前new的这个Vue实例，要控制页面
		//这里的data就是MVVM中的M，专门用来保存每个数据的
		data:{ //data属性中，存放的是el中用到的数据
			msg:'Hello!欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，我们程序员不需要手动去操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
		}
		
	})
	</script>
</body>

4、v-cloak、v-html、v-text、v-bind的使用:

v-cloak：能够解决插值表达式闪烁的问题
v-text：默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符，v-text和{{}}表达式渲染数据，不解析标签。
v-html：v-html不仅可以渲染数据，而且可以解析标签。
v-bind：绑定元素特性

<style>
	[v-cloak]{
		display:none;
	}
</style>
<body>
	<div id="app">
		<!-- 使用v-cloak 能够解决 插值表达式闪烁的问题-->
		<p v-cloak>{{msg}}</p>
		<h4 v-text="msg">========</h4>
		<!--默认v-text是没有闪烁问题的 ，v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符-->
		
		
		<div >{{msg2}}</div>
		<div v-text="msg2"></div>
		<div v-html="msg2"></div>
		<!-- v-bind: 是Vue中，提供的用于绑定属性的指令-->
		<!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" />-->
		<!-- 注意：v-bind:指令可以被简写: 为要绑定的属性-->
		<!-- v-bind中，可以写合法的JS表达式 -->
		<input type="button" value="按钮" v-bind:title="mytitle " />
	</div>
	
	
	
	<script type="text/javascript" src="js/vue.js" ></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'123',
				msg2:'<h1>哈哈，我是大大的h1<h1>',
				mytitle:'一个自己定义的title'
			}
		})
	</script>
</body>

注意：v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你也已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 mytitle属性保持一致”。