Vue基础介绍

àì夳堔傛蜴生んèń 2023-06-08 06:16 8阅读 0赞

### 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官网][Worktile])开发
 *  传统网站开发

#### 1.4 核心特性 ####

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

#### 1.5 一些链接 ####

[Vue官方文档][Vue]

[Vue开源项目汇总][Vue 1]

[Vue.js中文社区][Vue.js]

### 2. Vue起步 ###

#### 2.1 安装Vue ####

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

1.  使用 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中的数据

<div id="app">
        
        <p>{
       {list}}</p>
    </div>
    
    <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>

[Vue]: https://cn.vuejs.org/
[Worktile]: https://worktile.com/
[Vue 1]: https://github.com/opendigg/awesome-github-vue
[Vue.js]: https://www.vue-js.com/
[el]: https://cn.vuejs.org/v2/api/#el
[data]: https://cn.vuejs.org/v2/api/#data
[methods]: https://cn.vuejs.org/v2/api/#methods