Vue.js入门指南（一）

前言

JRedu

　之前用过一段时间的AnglarJS 1.X,在低版本的AngularJS中,脏值检查在变量增多的情况下会影响程序的响应速度。后期的2.X和更高版本在脏值检查等问题上做了优化，来满足广大用户对性能的要求。但是咱们今天不介绍高版本的AngularJS，咱们来看另一个在AngularJS的基础上出现的新js库-Vue.js。 Vue.js发展到今天，也有了版本2，咱们今天就直接介绍版本2 的相关知识，至于版本1，大家可以选择去看一下，如果没有时间，直接接触版本2也没有任何问题。。

首先说一下Vue.js不支持IE8及以下版本。

学习Vue.js有两个常用的版本:开发版和生产版。在项目开发过程中建议使用开发版，遇到错误，会进行提示和警告。如果你想快速的了解Vue.js中的相关知识点，可以登录https://jsfiddle.net/chrisvfritz/50wL7mdz/直接在线学习。

但是我还是推荐大家创建自己的项目，在自己的项目中使用Vue.js。和使用其他的js库一样，如果想在项目里使用Vue.js需要在项目中引入Vue.js库文件。也可以使用网络资源：<script src="https://unpkg.com/vue"></script>。

Vue.js因为是从Angular.js发展来的，所以语法特点和Angular.js类似，咱们先来看一下Vue.js是怎么把数据绑定到Dom中的。

从上面的代码中可以看出，如果你想使用Vue.js，你需要在你的项目中的head标签中导入Vue.js的库文件。然后看一下数据的绑定，相比Angularjs的绑定方式，Vue.js的数据绑定更加简单，只需要实例化一个Vue对象即可。在Vue对象中通过el指定你要对哪个元素绑定数据，el对应的元素值写法和jquery写法类似。而data则是要绑定到元素上的数据。在元素中，我们只需要通过{{}}将要绑定的数据绑定到元素中即可。这时候即可实现模板数据绑定到Dom中的效果，更改模板，Dom的显示效果也就会发生变化。

这时候，有些人可能会有疑问了，如果我要绑定一个属性怎么办呢？不要担心，Vue.js提供了一个和Angular.js的ng-bind类似的指令：v-bind。以后大家在Vue.js的项目中遇v-开头的，都是Vue.js提供的特殊属性，我们可以称

从上面的代码中咱们可以看到，通过Vue.js提供的v-bind指令，可以实现模板数据绑定到属性上的功能。要绑定的数据同样只需要添加到data中即可。

Vue.js除了可以将数据绑定到Dom中，也可以通过模板数据控制元素的显示或者是隐藏，v-if指令可以起到该作用。

只需要在data中添加v-if需要的数据，就可以控制Dom的显示和隐藏。

还有一个指令是大家在项目开发过程中经常用到的。那就是v-for。它可以实现对大批数据进行循环展示，而不需要去编写大量的Dom。

上面的例子给大家展示了怎么通过v-for指令实现只写一个li标签而实现多个li标签显示的效果。语法特点和前几个Vue.js指令类似。

今天Vue.js就介绍到这里，相信之前学过AngularJS的同学已经发现问题了。是不是AngularJS的翻版啊。哈哈，没错，文章开头就已经给大家说了，Vue.js就是在吸收了AngularJS的优点，优化了它的缺点发展起来的。还没有接触过Vue.js的同学们赶快学习一下吧。

转载于:https://www.cnblogs.com/jerehedu/p/7483147.html

Vue.js入门指南（一）相关推荐

Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
开奖及送书|《Vue.js权威指南》
2020 06 15 今天距2021年199天这是一页河山第135次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 07:30准时推送. 微信公众号后 ...
Three.js入门指南
1.threejs导入3d模型到web端,3d模型的文件格式可以找个建模软件转化为threejs所支持的格式,如.dae .obj .mtl stl gld等 harp.gl 3D地图渲染引擎 key ...

Vue.js入门指南（一）

Vue.js入门指南（一）相关推荐

最新文章

热门文章