Vue.js基础

时间 2019-11-10

标签 vue.js vue 基础栏目 JavaScript 繁體版

原文原文链接

1. 初始vue.js

Vue.js项目介绍html

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

2. Vue.js的安装

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

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

在开发环境下不要使用压缩版本，否则你会失去了全部常见错误相关的警告!webpack

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

安装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 包的源代码。npm

Vue 也能够在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。设计模式

安装3：NPM

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

$ 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*模式图示mvc

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