vue用法示例（三）

最新推荐文章于 2024-09-13 14:34:15 发布

大霞上仙

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量307

点赞数 6

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daxiashangxian/article/details/138225773

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

（1）V-on:click 函数 v-on : 可以简写成 @

<button v-on:click="reverseMessage">反转字符串</button>

<button @click="reverseMessage">反转字符串</button>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
        
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

其实这个this并不是变量，也不用声明，因为它就是整个vue构造器的化身，你可以用this.变量名的方式，直接调用控制编辑这个vue构造器内的一切变量属性等。作用就相当于我们python类里面的 self

（2）过滤器filter

{{ message | filterA('arg1', 1+1) }} 带参数的过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}  
</div>
        
<script>
new Vue({
  el: '#app',
  data: {
        message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

(3)Computer 计算

Computer methods就是用来存放各种js函数的那个vue构造器的属性之一。现在要学的这个computed和它几乎是一样的功能，一样的用法

methods 每次渲染刷新都会触发函数运行。

computed 则只会在检测到依赖的元素或变量发生变化时才会重新运行，其他时候都是使用缓存

computed 的特有默认属性 get子函数

computed: { site: { get: function () {return this.name + ' ' + this.url} } }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>