Vue基础介绍

1. Vue介绍

1.1 Vue是什么

Vue.JS是优秀的前端 JavaScript 框架

react/angular/vue

库和框架的区别:

库(如jQuery)

库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
框架

框架提供了一套完整解决方案,

使用者要按照框架所规定的某种规范进行开发

1.2 为什么要学习 Vue

传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt

随着项目业务场景的复杂,传统模式已无法满足需求，就出现了Angular/React/Vue等框架

企业需求
主流框架之一(React Angular Vue)
易用、灵活、高效

1.3 Vue 能做什么

最大程度上解放了 DOM 操作
单页web项目(SinglePageApplication项目,例如Worktile官网)开发
传统网站开发

1.4 核心特性

双向数据绑定
- vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)
通过指令扩展了 HTML，通过 表达式 绑定数据到 HTML
解耦视图与数据
可复用组件
虚拟DOM
M-V-VM
数据驱动视图

1.5 一些链接

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

2. Vue起步

2.1 安装Vue

直接下载源码然后通过路径引入
- 开发版本：https://vuejs.org/js/vue.js
- 生产版本：https://vuejs.org/js/vue.min.js
CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

使用 npm 下载（默认安装最新稳定版) 然后通过路径引入

npm init -y
npm i vue

Vue.js 不支持 IE8 及其以下版本

2.2 HelloWorld

作用:将数据应用在html页面中

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...     
	new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据

<!-- 我是Vue所管理的视图div#app -->
<div id="app">
    <!-- 在视图里使用Vue实例中data里面的list数据 -->
    <p>{{list}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: '我是模拟发起ajax请求后从服务端返回的数据'
        }
    })
</script>

2.3 Vue实例的选项(重要)

el

作用:当前Vue实例所管理的html视图
值:通常是id选择器(或者是一个 HTMLElement 实例)
不要让el所管理的视图是html或者body!

data

Vue 实例的数据对象，是响应式数据(数据驱动视图)
可以通过 vm.$data 访问原始数据对象
Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
视图中绑定的数据必须显式的初始化到 data 中

methods

其值为可以一个对象
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

代码演示

<div id="a">
    {{msgA}} -- {{fn1()}}
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        // el作用:指定当前Vue实例所管理的视图,值通常是id选择器
        // 1. el的值可以是css选择器,通常是id选择器
        // 2. el的值不能是html标签和body标签

        el: '#a',
        // data作用:指定当前Vue实例的数据对象
        // 1. data中的数据是响应式数据
        // 2. 值可以是一个对象 {属性: 值}
        // 3. 所有数据部分写在data中
        // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
        // 5. 可以通过vm.$data.属性 访问数据
        // 6. 可以通过vm.属性 访问数据(更简单)
        data: {
            msgA: '第一个Vue实例对象'
        },
        // methods作用:指定当前Vue实例中的方法
        // 1. 可以直接通过vm实例访问这些方法，
        // 2. 方法中的 this 自动绑定为 Vue 实例。
        // 3. 不推荐使用箭头函数
        methods: {
            fn1: function() {
                console.log(this.msgA);
                console.log('vm实例中的methods里的fn1方法被调用');
            },
            fn2: function() {
                this.fn1();
                console.log('fn2方法被调用--');
            },
            fn3: () => {
                console.log(this);
            }
        }
    });
    // 调用fn2方法
    vm.fn2();
    // 调用fn3方法
    vm.fn3();
</script>