文章目录
01、邂逅vue.js1、Vue是一个渐进式的框架的理解？2、Vue.js安装3.vue案例：列表展示（v-for）4、vue案例：计数器4、Vue的MVVM01、邂逅vue.js
1、Vue是一个渐进式的框架的理解？
问题一、vue.js的两个核心是啥？
问题二、对于Vue是一套构建用户界面的渐进式框架的理解
2、Vue.js安装
补充知识点：let 和 const
补充知识点：命令式编程 和 声明式编程的区别
3.vue案例：列表展示（v-for）
4、vue案例：计数器
技巧：快捷指令 div#app
问题：为什么使用vue实例中定义的数据，要使用this
4、Vue的MVVM
6、Vue实例options的含义
7、Vue的生命周期
8、Vue在开发中体现出来的特点
9 、vue template (模板)
9.1 设置缩进2个字符
9.2 快速生成vue模板
1、Vue是一个渐进式的框架的理解？
/xiangxiang/p/12734547.html
渐进式代表的含义：没有多做职责之外的事。
Vue.js 只提供 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。像vuex、vue-router 都属于围绕 vue.js开发的库。
问题一、vue.js的两个核心是啥？
1、数据驱动，也叫双向数据绑定
采用 “数据劫持” 结合 “发布者-订阅者” 模式的方式，通过 “Object.defineProperty” 方法来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调
2、组件系统
vue组件核心选项：
模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系
初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，通常是私有状态
接受外部参数（props)：组件之间通过参数进行数据的传递和共享
方法（methods）: 对数据的改变操作一般都在组件的方法内进行
生命周期钩子函数（lifecycle hooks）: 一个组件会触发多个生命周期钩子函数
私有资源（assets）：Vue.js将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以申明自己的资源。私有资源只有该组件和它的子组件可以调用
问题二、对于Vue是一套构建用户界面的渐进式框架的理解
渐进式的含义:没有多做职责之外的事
vue.js 只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定，像vuex、vue-router 都属于围绕 vue.js开发的库
比如说，使用Angular，必须接受
必须使用它的模块机制
必须使用它的依赖注入
必须使用他的特殊形式定义组件
Angular带有较强的排他性，如果你的应用不是从头开始，而是不断考虑是否和其他东西集成，这些主张会带来困惑
比如说，使用React，必须理解
函数式编程的理念
需要知道什么是副作用
如何隔离副作用
什么是纯函数
它的侵入性看似没有Angular那么强，主要因为它是软性侵入
Vue与React、Angular的不同，它是 渐进式的。
你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；
也可以整个用它全家桶开发，当Angular用
2、Vue.js安装
安装Vue的方式有很多
方式一、直接CDN引入
可以选择开发环境版本还是生产环境版本
//开发环境版本，包含了有帮助的命令行警告
//生产环境版本，优化了尺寸和速度(压缩过的代码)
1
2
3
4
方式二、下载和引入
开发环境 /js/vue.js
生产环境 /js/vue.min.js
方式三、npm下载
后续通过webpack和CLI的使用，我们使用该方式
{{name}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
补充知识点：let 和 const
let 定义变量
const 定义常量
补充知识点：命令式编程 和 声明式编程的区别
命令式编程
例如你想通过点击改变页面中某一个元素，首先要获取按钮，再给按钮添加点击事件，获取要改变的元素，执行点击函数，改变元素达到自己的目的，这是一步一步的步骤操作，就如同给计算机发布命令，一步一步执行
//元素js的做法
1、创建div元素，设置id属性
2、定义一个变量叫message
3、将message变量放到div元素中显示
1
2
3
4
声明式编程（见上）
简单的说，你只需要告诉计算机，你要得到什么样的结果，计算机则会完成你想要的结果，以Vue为例，在页面中通过 {{ }} 显示一个data里面的变量，你只需要改变这个变量，页面就会跟着刷新，这就是你只需要结果，vue 内部去处理过程
区别？
问题：为什么使用vue实例中定义的数据，要使用this
定义 methods方法 的时候，注意:
使用 普通函数 的方式，this指向Vue实例
使用 箭头函数 的方式，this指向window
普通函数
————————————————
版权声明：本文为CSDN博主「二旬」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/weixin_44572568/article/details/128823514
如果觉得《【无标题】二级目录二级目录二级目录二级目录》对你有帮助，请点赞、收藏，并留下你的观点哦！
