VUE基本操作==>选项

最新推荐文章于 2024-09-10 11:45:35 发布

临窗，听雨声

最新推荐文章于 2024-09-10 11:45:35 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/yali_aini/article/details/88813426

本文详细介绍了Vue的六个关键选项：propsData用于构造器传值，computed用于数据格式化，methods包含自定义方法，Watch用于数据监控，mixins实现代码复用，以及extends用于组件扩展。每个选项都有具体示例，帮助理解其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文从五个知识点写vue选项

propsData 用于扩展自定义标签的时候构造器传值
computed 格式化数据
methods 系列知识
Watch 选项监控数据
mixins 选项混入
extends 选项扩展

1.propsData 用于扩展自定义标签的时候构造器传值

propsData 用于扩展自定义标签的时候构造器传值,比如说，我自定义的标签，里面有某些字段是希望通过实例化的时候传入，但我又不想使用构造器data，这个时候就需要 propsData了

示例：

    <zhangzq></zhangzq>

    <script>
        // 实例化对象
        var zhangzq = Vue.extend({
            template:`
                <p>{
  
  {message}}<==>{
  
  {info}}</p>
            `,
            data: function(){
                return {
                    message:"张子强"
                }
            },
            // 属性
            props:['info']
        })

        // 挂载
        new zhangzq({
            propsData:{
                info:"你好哦"
            }
        }).$mount("zhangzq");

2.computed 格式化数据

computed 格式化数据，这个在 v-for 里面就写过，很简单，就是格式化数据的，比如说，我想输出 $12元这样的格式，再比如说，我需要把数据排序，等等...

示例：

    <div id="app" >
        <p>价格是：{
  
  {price}}</p>
        <p><button @click="add" >add</button></p>
        <p>format后的价钱是：{
  
  {priceFormat}}</p>
        <hr>
        <p>数据排序</p>
        <ul>
            <li v-for="(item ,index) in dataSort" >{
  
  {item.title}}  --  {
  
  {item.time}}</li>
        </ul>
    </div>

    <script>
        // compured , methods , 都是选项
        var app = new Vu