Vue 是什么?
这里我们引用官方文档的一段话:
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
- 什么是框架?
框架( Framework )是构成一类特定软件可复用设计的一组相互协作的类。框架规定了你的应用的体系结构。它定义了整体结构，类和对象的分割，各部分的主要责任，类和对象怎么协作，以及控制流程。框架预定义了这些设计参数，以便于应用设计者或实现者能集中精力于应用本身的特定细节.
- 既然有视图层,那还有什么层?
说到这里,就要谈谈MVC模型了.
- MVC模型MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。
- Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
- View（视图） - 视图代表模型包含的数据的可视化。
- Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
Vue起步
声明式渲染
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
模板语法
插值语法
文本
<span>Message: {{ msg }}</span>
无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
如果我只想要展现第一次的数据呢?这里就要用到Vue的指令语法了.
指令语法
v-once
v-once属性: 执行一次性的插值,当数据改变时,插值的内容不在更新.
<span v-once>这个将不会改变 {{msg}}</span>
v-html
原始HTML
{{}} 只会将数据解释为普通文本,而非HTML代码,输出真正的HTML,需要使用 v-html 指令:
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
<template> ... data: { rawHtml: "<span style="color: red">This should be red.</span>" } </template>
展现效果:
这个span的内容将会被替换成 property的值 rawHtml
v-bind
作用: 添加属性.
数据只能从data流向页面.
<div v-bind:id="userId"></div> <!-- 简写形式 --> <div :id="userId"></div>
如果添加的属性为布尔型, 只要存在就意味着值为true, 如果userId的值为 null, undefined,false 则 该属性不会被渲染出来.
注意: 对于所有的数据绑定, Vue.js都提供了完全的 Javascript 表达式支持,但是只对单个表达式支持.
指令
含义: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url">...</a>
这里 href 是参数, 告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定.
动态参数
前提: 从2.6.0开始, 可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:
<a v-bind:[attributeName]="url"> ... </a>
这里 attributeName 会被作为一个 JavaScript 表达式进行动态求值, 求得的值将会作为最终的参数来使用.
动态参数的值的要求: 预期会求出一个字符串, 异常情况下值为 null 任何其他非字符串类型的值都将会触发一个警告.
动态参数表达式的约束: 某些字符(比如:空格,引号),放入HTMLattribute 名里是无效的. 避免用大写符号来命名键名,因为浏览器会把attribute名强制转为小写.
修饰符
修饰符是以半角句号 . 指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定.
<form v-on:submit.prevent="onSubmit"> ... </form> <!-- .prevent 修饰符 告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
部分指令语法的缩写形式
v-bind
<!-- 完整写法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 --> <a :[key]="url">...</a>
v-on
<!-- 完整写法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写(2.6.0+) --> <a @[event]="doSomething">...</a>
计算属性与侦听器
计算属性
为什么要使用计算属性? 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。
作用: 要用的属性不存在, 要通过已有的属性计算得来.
完整写法:
computed: { fullName: { get(){ return this.firstName + '-' + this.lastName }, set(value){ const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } }
get()作用: 当有人读取fullName时, get就会被调用, 且返回值就作为fullName的值.
get什么时候调用? 1.初次读取fullName时; 2. 被依赖的数据发生变化时.
set() : 当fullName被修改时调用.
计算属性最终出现在vm上,直接读取使用即可.
如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变.
简写形式:
// 如果计算属性要被修改,那必须写set函数响应这个时候就不能用简写形式. computed: { fullName(){ return this.firstName + '-' + this.lastName } }
**computed 与 methods 的比较:**两种方式的最终结果完全相同,不同的是计算属性是基于他们的响应式依赖进行缓存的.只有在相关响应式依赖发生改变时才会重新求值.
侦听器
computed与watch之间的区别,什么时候用watch?
- computed能完成的功能, watch都可以完成.
- watch能完成的功能,computed不一定能完成, 例如: watch可以进行异步操作.
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
什么时候触发?
- 当被监视的属性变化时, 回调函数自动调用,进行相关操作.
- 监视的属性必须存在,才能进行监视!
监视的两种方法
- new Vue时传入watch配置.
- 通过vm.$watch监视.
// 法一 new Vue({ ... watch: { isHot: { immediate: true, //初始化时让handler调用一下,默认值为false handler(newValue, oldValue){ console.log('isHot被修改了!', newValue, oldValue) } } } }) // 法二 vm.$watch('isHot',{ immediate: true, handler(newValue,oldValue){ //... } })
深度监视
vue中的watch默认不监视对象内部值的改变, 配置deep: true就可以监视对象内部值改变.
简写形式:
vm.$watch('isHot', function(newValue,oldValue){ //... })
两个小原则:
- 所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象.
- 所有不被Vue所管理的函数 (定时器的回调函数, ajax的回调函数), 最好写成箭头函数.这样this的指向才是vm或组件实例对象.
写在最后
- 看到这里有没有收获什么呢?🎀🎀🎀
- 🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
