Vue基础

最新推荐文章于 2023-06-08 11:58:25 发布

Forever_轩

最新推荐文章于 2023-06-08 11:58:25 发布

阅读量142

点赞数

分类专栏：前端 Vue 文章标签： Vue

本文链接：https://blog.csdn.net/Forever_che/article/details/99876692

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

Vue基础和前端框架

前端框架

前端开发流程规范
前端框架在做什么？为什么要用？
- js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：
  1. 渲染数据
  2. 操作DOM
  3. 操作cookie等存储机制api
- 在前端开发中
  - 难题: 如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
    - 解决:
      - 而js框架对上述的几个问题都有自己趋于完美的解决方案，
      - 开发成本降低。高性能高效率。
      - 唯一的缺点就是需要使用一定的成本来学习。

Vue基础

英文官网中文官网
vue框架项目介绍
- 作者：尤雨溪
- Vue.js是尤雨溪的个人项目
- Vue.js是MVVM框架
- Vue.js它是一个单项数据流的框架
- Vue.js是一个js渐进式框架
  - 渐进式：越学越难
MV*模式的介绍
- MV*模式图示
Vue数据绑定
当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue
- Vue是一个构造器函数
  - Vue(options)
    - 参数:options 称之为选项，类型：Object
    - options / el :
      - 我们称之为自动挂载：将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了( body不能作为el的挂载目标)
    - options / data 数据:
      - new类型中data选项是一个对象
      - 使用形式：在实例范围内，它相当于全局变量 ,我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
      - 使用范围： el确定的那个范围
```
  // var vm = new Vue( options ) // 实例化Vue的到vm实例
  var vm = new Vue({
    el: '#app',// document.querySelector('#app')
    data: {
      msg: 'hello Vue.js'
    }
  }) // 实例化Vue的到vm实例
```
  - Vue是一个MVVM框架
  - M: data选项
  - V：el挂载的东西
  - VM： vm实例
  - Root组件/根组件/根实例
    - 通过new Vue中el选项确定的实例范围，这个Dom结构就是Root组件
```
<body>
    <div id="app">
        <h3> VM改变 ——> V也跟着改变 </h3>
        {{ msg }}
        <h3> V改变 -> VM也跟着改变 </h3>
        <input type="text" v-model="msg">
    </div>
</body>
```
  - Vue中双向数据绑定式通过 v-model 这个指令来实现的
  - 当我们将vm中的data改变时，会发现视图也跟着改变了,这个模式我们称之为：数据驱动
  - 数据驱动：数据驱动视图改变
  - Vue官方将这种模式称之为：深入响应式原理
  - 深入响应式原理(底层原理)
```
 // 目的： 使用原生js来实现Vue深入响应式 
  var box = document.querySelector('.box')
  var button = document.querySelector('button')
  var data = {
    name: 'Jick'
  }
  // 观察者对象
  var observer = {...data} 
  
  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )
  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })
  button.onclick = function () {
    data.name = "Rose"
  }
  box.innerHTML = data.name 
```
  - Object.defineProperty(obj，prog，descriptor)
    - 参数 obj:要在其上定义属性的对象
      
      prog:要定义或修改的属性的名称。
      
      descriptor:将被定义或修改的属性描述符。
      - descriptor:
        configurable 是否可删除，默认false
        enumerable 属性是否可枚举，默认false
        writable 是否可以被赋值符修改默认false
        get 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象
        set 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
  - 如何理解深入响应式原理
    - Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新
      - 监听：选项/watch

Forever_轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

Vue基础和前端框架前端框架前端开发流程规范前端框架在做什么？为什么要用？js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：渲染数据操作DOM操作cookie等存储机制api在前端开发中难题: 如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？解决:...
复制链接

扫一扫