vue学习笔记计算属性，列表渲染，自定义插件，组件

最新推荐文章于 2023-05-24 23:50:03 发布

ycg5250

最新推荐文章于 2023-05-24 23:50:03 发布

阅读量120

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ycg5250/article/details/116401163

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue计算属性computed

通过getter/setter实现对属性数据的显示和监视，计算属性存在缓存, 多次读取只执行一次getter计算。

v-if与v-show

比较v-if与v-show，如果需要频繁切换 v-show 较好。

列表的渲染

persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
// this.persons[index] = newP  // vue根本就不知道，不会更新界面	
this.persons.splice(index, 1, newP)// 调用了不是原生数组的splice(), 而是一个变异(重写)方法
步骤为：// 1. 调用原生的数组的对应方法
       // 2. 更新界面

自定义插件vue-myPlugin.js代码和使用

定义插件

(function (window) {
  // 需要向外暴露插件对象
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive----'+binding.value.toUpperCase()
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  // 向外暴露
  window.MyPlugin = MyPlugin
})(window)

使用插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>17_插件</title>
</head>
<body>
<div id="test">
  <p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()
  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()
</script>
</body>
</html>