--- theme: vue-pro highlight: a11y-dark --- > 嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: `yk2012yk2012`，微信公众号：`ykyk2012`] 「这是我参与11月更文挑战的第15天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/")」 > 今天学习Vue基础知识...从头开始学，学的还是Vue2, Vue3之前博文里介绍过了，其实本文是我刚学Vue时的笔记，参考的是B站尚硅谷的视频.... # 0. 基本认识 > 渐进式 JavaScript 框架，用来动态构建用户界面 [https://cn.vuejs.org/](https://cn.vuejs.org/) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11199982790f45d49495f177e3776a65~tplv-k3u1fbpfcp-zoom-1.image) ## 0.1 特点 1. 遵循 MVVM 模式 2. 编码简洁，体积小，运行效率高，适合移动/PC 端开发 3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目 4. 采用**组件化**模式，提高代码复用率、且让代码更好维护 5. **声明式**编码，让编码人员无需直接操作DOM，提高开发效率 6. 使用**虚拟DOM**和**Diff算法**，尽量复用DOM节点 ## 0.2 与其他前端 JS 框架的关联 - 借鉴 angular 的 **模板** 和 **数据绑定** 技术 - 借鉴 react 的 **组件化** 和 **虚拟DOM** 技术 ## 0.3 Vue 扩展插件 - vue-cli：vue 脚手架 - vue-resource(axios)：ajax 请求 - vue-router：路由 - vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则） - vue-lazyload：图片懒加载 - vue-scroller：页面滑动相关 - mint-ui：基于 vue 的 UI 组件库（移动端） - element-ui：基于 vue 的 UI 组件库（PC 端） # 1. 引入Vue.js 本地引入 CDN引入 # 2. 创建Vue对象 1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3. root容器里的代码被称为【Vue模板】； 4. Vue实例和容器是一一对应的； 5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； ```javascript //创建Vue实例 new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 name:'YK菌', address:'合肥' } }) ``` 注意区分：js表达式和 js代码(语句) 1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方： (1). `a` (2). `a+b` (3). `demo(1)` (4). `x === y ? 'a' : 'b'` 2. js代码(语句) (1). `if(){}` (2). `for(){}` ## 2.1 el 指定根element(选择器) ## 2.2 data 初始化数据(页面可以访问) ## 关于el和data的两种写法 1. el有2种写法 (1) new Vue时候配置el属性。 ```javascript const v = new Vue({ el:'#root', //第一种写法 data:{ name:'YK菌' } }) ``` (2) 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 ```javascript const v = new Vue({ data:{ name:'YK菌' } }) v.$mount('#root') //第二种写法 */ ``` 2. data有2种写法 (1) 对象式 ```javascript data:{ name:'YK菌' } ``` (2) 函数式 ```javascript data(){ console.log('@@@',this) //此处的this是Vue实例对象 return{ name:'YK菌' } } ``` 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3. 一个重要的原则由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 # 3. 双向数据绑定 : v-model & 显示数据 : {{xxx}} 插值语法 ## 例子 ```html

Hello {{msg}}

``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e68bf479324e4db99d6f568a1de206b3~tplv-k3u1fbpfcp-zoom-1.image) # 4. 理解Vue的MVVM实现 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cfaef66bd3b4b67b032b225ffa34483~tplv-k3u1fbpfcp-zoom-1.image) ## M 模型(Model) ：data中的数据 ## V 视图(View) ：模板代码（不是静态页面）（两个语法：指令，大括号表达式） ## VM viewModel: 视图模型（Vue的实例） - Dom Listeners （Dom 监听） - Data Bindings （数据绑定）

1. data中所有的属性，最后都出现在了vm身上。 2. vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

## MVVM MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。 `模型`model指的是后端传递的数据，`视图`view指的是所看到的页面。 `视图模型`viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：将`模型`转化成`视图`，即将后端传递的数据转化成所看到的页面。实现的方式是：**数据绑定** 将`视图`转化成`模型`，即将所看到的页面转化成后端的数据。实现的方式是：**DOM 事件监听** 这两个方向都实现的，我们称之为**数据的双向绑定** > 最后，欢迎关注我的专栏，和**YK菌**做好朋友