vue基础
一、什么是vue
构建用户界面的渐进式框架，采用自底向上逐层应用开发
核心理念：数据驱动视图，组件化开发
二、框架和库的区别
框架：一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，需要重新架构整个项目
库：提供了一个小的功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
三、MVC和MVVM的区别
MVC是后端分层开发的概念，一种设计模式Model-View-Controller
- V-view(视图层):发送数据，展示数据
- C-controller(调度层): 响应数据，返回数据
- M-model(模型层):处理数据，与数据库交互
MVVM是前端视图层的概念，是View层的分离
- V-view(视图层):展示数据
- VM-vm-view-model(视图模型层):连接view和model,承上启下的作用
- M-model(模型层):逻辑处理
四、vue代码结构
- 引入vue.js
- 书写视图层
- 创建实例
//引入vuejs，vue版本下载到本地，今后渐进学习中将不再使用，改用新方法
<script src='.vue.js'></>
//书写视图层
<div id='app'> </div>
//创建vue实例
let vm = new Vue({
//控制区域
el:"#app",
//存放数据
data: {
src:'baidu.com'
},
//存放方法
methods: {
console.log(this)//vue实例
//this.src获取到src属性
}
})
五、{{}}/v-html/v-text
//差值表达式：将数据渲染到页面上，做简单运算
{{msg+2}}
//v-text v-html
//相同点:都会替换标签内原有的内容
//不同：v-html会解析富文本，v-text不会
<div c-text='msg'>111</div>
<div v-html='msg'></div>
<div></div>
六、属性绑定和事件绑定
| 属性 | 简写 | 说明 |
|---|---|---|
| v-bind:属性 | ： | 元素属性绑定，用于在该属性中取得data中的数据 |
| v-on:事件类型 | @ | 事件的绑定，用于获取methods中的方法@click=‘m’ |
| v-model:value=‘h’ | v-model=‘h’ | 双向绑定，页面和data中的数据保持同步(用于表单控件input) |
双向绑定的原理：通过数据劫持结合发布者-订阅者模式的方式来实现，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据发生变动时，告诉订阅者是否要更新，执行对应的更新函数从而更新视图
七、事件
冒泡就是三个盒子嵌套，点击最里面的外面的也会触发
| 方法 | 说明(可链式调用) | 代码 |
|---|---|---|
| .stop | 阻止冒泡(从里往外),加了stop此控件不冒泡 | @click.stop=‘’ |
| .capture | 捕获(从外往里)，只会捕获当前控件，其他控件不变 | @click.capture=‘’ |
| .self | 当事件在该元素本身触发时触发回调 | @click.self=‘’ |
| .once | 事件只会触发一次 | @click.once=‘’ |
| .prevent | 阻止默认事件 | @click.prevent=‘’ |