Vue 实例成员

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

  • 挂载点 el

  • 插值表达式、data: 数据

  • 过滤器 filters

  • 方法 methods

  • 计算属性 computed

  • 监听属性 watch

  • 总结

new Vue({
 el: '#app'
})

  • 1 一个挂载点只能控制一个页面结构（优先匹配到的结构）

  • 2 挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯用app）

  • 3 html标签与body标签不能作为挂载点（html和body标签不可以被替换，组件中详细介绍）

  • 4 是否接受vue对象，是外界是否要只有vue对象的内容决定的


插值表达式、data: 数据

<script>
<div >
 <div class="d1">
     {{ num }}
 </div>
 <div class="d1">
     {{ num }}
 </div>
</div>
<div >
 {{ n }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
      num: 100
  }
});
console.log(app.$data.num, app.num);
new Vue({
  el: '#main',
  data: {
      n: app.num
  }
});
</script>

插值表达式

  • 1 空插值表达式：{{ }}

  • 2 插值表达式中渲染的变量在data中可以初始化

  • 3 插值表达式可以进行简单运算与简单逻辑

  • 4 插值表达式符号冲突解决，用delimiters（标识符）自定义（了解）

<div >
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>
    <p>{{ msg.split('')[4] }}</p>
    <p>[{ num }]</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
        },
        // 控制vue插值表达式符合
        delimiters: ['[{', '}]'],
    })
</script>


过滤器 filters

  • 1 用实例成员filters来定义过滤器

  • 2 在页面结构中，用 | 来标识使用过滤器

  • 3 过滤方法的返回值就是过滤器过滤后的结果

  • 4 过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量，

    过滤器方法接受参数是安装传入的位置先后

<body>
   <div >
       <!-- 简单使用：过滤的对象会作为参数传给过滤器 -->
       <p>{{ num | add(20) }}</p>
       <!-- 串联使用：将第一个过滤器结果作为参数给第二个过滤器 -->
       <p>{{ num | add(100) | jump(2) }}</p>
       <!-- 究极使用 -->
       <p>{{ n1, n2 | fn(99, 77) }}</p>
       <!-- 你品，你细品 -->
       <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
   </div>
</body>
<script src="js/vue.js"></script>
<script>
   new Vue({
       el: '#app',
       data: {
           num: 10,
           n1: 66,
           n2: 88
       },
       filters: {
           add: function (a, b) {
               console.log(a, b);
               return a + b;
           },
           jump: function (a, b) {
               return a * b
           },
           fn: function (a, b, c, d) {
               console.log(a, b, c, d);
               return a + b + c + d;
           }
       }
   })
</script>


方法 methods

methods 为事件提供实现体（函数），与事件指令配合使用

<script>
 var app = new Vue({
     el: '#app',
     methods: {
         pClick () {
             // 点击测试
         },
         pOver () {
             // 悬浮测试
         }
     }
 })
</script>
<!-- v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->


计算属性 computed

  1. 其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值

  2. 在 computed 中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方

  3. 方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新，方法属性都会被调用更新方法属性的值

  4. 方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次

计算机案例：

<div >
 <!-- type="number"表示只能写数字 -->
 <input type="number" v-model="num1" max="100" min="0">
 +
 <input type="number" v-model="num2" max="100" min="0">
 =
 <button>{{ sum }}</button>
</div>
<script>
 new Vue({
     el: '#app',
     data: {
         // sum: '',  // 重复声明
         num1: '',
         num2: '',
     },
     computed: {
         sum () {
             // num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
             if (this.num1 && this.num2) {
                 return +this.num1 + +this.num2;  // +this.num1是将字符串快速转换澄数字
             }
             return '结果';
         }
     }
 })
</script>



监听属性 watch

  1. watch 中不定义属性，只是监听属性，所以方法的返回值没有任何意义，只是监听变量值是否发生更新

  2. watch中的方法名，就是被监听的属性（方法名同被监听属性名）

  3. 被监听的变量值一旦发生更新，监听方法就会被调用

应用场景：

  • k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换为图形）

  • 拆分姓名：录入姓名，拆分为姓和名（需要逻辑将一个数据拆分为多个数据）

案例：

<div >
 姓名：<input type="text" v-model="full_name">
 <hr>
 姓：<button>{{ first_name }}</button>
 名：<button>{{ last_name }}</button>
</div>
<script>
 new Vue({
     el: '#app',
     data: {
         full_name: '',
         first_name: '未知',
         last_name: '未知'
     },
     watch: {
         full_name () {
             if (this.full_name) {
                 // 只是实现简易的拆分逻辑
                 this.first_name = this.full_name.split('')[0];
                 this.last_name = this.full_name.split('')[1];
             } else {
                 this.first_name = '未知';
                 this.last_name = '未知';
             }
         }
     }
 })
</script>


总结

以上所学实例成员

总结：

{
el: 使vue与html页面结构建立关联，挂载标签，id选择器唯一绑定
data: {{ 内部可以写基本类型与变量，还可以完成简单运算与逻辑 }}
delimiters: 插值表达式符号冲突解决，用delimiters自定义
filters: 过滤方法的返回值就是过滤器过滤后的结果
mothods: 自定义 Vue 控制的方法，给事件指令绑定的
computed:定义方法属性，返回值为属性值，方法内的变量都会被监听
watch: 监听与方法名同名的属性，被监听的数据更新调用方法
}


以上是 Vue 实例成员 的全部内容， 来源链接： utcz.com/z/375043.html

回到顶部