Vue属性

最新推荐文章于 2024-03-07 16:53:10 发布
最新推荐文章于 2024-03-07 16:53:10 发布
阅读量172 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BEST_FUNK/article/details/106268232
版权

1.$props

<body>
    <div id="app">
        <father></father>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('father',{
            template:`
                <div>
                    <h3>手机信息搜索</h3>
                    手机品牌:<input type="text" v-model="brand">
                    <child :name="brand"></child>
                </div>
            `,
            data(){
                return{
                    brand:''
                }
            }
        })

        Vue.component('child',{
            props:['name'],
            template:`
                <ul>
                    <li>手机品牌:{{show.brand}}</li>
                    <li>手机型号:{{show.type}}</li>
                    <li>手机价格:{{show.price}}</li>
                </ul>
            `,
            data(){
                return{
                    content:[    
                        {brand:'华为',type:"Mate20",price:3299},
                        {brand:'小米',type:"Mate20",price:3299},
                        {brand:'苹果',type:"Mate20",price:3299},
                        {brand:'三星',type:"Mate20",price:3299},
                        {brand:'魅族',type:"Mate20",price:3299},
                        {brand:'vivo',type:"Mate20",price:3299},
                        {brand:'oppo',type:"Mate20",price:3299}
                    ],
                    show:{brand:'',type:'',price:""}
                }
            },
            //侦听器
            watch:{
                name(){
                    if(this.$props.name){
                        // forEach
                        var found=false;
                        this.content.forEach((value,index) => {
                            if(value.brand===this.$props.name){
                                found=value;
                            }
                        })
                        this.show=found?found:{brand:'',type:'',price:""}
                    }
                }
            }
        })


        new Vue({
            el:"#app"
        })
    </script>
</body>

2.$options:获取的是vue实例中的选项,包含自定义选项

<body>
    <div id='app'>
        <button @click="chk">查看</button>
        <h1>{{base}}</h1>
        <h3>{{noBase}}</h3>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            customOption:'我是自定义选项',
            data:{
                base:"我是基础数据"
            },
            methods:{
                chk(){
                    console.log(this.$options);
                    console.log(this.$options.el);
                }
            },
            created(){
                this.noBase=this.$options.customOption
            }
            

        })
    </script>
</body>

3.$el:访问vue实例的根DOM元素

<body>
    <div id="app"></div>
    <script src="js/vue.js"></script>
    <script>
       var vm= new Vue({
            el:"#app"
        })
        console.log(vm.$el);
        vm.$el.innerHTML='<div>我是被替换的div标签</div>'
    </script>
</body>

4.$root获取根vue实例

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('my-component',{
            template:`
                <div>
                    <button @click="chk">查看根vue实例</button>
                </div>
            `,
            methods:{
                chk(){
                    console.log(this.$root);
                    console.log(this.$root===vm.$root);
                }
            }
        })
       var vm= new Vue({
            el:"#app"
        })
    </script>
</body>
BEST_FUNK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 属性拦截实现双向绑定的实例代码
10-17
在Vue中，这一功能主要依赖于属性拦截（即Vue的`data`响应化系统）和`v-model`指令来实现。 ### 1. 属性拦截 Vue.js 使用 `Object.defineProperty()` 这个JavaScript原生方法来拦截对象属性的读取和设置操作，这是...
vue2中的$符号（内置变量）
letianxf的博客
12-24 7669
vue2中的$符号（内置变量）
vue-meta实现router动态设置meta标签的方法
weixin_68658847的博客
05-17 3484
vue-meta实现router动态设置meta标签的方法
vue系列：vue的常用属性和方法
TotoroChinchilla的博客
05-09 2147
vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()
浅谈vue中的$含义及其用法（$xxx引用的位置）
vvv3171071的博客
04-09 2万+
看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。 摘抄 这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖 $event 是 vue 提供的传递实践的参数。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 另一个好问题
Vue(ref和$refs属性介绍与使用)
热门推荐
kalvin_y_liu的博客
12-30 3万+
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开。
关于vue组件事件属性穿透详解
12-13
组件事件属性穿透 属性 $attrs包含从父组件传过来的属性，但不包含子组件中prop中的属性以及class和style，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好 // 子组件 <...
Vue计算属性的使用
08-29
Vue计算属性的使用 本篇文章主要介绍了Vue计算属性的使用。 Vue计算属性是 Vue 框架中的一种特殊属性，它可以根据其他数据属性动态计算出一个新的值。下面将详细介绍 Vue 计算属性的使用。 一、计算属性概述 计算...
vue 标签属性数据绑定和拼接的实现方法
08-27
Vue 标签属性数据绑定和拼接的实现方法 在 Vue.js 中，数据绑定和拼接是非常重要的概念，它们可以帮助我们更方便地处理数据和渲染页面。本文将主要介绍 Vue 标签属性数据绑定和拼接的实现方法。 一、数据绑定 在 ...
Vue中的路由配置项meta（及权限登录不同的导航）
WuqibuHuan的博客
06-16 1万+
meta? meta简单来说就是路由元信息 也就是每个路由身上携带的信息。 列举几个例子： ①.面包屑效果 路由信息： 页面： ②.可以在路由导航守卫跳转的时候判断有没有这个信息,如果有让跳转 如： 设置meta属性 设置路由守卫 ③.根据不同的用户权限分配不同的路由导航 当我登录是，通过判断是管理员还是普通用户，引导他们进入不同的内容的index.vue组件页面。没错，只用一个页面，实现两种权限。 有多种方式 先来看下第①种： 可以提前创建几套路由规则 然
vue.esm.js 、 vue中$属性的用法 、$nextTick、vue的自定义属性
weixin_43996061的博客
01-09 5027
'vue$': 'vue/dist/vue.esm.js' ,// 用 webpack 1 时需用 'vue/dist/vue.common.js' //现在主流的webpack2采用esm，也就是es6及以上的模块化编程，说白了就是 vue.js官方文档解释 https://cn.vuejs.org/v2/guide…术语 vue中$属性的用法 this.data:vm上的数据this...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3973
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue的$
one-way or another
08-08 252
除了用户自定义的属性与方法，Vue 还保留了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来” 虽然属性名上添加前缀不是必须的，但是这样做可以提醒糊涂的开发人员（可能是你），这是一个公共API属性或方法，欢迎你使用，不像其他属性的实例，可能只是为了 Vue 的内部使用。 作为基于原型的语言，Javascript 中没有（真正的）类，因此也没有 “私有” 和 “公共” 变量或...
Vue的属性和方法（$符号说明）
最新发布
five-five
03-07 1759
# Vue的属性和方法 在 Vue.js 中，$ 是一个特殊前缀，用于表示 Vue 实例或 Vue 组件上的内置属性和方法。这些属性和方法被称为“实例属性”或“实例方法”。 以下是一些常见的实例属性和方法： * `$data`：Vue 实例的数据对象。 * `$props`：Vue 组件的 props 对象。 * `$el`：Vue 实例或组件的根 DOM 元素。 * `$refs`：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。 * `$options`：Vue 实例或组件的选项对象
vue中的$符号
will5451的博客
05-16 9631
$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 另一个好问题！如果你写成： Vue.prototype.appName = 'My App'; 那么你希望下面的代码输出什么呢？ new Vue({ data: { // 啊哦，`appName` *也*是一个我们定义的实例属性名！ appName: 'The name of some other app' }, beforeCreate: function () { c
3、Vue 开发基础（二）
whowho_s的博客
01-20 1127
3、Vue 开发基础（二） 3.1、全局 API 3.1.1、Vue.directive Vue 中有很多内置指令，如 v-model、v-for 和 v-bind 等。除了内置指令，开发人员也可以根据需求注册自定义指令。 通过自定义指令可以对低级 DOM 元素进行访问，为 DOM 元素添加新的特性。 <div id='root'> <input type="text" v-focus='true' name="" id=""> </div> <scri
Vue框架学习（六）
qq_46087627的博客
01-15 957
Vue的实例属性
Vue常用全局Api简介及使用
天涯芳草
07-20 3203
全局API： (1)Vue.directive (2)Vue.use (3)Vue.extend (4)Vue.set (5)Vue.mixin 实例属性 (6)vm.$props (7)vm.$options (8)vm.$el (9)vm.$children (10)vm.$root (11)vm.$slots (12)vm.$attrs 全局配置 (13)productionTip (14)silent (15)devtools 组件进阶 (16)mixins..
关于$符号总结一下
CoCoManYYn的博客
05-23 2万+
vue的实例属性和方法 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：   var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // =&gt; true vm.$el === doc...
mounted vue属性
12-03
在mounted函数中，可以访问到Vue实例中的所有属性和方法，包括props中传递的属性值。因此，如果需要在Vue实例挂载到DOM元素上后对props中的属性进行操作，可以在mounted函数中进行。 以下是一个简单的例子，演示了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值