MVC和MVVM 的区别
MVC
- 整体框架的开发思想
- M代表了数据层一般是后台的数据调用和sql语句交互
- C一般是router和control 承载了路由分发和逻辑处理
- V则是显示交互层 一般就是前端开发所考虑的
MVVM
- 前端开发所拥有的思想,让开发者不在关心与频繁且琐碎的DOM操作,而是更加专注于逻辑实现
- M数据 指单页面中vue实例里的data所包含的数据
var vm = new Vue({
el: "#app",
data: {
msg: ""
},
})
- VM 数据的实际支配者 MVVM思想的核心,数据和页面实现双向绑定就是VM的功劳也就是Vue实例所起到的作用.
- V显示层实际的效果层,数据的渲染展示必须要经过VM才可以
Vue的基本组成
- 引入Vue的js
- script 标签中 创建Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: ""
},
})
</script>
</html>
Vue的指令
v-cloak
处理页面闪烁问题,当页面插值还未获取到值时页面会显示出插值,v-cloak的解决原理就是在未获得值时在元素上增加display: none来隐藏元素.
v-text
- 可以赋值data中的数据 此时会覆盖div包裹的字符
<div v-text ="msg2" >--------</div>
v-html
- 可以把字符串当做html 元素来进行解析
<div v-html ="msg2" ></div>
<!-- msg2:'<h1>我是h1</h1>', -->
v-bind
- 用来绑定属性 简写为(:被绑定的属性),
- v-bind中可以写合法的js 表达式
<input type="text" v-bind:value="msg"> //初始写法
<input type="text" :value="msg"> //简写
<input type="text" :value="msg+msg2"> //合法的表达式
v-on重要的指令
- 用来绑定各种事件例如click,hover最多的还是点击
- 简写为(@:事件类型="事件函数名")
<input type="button" value="按钮" v-on:click="click"> //原始写法
<input type="button" value="按钮" @:click="click"> //缩写
v-model重要的指令
- 双向数据交互的基础 在表单元素中使用v-model指令可以快速的得到用户输入的数据并且通过VM更新到data中
<body>
<div id="app">
<p>{{modelData}}</p>
<input type="text" v-model:value="modelData"> </div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
modelData:"v-model的数据"
},
methods:{},
})
</script>
v-for 重要的指令
- 可以循环迭代数字,数组,对象数组
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
- 迭代对象属性
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
v-for key使用的注意点
- 注意： v-for 循环的时候，key 属性只能使用 number获取string
- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
v-if
<div v-if="flag">v-if 的创建和删除</div>
<div v-if="!flag">v-if 进行取反操作</div>
<div v-if="flag?false:true">v-if js合法表达式控制</div>
- 当属性值为true时 创建并显示元素,false时移除元素
- 创建和删除会让浏览器重新渲染,导致了更多的渲染开销,但如果元素一直不显示的话就不会进行渲染
v-show
- 同v-if一样通过true和false来控制元素的隐藏和显示
- 不同于v-if 删除创建的方式,v-show 使用的时添加样式display-none来控制显隐
image.png - 和v-if相比v-show 多了初始化时的开销,少了渲染开销
