Vuejs2的基础学习笔记_vuejs model层包括什么-CSDN博客

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。”

本文链接：https://blog.csdn.net/qq_45773423/article/details/120784589

文章目录

- - 简单认识一下Vuejs

简单认识一下Vuejs

1. Vue是一个渐进式的框架，什么是渐进式的呢：
  
  渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
  
  或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
  
  比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
  
  Vue有很多特点和Web开发中常见的高级功能
  1. 解耦视图和数据
  2. 可复用的组件
  3. 前端路由技术
  4. 状态管理
  5. 虚拟DOM

Vue中的MVVM

view层：视图层。在我们的前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。
Model层：数据层。数据可能是我们固定的死数据，更多的是来自我们网络上请下来的数据。
VueModel层：视图模型层。视图模型层是View和Model沟通的桥梁。一方面它实现了Data Bingding,也就是数据绑定，将Model的改变实时的展示到View中。另一方面它实现了DOM Listener,也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

计算属性

计算属性的getter和setter方法

计算属性的缓存

ES6语法补充：

块级作用域：

ES5中的var是没有块级作用域的

ES6中的let是有块级作用域的

ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决外面变量的问题。

ES6中，加入了let,let它是有if和for的块级作用域的。

let/var

Vue模板语法

有两大类：

插值语法：

功能：用于解析标签体内容。

写法：{{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：

功能：用于解析标签(包括：标签属性，标签体内容、绑定事件…)

举例：v-bind:href=“xxx” 或简写为 :href=“xxx” xxx同样要写js表达式且可以直接读取到data中的所有属性。

备注：Vue中有很多指令，且形式都是：v-???

Vue中的数据绑定

有两种数据绑定的方式：

**单向绑定(v-bind)😗*数据只能从data流向页面
**双向绑定(v-model)😗*数据不仅能从data流向页面，还可以从页面流向data。

备注：
1. 双向绑定一般都应用在表单类元素上(如input,select等)
2. v-model:value 可以简写为 v-model. 因为v-model默认收集的就是value值。

el和data的两种写法

el有两种写法
1. new Vue时配置el属性
2. 先创建Vue实例，随后通过vm.$mount(‘root’)指定el的值。
data的两种写法
1. 对象式：
2. 函数式
  
  如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会保错。
  1. 一个重要的原则：
  由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了。

MVVM模型

M：模型(Model) : data中的数据
V：视图(View) : 模板代码
VM：视图模型(ViewModel) : Vue 实例

观察发现：
1. data中的所有属性，最后都出现在了vm身上
2. vm身上所有的属性及 Vue原形上所有的属性，在Vue模板中都可以使用。

数据代理

Vue中的数据代理：

通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处：

更加方便的操作data中的数据
基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter和setter.

在getter和setter内部去操作(读/写)data中对应的属性。

事件处理

事件的基本使用：

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了。
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。

事件修饰符

prevent:阻止默认事件(常用)
stop:阻止事件冒泡
once:事件只触发一次
capture:使用事件的捕获模式
self: 只有event,target是当前操作的元素才触发事件
passive: 事件的默认行为立即执行，无需等待事件回调执行完毕。

Vue中常见的按键别名

回车：enter
删除：delete
退出： esc
空格：space
换行：tab (特殊，必须配合keydown.tab使用)
上：up
下：down
左：left
右：right

计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Object.defineProperty()方法提供的setter和getter.
getter函数什么时候执行？
1. 初次读取时会执行一次。
2. 当依赖的数据发生变化时会被再次调用。
优势：与methods实现相比，内部有缓存机制(复用),效率更高，调试方便。
备注：
1. 计算属性最终会出现在vm上，直接读取使用即可。
2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
3. 计算属性中的this对象是vm

代码测试：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

   <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

  <div id="root">

  姓：<input type="text" v-model=firstName><br></br>

  名: <input type="text" v-model=lastName><br>

  全名：{{fullName}}

  
 </div>

  <script>

  Vue.config.productionTip = false //阻止vue在启动时生成生产提示

   const vm = new Vue({

     el: '#root',

     data: {

       firstName:'张',

       lastName:'三'

     },

     computed:{

      fullName:{

       get(){

        console.log('get',this)//this为vm

        return this.firstName +'-'+ this.lastName

       },

       set(value){

        const arr = value.split('-')

        this.firstName = arr[0]

        this.lastName = arr[1]

       }

      }

     }

    

   })

 </script>

</body>

</html>