什么是vue?
vue是渐进式的javascript框架,一套拥有自己规则的语法;
那什么是渐进式呢?
渐进式:逐渐进步,想用什么就用什么,不必全都使用;
那什么又是库和框架呢?
库:封装的属性或方法(例:jquery.js);
框架:拥有自己的规则和元素,比库强大的多;
我们学习 vue的目的是什么?可以说是为了花更少的时间,干更多的活,提高开发网站的效率和速度;
为什么有些人js已经很熟了,还必须要学习vue呢。难道不可以不学吗?当然可以,不学vue也能找到工作,但为了顺应当前的前端开发形势,如果想要找到一份高薪的工作,vue可以说是必备技能,现在很多项目都是用vue开发的,市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue 。学习vue实质上是转变了自己代码开发的思想,学习vue的语法,使代码开发更加的灵活。
下面我来举个例子:
把数组数据-循环铺设到li中, 看看分别用js原生和vue是如何做的?
原生js做法:
<ul id="myUl"></ul> <script> let arr = ["春天", "夏天", "秋天", "冬天"]; let myUl = document.getElementById("myUl"); for (let i = 0; i < arr.length; i++) { let theLi = document.createElement("li"); theLi.innerHTML = arr[i]; myUl.appendChild(theLi); } </script>
vue.js做法:
<li v-for="item in arr">{{item}}</li> <script> new Vue({ // ... data: { arr: ["春天", "夏天", "秋天", "冬天"] } }) </script>
注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js
可以看到,我们用原生js实现上述功能,不仅要获取、创建元素,还要使用for循环来遍历数组,最后插入子标签,代码复杂冗余,所以对于开发人员来说是不推荐的;
而使用vue实现该功能,只需要用到v-for的语法来遍历数组,便可以自动将数据排列到标签中,代码简单高效.......
-----------------------------------------------------------分割线-----------------------------------------------------------
好啦,今天就说到这里,后续我会持续更新有关vue的内容,教大家如何学习vue,记得关注哦~~拜拜~~