初识Vue

1. Vue基本概念

1.0_为何学Vue

目标: 更少的时间,干更多的活. 开发网站速度, 快

 例如: 把数组数据-循环铺设到li中, 看看分别如何做的?

 原生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

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

现在很多项目都是用vue开发的

 

市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue

 

1.1_Vue是什么

logo镇楼

 

==渐进式==javacript==框架==, 一套拥有自己规则的语法

官网地址: Vue.js (作者: 尤雨溪)

什么是渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

 

Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助

 

什么是库和框架

补充概念:

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

 

 

1.2_Vue学习的方式

• 传统开发模式：基于html/css/js文件开发vue

• 

   

• 工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式

 

Vue如何学

<