前端泥瓦匠

Appearance

Return to top
On this page

全局api

extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

javascript
<div id="mount-point"></div>
1
javascript
// 创建构造器
var demo = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})

// 创建 Profile 实例，并挂载到一个元素上。
new demo().$mount('#mount-point')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

set

官网说明

Vue.set( target, propertyName/index, value )

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • 返回值：设置的值。

  • 用法： 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

示例

javascript
<div id="div">  
	<p >{{items}}</p>
</div>
 
<script>
 
var vm = new Vue({
el:"#div",
  data: {
    items: ['a', 'b', 'c']
  }
});
 
Vue.set(vm.items,2,"ling")
 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

设置数组元素

Vue.set(vm.items,2,"ling") : 表示 把vm.items  这个数组的下标为2 的元素，改为"ling" 把数组  ["a","b","c"] 修改 后是 ["a","b","ling"]

向响应式对象添加属性

javascript
<div id="div">  
	<p>{{person}}</p>
</div>
 
<script>
var vm = new Vue({
el:"#div",
data: {
   person:{
			name:"ling",
			job:"engineer"
   }
},
created:function(){
		alert(this.person.age)
  }
});
 
Vue.set(vm.person,"age","26")
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：person 是data 里面的子对象，所以可以使用 Vue.set( ) 方法。data 这个根对象就不能使用 set 方法

说明：控制台可以在person 里找到age 这个属性，说明添加成功 (响应式)

对比非响应式方法

vm.food="chocolate" alert(vm.food)

控制台和网页上的 都没有显示food 这个属性，说明food 这个属性没有被添加 （非响应式）

delete

Vue.delete( target, propertyName/index )

  • 参数：
    • {Object | Array} target
    • {string | number} propertyName/index

仅在 2.2.0+ 版本中支持 Array + index 用法。

  • 用法： 删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

在 2.2.0+ 中同样支持在数组上工作。

  • 目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
javascript
data:{
   namelist : {
     id : 1, 
       name : '叶落森'
   }       
}
1
2
3
4
5
6
javascript
// 删除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,'name');//vue方法
1
2
3

fifer-过滤器

介绍

允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

优势

1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。 2、首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch， 3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。 4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。 5、在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

过滤器例子

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue</title>
</head>
<body>
    <div id="app">
        <div>{{ message | capitalize }}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
    var vm= new Vue({
      el: '#app',
      data: {
        message: 'world'
      },
      filters: { // 可以有好多的自定义过滤器
        capitalize(value) { // 这里的this指向的window
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    });
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

过滤器串连

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue</title>
</head>
<body>
    <div id="app">
        {{ message | filterA | filterB }}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
    var vm= new Vue({
      el: '#app',
      data: {
        message: 'world'
      },
      filters: { // 可以有好多的自定义过滤器
        filterA(value){
            return value.split('').reverse().join('');
        },
        filterB(value){
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    });
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

过滤器传参

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue</title>
</head>
<body>
    <div id="app">
        {{ message | filterA('hello',hi) }}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
    var vm= new Vue({
      el: '#app',
      data: {
        hi:'!',
        message: 'world'
      },
      filters: { // 可以有好多的自定义过滤器
        filterA(value1,value2,value3){
            return `${value2} ${value1} ${value3}`;
        }
      }
    });
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'hello' 作为第二个参数，表达式 hi 的值作为第三个参数。

实例属性-$ref

官网针对-ref的解释

  • 预期：stringref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
1
2
3
4
  • 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。 关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

操作dom

如果我们用jQuery的话,一般性都可以操作dom

javascript
$("#id").text('xxx')   // 使用Jquery
document.getElementById("id")  // 使用原生Dom
1
2

现在我们牛逼了，我们用vue。那vue中，如果我要获取Dom，该怎么做？ 这就进入本文的主题ref, $refs，官网解释：

html
<div id="app">
   <div>{{msg}}</div>
</div>
1
2
3

在JavaScript中我们习惯了使用document.getElementsByTagName

javascript
var vm = new Vue({
  el: '#app',
  data:{
    msg:'hello'
  },
  mounted() {
    console.log(document.getElementsByTagName("div")[0].innerHTML);
  }
})
1
2
3
4
5
6
7
8
9

vue操作dom

那么我们在vue中呢

html
<div id="app">
   <div ref="msg">{{msg}}</div>
</div>
1
2
3
javascript

    var vm = new Vue({
      el: '#app',
      data:{
        msg:'hello'
      },
      mounted() {
        // console.log(document.getElementsByTagName("div")[0].innerHTML);
        console.log('====================================');
        console.log(this.$refs.msg);
        console.log('====================================');
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

Copyright © 2018-2025 Mason

沪ICP备20006251号-1