本文共 5111 字，大约阅读时间需要 17 分钟。
基础概念
一，安装
-
直接引用
（开发班有完整警告和调试模式，生产版本经过压缩后的）
-
CDN引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
二，简介
vue.js 是什么
(读音 ，类似于 view) 是一套用于构建用户界面的渐进式框架。
渐进式开发：
声明式渲染开发
以往的编程范式：
-
命令式编程（获取标签，添加事件等等。。。）
-
先获取标签，设置属性
-
对标签添加事件，注册对应的回调函数
-
将数据添加到标签里面
<div id="app"> { { message }}</div>var app = document.querySelector('#app');app.children[0].innerHTML = 'hello1';app.children[1].innerHTML = 'hello2';
-
vue.js编程范式：
-
声明式开发（所有DOM操作都由Vue来处理，把更大的精力放在业务逻辑上）
-
声明要管理的元素
-
在 Vue 实例里面定义数据，vue会帮你绚烂页面数据
-
数据都是响应式
<div id="app"> { { message }}</div>var app = new Vue({ el: '#app', // 申明要管理的元素 data: { message: 'Hello Vue!' }})// 所有的东西都是响应式的// 在浏览器控制台中 app.message = 20，标签中的数据会相对应的变化
-
条件和循环
v-if ：条件判断
把数据绑到DOM结构
<div id="app"> <p v-if='see'> { { message1 }}</p> <p> { { message2 }}</p></div><script> const app = new Vue({ el: '#app', // 用于挂载要申明的元素 data: { // 定义数据 message1: '我是一个p标签1', message2: '我是一个p标签2', see: true, // 相当于display:none; } })</script>
v-for ：绑定数组的数据来渲染一个项目列表
<div id="app"> <ol> <li v-for="info in infos"> { { info.text }} </li> </ol></div>const app = new Vue({ el: '#app', // 用于挂载要申明的元素 data: { // 定义数据 infos: [{ text: '信息1' }, { text: '信息2' }, { text: '信息3' }] }})// 在浏览器控制台中 app.infos.push({text: '信息4'})，标签中的数据会相对应的变化
绑定事件
v-on ：绑定事件监听器
<div class="app"> <button v-on:click='sayHi'>{ { message }}</button> </div>const app = new Vue({ el: '.app', data: { message: '按钮' }, methods: { sayHi: function() { this.message = this.message.split('').reverse().join('') setInterval(() => { this.message = this.message + 6 }, 1000) } }})v-model ：它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app"> <div>{ { message }}</div> <input type="text" v-model="message"></div>var app1 = new Vue({ el: '#app', data: { message: 'hello Vue!' }})
-vue小案例1：循环数组
<div id="app"> <ol> <li v-for="item in items">{ { item }}</li> </ol></div>var app1 = new Vue({ el: '#app', data: { items: [ '老大', '老二', '老三', '老四', ] }})// 执行 app1.items.push('老五') DOM页面会响应式渲染
-vue小案例1：按钮计数
<div id="app"> <div> 现在的数字式 { { num }} </div> <button v-on:click="add">+</button> <button v-on:click="sub">-</button></div>var app1 = new Vue({ el: '#app', data: { num: 0 }, methods: { add: function() { this.num++ }, sub: function() { this.num-- } }})
三，MVVM架构
采用的是 MVVM 架构（Model-view-ViewModel）
-
View(视图层) 就是我们的文档对象模型（DOM），Html代码，展示给用户看的各种信息
-
Model(数据层) 就是我们的数据，从网络上或者服务器请求过来的数据，也可能是固定好的死数据
-
VuemModel(视图模型层)
- Vue.js 的核心，是一个 实例，沟通视图层和数据层的桥梁实，实现了双向绑定
- 一方面实现了 Data Bindings 也就是数据绑定，将 Model层的改变时反应到 View 中
- 另一方面实现了 DOM Listener 也就是 DOM 监听，当DOM发生一些事件(点击,滚动,触摸等)，可以监听到，并且在需要的情况下改变Model的数据
<!-- view视图层 --><div id="app"> <div class="content">{ {message}}</div></div><script> // Model数据层(专门用来保存每个页面的数据) var obj = { message: 'a' } // ViewModel层，new出来的这个对象就是VM链接试图层和数据层的调度者 var app = new Vue({ el: '#app', // 挂载要管理的DOM元素，Vue帮我们操作DOM，不用再手动获取DOM元素 data: obj })</script> -
前端页面中使用 MVVM 的思想，主要是为了开发效率更高，VM提供了数据的双向绑定
-
双向绑定原理：
- 当Model里面的数据发生改变的时候，通过 方法中的 set 方法进行监听，并且调用定义好 model 和 view 关系的回调函数，来通知view改变数据
- 当 view 发生变化的时候则通过事件来进行model里面数据的相应变化
三，Vue实例option参数
选项 / DOM
-el
-
类型：
string | Element -
限制：
只在用
new Vue创建实例时生效 -
作用：
挂载要被管理的DOM元素 可以是一个选择器 也可以是
-
注意：
提供的元素只能作为挂载点。所有的挂载元素会被 生成的 替换。因此不推荐挂载 实例到
<html>或者<body>上。
-data
-
类型：
Object | Function -
限制：
组件的定义只接受
function -
作用：
将会递归将 的属性转换为 ，实现数据的双向绑定
-
注意：
数据如果是 模式，必须是存粹的对象，原型对象上的属性会被忽略
实例创建之后，可以通过
vm.$data访问原始数据对象。实例也代理了 对象上所有的属性，因此访问
vm.a等价于访问vm.$data.a
-methods
-
类型：
{ [key: string]: Function } -
限制：
将会融汇到 中，方法中的
this自动绑定为 实例。 -
作用：
将会递归将 的属性转换为 ，实现数据的双向绑定
-
注意：
不能用箭头函数定义 method 里面的函数 (例如
add: () => this.num++)。因为箭头函数的this默认绑定父级作用域的上下文，所以this将不会指向 实例，this.num的值是 undefined。
四，Vue的生命周期
生命周期：事物从诞生到消亡的过程中的各个阶段
在 new Vue 的时候，Vue的内部帮我做了很多很多的事情
生命周期有什么用？能够让我们在 **Vue ** 生命周期进行中的每一个阶段都能做事情，生命周期的每一个阶段内都会回调一个函数，有点类似中间件，比如在发送数据前，会执行一个函数，接收数据后可以执行一个函数
比如我的 Vue 里面的虚拟 DOM 没有渲染之前，会调用生命周期函数，我们可以用这个函数来请求一些数据渲染到DOM中去
当他生命周期执行到某一阶段就会告诉我们执行到哪一步了，回调某个特定的生命周期函数，我们就可以再那个函数里卖做一些有意义的操作，就像人到中年了，父母知道你到一定年纪了，不小了，就会让你执行结婚这个回调函数，这样的每一步才是有意义的
var app = new Vue({ el: '#app', data: { message: 'data' }, beforeCreate: function() { console.log('beforeCreate'); }, created: function() { console.log('created'); }, beforeMount: function() { console.log('created'); }, mounted: function() { console.log('mounted'); }, beforeUpdate: function() { console.log('data数据被修改，我被调用了！'); }, updated: function() { console.log('data数据修改完毕，我被调用了！'); }, beforeDestroy: function() { console.log('beforeDestroy'); }})的生命周期生命周期：
发表评论
最新留言
关于作者
