Vue2.0基础

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实例

---

Vue的指令

v-cloak

处理页面闪烁问题,当页面插值还未获取到值时页面会显示出插值,v-cloak的解决原理就是在未获得值时在元素上增加display: none来隐藏元素.

v-text

• 可以赋值data中的数据 此时会覆盖div包裹的字符
  
  --------

v-html

• 可以把字符串当做html 元素来进行解析

v-bind

1. 用来绑定属性 简写为(:被绑定的属性),
2. v-bind中可以写合法的js 表达式

 //初始写法
 //简写
 //合法的表达式

v-on重要的指令

1. 用来绑定各种事件例如click,hover最多的还是点击
2. 简写为(@:事件类型="事件函数名")

 //原始写法
 //缩写

v-model重要的指令

• 双向数据交互的基础 在表单元素中使用v-model指令可以快速的得到用户输入的数据并且通过VM更新到data中

    

        
{{modelData}}
         

v-for 重要的指令

1. 可以循环迭代数字,数组,对象数组

  
索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}

2. 迭代对象属性

{{val}} --- {{key}} --- {{i}}

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

v-for key使用的注意点

1. 注意： v-for 循环的时候，key 属性只能使用 number获取string
2. 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
3. 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值

    

      {{item.id}} --- {{item.name}}
    

v-if

v-if 的创建和删除
v-if 进行取反操作
v-if js合法表达式控制

1. 当属性值为true时 创建并显示元素,false时移除元素
2. 创建和删除会让浏览器重新渲染,导致了更多的渲染开销,但如果元素一直不显示的话就不会进行渲染

v-show

1. 同v-if一样通过true和false来控制元素的隐藏和显示
2. 不同于v-if 删除创建的方式,v-show 使用的时添加样式display-none来控制显隐
   
   image.png
3. 和v-if相比v-show 多了初始化时的开销,少了渲染开销