您的位置: 首页  >  文章  >  Vue学习 - 01

Vue学习 - 01

分类: 文章 • 2025-05-11 17:27:58

声明式和命令式

Vue学习 - 01

不同：
- 命令式：命令机器如何去做事情( how )，不管什么想要什么( what )，都会按照命令执行
- 声明式：告诉机器想要什么( what )，机器发现如何去实现( how )

例子：实现返回一个数组的二倍数组

// 命令式
var arr = [1,2,3];
var double = [];
// 命令机器如何去做
for(var i=0; i<arr.length; i++){
　　double.push(arr[i]*2);
}


// 声明式
var arr = [1,2,3];
var double = arr.map(multi2);
// 机器发现如何去做
function multi2(var){
　　return val*2;
}

命令式编程中，我们遍历数组，将每个元素乘以2，插入到新数组中，每次都要操作新数组
 
声明式编程中，我们只需要将要进行何种操作封装成一个函数传给 map 函数
map 函数做的事情就是将遍历数组这个操作抽象出来，让我们能够只关注于我们想要什么( what )

 

Vue实例

所有Vue组件都是Vue的实例

 
创建一个Vue实例是传入一个选项对象

var app = new Vue({ 　　el, 　　data, 　　... });

 
传入的 data 对象会被代理，其中的值更新会响应式的更新页面(新添加的属性不会被代理)

 
Vue暴露的实例属性和方法都以 $ 开头

 
不要在选项属性或回调上使用 箭头函数(比如生命周期的钩子函数，实例方法的回调)

 

模板语法

Mustache 语法不能作用在 HTML 属性上，应使用 v-bind 指令，将数据和属性绑定，当数据改变时，属性值也会更新

 
插值数组或对象，会直接将其显示，数组可以调用方法，会将返回的值显示

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。不应该在模板表达式中试图访问用户定义的全局变量。

 
可以在模板语法中使用表达式(v-bind后面的也是模板语法，也可以使用表达式)，但只能是 单个表达式


{{ number+1 }}
{{ true ? 1 : 0 }}
{{ message.split("").join("-") }
<span :id="'list-'+id"></span>

如下方式则不可以

{{ var a= 1 }} // 不是表达式
{{ if(ok){ } }} // 不是表达式

指令

指令是带有 v- 前缀的特性，其期望的值是一个 表达式(v-for 除外)

v-bind 用于响应式的更新 HTML 特性(属性)， v-bind 后可以跟模板语法，使用表达式

 

计算属性和侦听器

模板中尽量不要放入逻辑，并且尽量放入声明式逻辑

 

计算属性

计算属性是创建 Vue 实例的 options 对象的一个可选参数，主要用于一些复杂逻辑

 
计算属性可以实现的，方法也都可以实现，但计算属性是基于它的依赖进行缓存的，即当计算属性中使用到的 data 属性没有发生变化，计算属性也不会重新执行，而方法在每次重新渲染时都会重新执行

 
计算属性间可以相互依赖

computed: {
　　c1 : function(){ return 234; },
　　c2: function(){ return this.c1 }
}

 
计算属性默认只有 getter，可以自己为其提供一个 setter

computed: {
　　a: {
　　　　get(){ doSomething... },
　　　　set(newVal){ doSomething... }
　　}
}

侦听器

Vue 提供了另外一种方式来监听实例上数据的变化：侦听属性

侦听属性也是创建 Vue 实例时 options 参数中的可选参数，一般用于监听数据会随着其他数据变化而变化


watch: {
　　// 属性名
　　message: function(val){
　　　　this.msgChange = true;
　　}
}

当数据变化时需要执行异步操作或者开销大的操作的时候，侦听器很有用

侦听属性中对当前侦听属性进行修改会再次触发侦听器

message(val){
　　// 这里会再次触发侦听器，触发两次，第二次 message 值和上次相同，不会触发setter
　　this.message = "xx";
}

异同：感觉计算属性是通过一个或者几个属性来获得一个结果，而侦听器则是当属性发生变化时，执行某些操作，进而对数据产生影响

绑定Class、Style

在自定义组件上使用 class 属性时，会绑定到组件的根元素上，并且不会覆盖已经存在的类名

 
使用数组绑定多个 class、style

<span :class="[active,error]"></span>
<span :style="[red,active]"></span>

 

数组和对象的更新检测

数组的变异方法对数组的操作可以被检测到，例如：push、pop、shift、unshift、splice、sort、reverse，可以使用新的数组去代替原数组进而获得更新

直接对数组元素操作和操作数组的长度不会被检测到，可以使用数组的 splice 方法或者实例提供的 $set 方法来更新数组

对已经存在的实例添加新的属性也不会被检测到，不能添加根级别的属性，可以向嵌套在根级别下的对象添加新的属性，使用实例的 $set 方法，保证属性可被检测
 

事件处理

绑定的值可以是表达式、函数名、函数调用，都会在每次事件触发的时候执行( 感觉就像绑定的内容是事件函数体中的内容 )

 
使用 $event 对象传入函数，该对象表示原生 event 对象

 

表单输入绑定

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

 
单选绑定到一个单值属性，多选绑定到数组

 

相关推荐