Vue.js基础

Posted 2022-08-09 zwj-lcx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js基础相关的知识，希望对你有一定的参考价值。

1. 初始vue.js

Vue.js项目介绍

官网地址：英文官网中文官网
Vue.js是一个单向数据流的框架
Vue.js是一个JS渐进式框架
Vue.js也是一个MVVM框架

2. Vue.js的安装

在使用Vue时，推荐在浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试Vue应用

安装1：直接下载并用<script>标签引入，Vue会被注册成一个全局变量

在开发环境下不要使用压缩版本，不然你会失去了所有常见错误相关的警告!

https://cn.vuejs.org/v2/guide/installation.html

安装2：CDN
对于制作原型或学习

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

对于生产环境

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。

安装3：NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

$ npm install vue

3. vue的基础使用

当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue
Vue它是一个构造器函数

   Vue( options )
       this._init( options ) //在初始化执行vue
   参数： options 我们称之为‘ 选项 ’
       类型： Object
       options / el 
         我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
         body不能作为el的挂载目标
         
       options / data 数据
         new类型中 data选项是一个对象
         使用形式： 在实例范围内，它相当于全局变量 
                   我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
         使用范围： el确定的那个范围


   Vue是一个MVVM框架
     M: data选项
     V：el挂载的东西
     VM： vm实例
     
     
      // var vm = new Vue( options ) // 实例化Vue的到vm实例
 var vm = new Vue(
   el: ‘#app‘,// document.querySelector(‘#app‘)
   data: 
     msg: ‘hello Vue.js‘
   
 ) // 实例化Vue的到vm实例

4. MV*模式介绍

MV*模式图示

4.1 概念

M: 模型 => 数据，业务逻辑，验证逻辑，模型常常包含业务逻辑。
V: 视图 => 交互界面，是模型数据的可视化呈现，视图可能包含展示逻辑。
*: 这个部分将帮助管理模型与视图间的关系，以及模型，视图，用户的关系。

4.2传统设计模式

MVC
MVP
MVVM

5. vue深入响应式原理

通过new Vue中el选项确定的实例范围，这个dom结构我们叫它 ‘Root组件/根组件/根实例‘
Vue中双向数据绑定式通过 v-model 这个指令来实现的
当我们将vm中的data改变时，会发现视图也跟着改变了，这个模式我们称之为：数据驱动数据驱动：数据驱动视图改变

html
<body>
    <div id="app">
        <h3> VM改变 ——> V也跟着改变 </h3>
         msg 
        <h3> V改变 -> VM也跟着改变 </h3>
        <input type="text" v-model="msg">
    </div>
</body>

<script src="../../lib/vue.js"></script>
<script>
    var vm = new Vue(
            el: ‘#app‘, // document.querySelector(‘#app‘)
            data: 
                msg: ‘hello Vue.js‘
            
        ) // 实例化Vue的到vm实例
</script>

使用原生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

如何理解深入响应式原理？

Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新
监听：选项/watch

以上是关于Vue.js基础的主要内容，如果未能解决你的问题，请参考以下文章