Vue常见选项和属性

最新推荐文章于 2024-09-04 09:24:20 发布

yulu32

最新推荐文章于 2024-09-04 09:24:20 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/yulu32/article/details/105536132

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue选项

1. 数据选项

Vue在声明组件时，如果使用了对象类型的data选项，模板将找不到data中被声明的数据。如果使用了支持Vue模板的语法检器，将得到错误的提示“data property in component must be a function”。

2. 属性选项

Vue为组件开发提供了属性（props）选项，我们可以使用它为组件注册动态属性，来处理业务之间的差异性，
使代码可以复用相似的应用场景。

props选项可以是数组或者对象类型，用于接收从父组件传递过来的参数，并允许为其赋默认值、类型检查和跪着校验等。

示例代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选项</title>
    </head>
    <body>
    <div id="app">
        <color-text text="Hello World"></color-text>
        <br>
        <color-text></color-text>
        <br>
        <color-text color="#f78" text="Hello World"></color-text>
        <br>
        <color-text color="#43gh" text="Hello World"></color-text>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component('color-text',{
            props:{
                text:String,
                color:{
                    type:String,
                    default:'#000',     //默认颜色
                    required:true,
                    validator (value) {     //校验规则，判断颜色是否合法
                        return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value);
                    }
                }
            },
            template:'<span :style="{color:color}">{{text}}</span>'
        });
        let app = new Vue({
            el:"#app"
        });
    </script>
    </body>
    </html>

3. 方法选项

代码示例如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>方法选项</title>
    </head>
    <body>
    <div id="app">
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script type="text/javascript">
        let test1 ={
            msg:'Hello World',
            fun1:function () {
                console.log('-------普通函数-----',this);
                console.log(this.msg);
            }
        }
        test1.fun1();
        let test2 ={
            msg:'Hello World',
            fun2: ()=> {
                console.log('-------箭头函数-----',this);
                console.log(this.msg);
            }
        }
        test2.fun2();
        let app = new Vue({
            el:"#app",
        });
    </script>
    </body>
    </html>

使用箭头函数定义方法时并不会创建函数作用域，因此this也不会指向其父级实例，此时的this会向上追踪。当找到某个函数作用域时
this将指向该函数的父级实例，否则this将指向浏览器的内置对象Windows。

4. 计算属性

计算属性（computed选项）目的在于减轻模板上的业务负担，当数据链上出现衍生数据时，我们可以利用它去维护使用。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app" style="font-family: Roboto,sans-serif;color: #45c0ff;margin-left: 100px">
    <h2>英语中的“互文”</h2>
    <p>案例:</p>
    <p>{{message}}.&nbsp;&nbsp;我看到的是车还是猫。</p>
    <p>{{noSpaceMsg}}</p>
    <p>{{palindromeMsg}}</p>
    <p>英语中也有“互文”的修辞手法，比如{{message}}这句话，</p>
    <p>将句中空格去掉可得 {{noSpaceMsg}},</p>
    <p>将句中空格去掉并将其倒序可得 {{palindromeMsg}}。</p>
    <p>可看到，{{noSpaceMsg}} == {{palindromeMsg}}</p>。
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data(){
            return{
                message:'WAS IT A CAT OR A CAT I SAW'
            }
        },
        computed:{
            noSpaceMsg(){
                return this.message.replace(/\s/g,'')
            },
            palindromeMsg(){
                return this.message.replace(/\s/g,'').split('').reverse().join('');
            }
        }
    });
</script>
</body>
</html>

使用了computed之后，组件的代码结构明显清晰了许多，而且即使日后数据的数据处理方式发生了变化，也只需要在选项中修改即可，
与methods一样，computed不能以箭头函数声明，同时它也会被混入Vue实例，并可通过this调用。

由于计算属性依赖于响应式属性，所以当且仅当响应式属性变化时，计算属性才会被重新计算，因此相比于使用methods函数求值，这种求值的效率更高。

5. 侦听属性

Vue可以使用侦听属性（watch属性）为实例添加被观察对象，并在对象被修改时调用开发者自定义的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听属性</title>
</head>
<body>
<div id="app">
    <h2>数据变化之前
        <i style="color: gray;font-size: 14px;">
            * 指令v-once可以限制视图不在响应数据变化
        </i>
    </h2>
    <p v-once>{{message}}</p>
    <p v-once>{{noSpaceMsg}}</p>
    <h2>数据变化之后</h2>
    <p>{{message}}</p>
    <p>{{noSpaceMsg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data(){
            return{
                message:'人有悲欢离合， 月有阴晴圆缺。',
                noSpaceMsg:'',
                remoteMsg:'',
                msg:{
                    sender:'aaa',
                    receiver:'bbb'
                }
            }
        },
        methods:{
            loginLine(){
                console.log('----------------------');
            },
            loginMsg(newValue,oldValue){
                console.log(newValue);
            }
        },
        /*
        watch:{
            message (newValue,oldValue){
                this.noSpaceMsg = this.message.replace(/\s/g,'');
            }
        }*/
        //异步修改数据
        /*
        watch:{
            message (newValue,oldValue){
                axios({     //发送ajax异步请求
                    method:'GET',
                    url:'/demo',
                    params:{
                        message:newValue
                    }
                }).then(res =>{
                    this.remoteMsg = res.data.message //接收响应后异步修改数据值
                })
            }
        }*/
        //声明式watch
        watch:{
            msg:{
                handler:'logMsg',        //方法名
                deep:true,               //深度观察：对任何数据发生变化，watch方法都会被触发
                immediate:true         //立即调用：在侦听开始时立即调用一次watch方法
            },
            'msg.sender':['logMsg','logLine']   //数组方式，可调用多个方法
        }
    });
</script>
</body>
</html>