关于vue基础-vue属性

最新推荐文章于 2022-07-21 14:58:08 发布

依古比古*

最新推荐文章于 2022-07-21 14:58:08 发布

阅读量187

点赞数 2

分类专栏： web前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/Wendymwz/article/details/104613769

版权

web前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

一：vue特点

单页面应用
组件化开发
组建的重用性
开发便捷

二：MVVM 双向数据绑定

M:(model)数据
V:(view)视图指的就是看到的页面
VM:(viewmodel)视图模型是MVVM模式的核心是连接view和model的桥梁
有两种方法

一个是将视图转换成数据模型，将看到的页面转换成后端数据，实现方式：dom监听
另一种是将模型转换成视图页面，实现方式：数据绑定

总结：在MVVM中，模型视图是不能直接进行交互的，必须通过viewmodel进行通信，当数据发生变化的时候，viewmodel能够监听数据的变化然后对视图进行更新，当视图发生变化的时候，viewmodel也能监听视图的变化通知数据的改变，这句就是所谓的双向数据绑定

三：vue属性

el:

只在new实例时创建

new Vue({
	el:"#id"||".class" ||HTMLElement
})

data

这里面的data是用来存放数据的，用来组织从view对象中抽象出来的属性，讲视图的数据抽象出来存放在data中

<template>
<div id="app >

段落：{{this.title}}

</div>
</template>
<script>
export default {
  name: "app",
  components: {},
  // 这里面的data指的是当前vue的一个属性 里面的函数指的是vue返回的一个对象
  data: function() {
    return {
      title: "登录/注册",
     
     
    };
  },
  </script>

mothods

放置页面中的业务逻辑，js方法一般都放置在methods中，事件方法调用一次，执行一次,结果不会缓存

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

 // 业务逻辑相关方法都要写在method里面
<template>
  <div>
    <p class="title">{{title}}</p>
    <p v-on:click="onClick">{{info}}</p>
  </div>
</template>
<script>
export default {
  //类型：定义在组件中，必须为函数类型\
  //作用：抽象view也就是页面显示数据，存放在data中，把view抽象成model

  data(){
    return{
      title:"学习vue.js",
      info:"点击一下",
    }
  },
  template:"<p>我是template</p>",

  //保存组件的业务逻辑函数
  methods:{
    onClick:function(){
      this.info = "我被点击了";
      // return this.info;
    }
  }
}
</script>

template

用来设置模板，替换页面元素，相当于一个占位符

<body>
  <div class="div">
    11111
  </div>
</body>
<script>
  new Vue({
    el:".div",
    data:{
      msg:"我是一条信息"
    },
    template:"<p>{{msg}}</p>",
  })
</script>

computed 计算属性

计算属性需要用到data里面的数据，当依赖值发生变化的时候计算属性也会重新计算，计算结果会被缓存


  <div class="div">
    <p>{{message}}</p>
    <p>{{reversedMessage}}</p>
    <button v-on:click="onClick"></button>
  </div>
  
<script>
  var vm = new Vue({
  el: '.div',
  data: {
    message: 'Hello'
  },
  methods:{
    onClick(){
      this.message+="aaa"
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      window.console.log("1111111")
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

watch属性

watch用来监听data的变化，一个值的改变另一个值也会随着改变，计算结果不会被缓存。

  //为data中选项添加观察，当data中的选项数据发生变化，watch将会触发
  watch:{
    message:function(newValue,oldValue){
      window.console.log(`新值${newValue},旧值${oldValue}`);
    },
    title:"handleTitleChange",

    item:{
      handler:function(newValue,oldValue){
        window.console.log(`新值${newValue},旧值${oldValue}`);
      },
      deep:true
    },
    change:[
      function(){
        window.console.log("change改变1")
      },
      "change2"
    ]
  }

过滤属性 filter

过滤属性过滤器就是对显示的值进行进一步的改变，不会改变原来的数据，只是在与原来数据的基础上对数据进行进一步的处理，下面是一个局部引用的实例：

  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    },
    filters: { //过滤器的配置项
      'timeFilter': function ( val,type ){
        var date = new Date ( val )
        return date.getFullYear() + type + ( date.getMonth() + 1 ) 
        + type + date.getDate()
      }
    }
  })

依古比古*

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于vue基础-vue属性

一：vue特点单页面应用组件化开发组建的重用性开发便捷二：MVVM 双向数据绑定M:(model)数据V:(view)视图指的就是看到的页面VM:(viewmodel)视图模型是MVVM模式的核心是连接view和model的桥梁有两种方法一个是将视图转换成数据模型，将看到的页面转换成后端数据，实现方式：dom监听另一种是将模型转换成视图页面，实现方式：数据绑定...
复制链接

扫一扫

专栏目录