技术栈学习——Vue、Vuejs学习

01 认识Vuejs+Vuejs安装+初体验+MVVM架构

前端框架，需了解html、CSS、JavaScript基本知识

Vue (读音 /vjuː/，类似于 view)构建用户界面的渐进式JavaScript框架 （可以作为add-on模块） ，与其他框架不同可以自底向上逐层应用，只关注视图层。

安装： 安装 — Vue.js (vuejs.org) 选择开发版本链接另存为。常见前端编辑器$vscode/WebStorm$

<div id="app">{{message}}</div>
<script src="../js/vue.js"></script> // 建立一个js文件夹，将下载好的vue.js复制到该目录下
<script>
    // 编程范式：声明式编程（目前更流行）
    const app = new Vue({ // let(变量) const(常量,不能再赋值) var(没有作用域范围，不推荐使用)
        el: "#app", // 用于挂载要管理的元素,交给const app管理标签，解析<div>间语法
        data: { // 定义数据
            message: "Hello Vuejs"
        }
    })
</script>

区别于元素js的做法（编程范式：命令式编程）

1. 创建div元素，设置id属性；2. 定义一个变量message；3. 将message变量放在前面的div元素中显示；4. 修改message数据：Hello World；5. 将修改后的数据再次替换到div元素中

声明式编程优点：1. 数据和编程解耦；2. 在服务器开发者工具console修改app.message并不需要修改源码，体验到vue的响应式。当数据发生改变时，界面会相应做出响应

代码逻辑： 1. 创建Vue对象；2. 创建Vue对象时，传入一些options : {} el属性决定Vue对象挂载在哪个元素；data属性存储数据，可能独立定义，也可以是从服务器加载的。当数据变多的时候自动展示

Vue列表显示

<script src="../js/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "你好啊",
            movies: ['星际穿越', '大话西游', '盗梦空间', '少年派']
        }
    })
</script>

多行注释：选中要注释的代码，然后Ctrl + ‘/’ 取消注释Ctrl+Shift+’/’

计数器

<div id="app">
    <h2>当前计数： {{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    // 语法糖
    // proxy代理
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            add: function() {
                console.log('add被执行');
                this.counter++
            },
            sub: function() {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

新的指令：@click，语法糖 是v-on:click的简写，用于监听某个元素的点击事件

Vue中的MVVM Model $ViewModel$ View

什么是MVVM框架？ - 知乎 (zhihu.com)

创建Vue实例传入的options

• el : string | HTMLElement 决定Vue实例管理哪一个DOM
• data : Object | Function(组件当中data必须是一个函数) Vue实例对应的数据对象
• methods : ([key : string] : Function) 定义属于Vue的方法，也可以在指令中使用

Vue的生命周期

在github上下载源码时看一下branch，比如是dev属于开发中的版本。开发完一个版本以后可以打一个Tag（release 2.5.21)公司中一般有2个版本 - release和debug版本，下载时选择release版本下载

DOM 是什么？ - 知乎 (zhihu.com)