vue基础day01（MVVM、绑定、事件、结构模板）

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代码结构

1. 引入vue.js
2. 书写视图层
3. 创建实例

//引入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=‘’