Vue学习笔记——邂逅Vuejs

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战

邂逅Vuejs

认识Vuejs

为什么学习Vuejs

简单认识一下Vuejs

（了解） ==渐进式框架==可以将Vue作为应用的一个部分嵌入其中

可以用Vue对项目进行重构

Vue的核心库：core+Vue-router+Vuex

Vue有很多特点。 web开发中的高级功能

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

学习前提

√ HTML、CSS、JavaScript 熟练掌握

×Angular是Angularjs新的版本、React、JQuery

Vue.js安装

方式一：直接CDN引入

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

vscode-> 插件

Vue初体验

Hello Vuejs

let 变量 const 常量[不可修改]

（编程范式：==声明式编程==）

let name = 'why'
name = 'kobe'

image-20210707193911808

^传统元素js的做法（编程范式：==命令式编程==）

1.创建div元素.设置id属性

2.定义一个变量叫message

3.将message变量放在前面div元素中显示

4.修改message的数据：xxxx

5.将修改后的数据再次替换到div元素

Vue列表展示

v-for

    

        
{{item}}
    

计数器

传统 命令式

1.拿button元素

2.添加监听事件

声明式

新的属性： methods. 用于在Vue对象中定义方法

新的指令：@click = v-on:click

语法糖：简写

image-20210707195219667

vue中的MVVM

Model View ViewModel

image-20210707195342841

• View层：
  视图层
  在我们前端开发中，通常就是DOM层。
  主要的作用是给用户展示各种信息。
• Model层：
  数据层
  数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
  在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
• VueModel层：
  视图模型层
  视图模型层是View和Model沟通的桥梁。
  一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

Vue的options选项

options可以包含哪些选项：官网

• el:
  类型：string | HTMLElement
  作用：决定之后Vue实例会管理哪一个DOM。
• data:
  类型：Object | Function （组件当中data必须是一个函数）
  作用：Vue实例对应的数据对象。
• methods:
  类型：{ [key: string]: Function }
  作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。