学习Vue日记第三天

最新推荐文章于 2022-04-06 16:21:37 发布
最新推荐文章于 2022-04-06 16:21:37 发布
阅读量159 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43061473/article/details/117490036
版权

钩子函数
beforeCreate和created的使用//创建前和创建后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">{{msg}}</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'张三'
        },
        beforeCreate(){
            console.log('实例创建之前');
            console.log(this.$data.msg);
        },
        created(){
            console.log('实例创建之后');
            console.log(this.$data.msg)
        }
    })
</script>
</body>

</html>

页面挂载
挂载点el存在
beforeMount和mounted//挂载前和挂载后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">{{msg}}</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'张三'
        },
        beforeMount(){
            console.log('挂载之前')
            console.log(this.$el.innerHTML)
        },
        mounted(){
            console.log('挂载之后')
            console.log(this.$el.innerHTML)
        }
    })
</script>
</html>

数据更新
挂载完成后数据变化，执行beforeUpdate和updated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="isShow" ref="self">test</div>
        <button @click="isShow=!isShow">更新</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isShow:false
            },
            beforeUpdate(){
                console.log('更新之前')
                console.log(this.$refs.self)
            },
            updated(){
                console.log('更新之后')
                console.log(this.$refs.self)
            }
        })
    </script>
</body>
</html>

实例销毁
beforeDestroy和destroyed//销毁前和销毁后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
    <div ref="self">test</div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'张三'
            },
            beforeDestroy(){
                console.log('之前')
                console.log(this.$refs.self)
                console.log(this.msg)
                console.log(vm)
            },
            destroyed(){
                console.log('销毁之后')
                console.log(this.$refs.self)
                console.log(this.msg)
                console.log(vm)
            }
        })
    </script>
</body>
</html>

自定义组件
Vue.directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='../vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-focus="true">
    </div>
    <script>
        Vue.directive('focus',{
            inserted(el,binding){
                if(binding.value){
                    el.focus()
                }
            }
        })
        var vm=new Vue({ el :'#app'})
    </script>
</body>
</html>

Vue.use安装插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app" v-my-directive>
    </div>
    <script>
        //定义自定义插件对象
        let MyPlugin={}
        //编写插件的install方法
        MyPlugin.install=function(Vue,options){
            console.log(options)
            //在插件中为vue添加自定义指令
            Vue.directive('my-directive',{
                bind(el,binding){
                    //为指令v-my-directive绑定的DOM元素设置style样式
                    el.style='width:100px;height:100px;background-color:#ccc'
                }
            })
        }
        Vue.use(MyPlugin,{someOption:true})
        var vm=new Vue({
            el:'#app'
        })
    </script>
</body>

</html>

Vue.extend构造器扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app1">app1:{{title}}</div>
    <div id="app2">app2:{{title}}</div>
    <script>
        var Vue2=Vue.extend({
            data(){
                return {title:'hello'}
            }
        })
        var vm1=new Vue({el:'#app1'})
        var vm2=new Vue2({el:'#app2'})
    </script>
</body>
</html>

Vue.set响应式对象添加属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{a}}</div>
        <div>{{obj.b}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: 'woshi',
                obj: {},
            },
           
        }) 
        Vue.set(vm.obj, 'b', '我是新加进来的')
    </script>
</body>

</html>

Vue.mixin全局注册混入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        Vue.mixin({
            created(){
                var myOption = this.$options.myOption
                if(myOption){
                    console.log(myOption.toUpperCase())
                }
            }
        })
        var vm=new Vue({myOption:'hello vue!'})
    </script>
</body>
</html>

vm.$props接受从上级组件向下传递的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件 -->
        <my-parent></my-parent>
    </div>
    <template id="parent">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌：<input type="text" v-model="brand">
            <!-- 子组件 -->
            <my-child v-bind:name="brand"></my-child>
        </div>
    </template>
    <!-- 子组件模板 -->
    <template id="child">
        <ul>
            <li>手机品牌：{{show.brand}}</li>
            <li>手机型号：{{show.type}}</li>
            <li>市场价格：{{show.price}}</li>
        </ul>
    </template>
    <script>
        Vue.component('my-parent',{
            template:'#parent',
            data(){
                return{
                    brand:''
                }
            }
        })
        Vue.component('my-child',{
            template:'#child',
            data(){
                return{
                    content:[
                        {
                            brand:'华为',type:'mate20',price:'20000'
                        },
                        {
                            brand:'vivo',type:'z3',price:'1999'
                        },
                        {
                            brand:'一加',type:'OnePlus7',price:'2999'
                        },
                        {
                            brand:'三星',type:'S8',price:'3299'
                        },
                        {
                            brand:'苹果',type:'iPhonex',price:'4000'
                        },
                    ],
                    show:{brand:'',type:'',price:''}
                }
            },
            props:['name'],
            watch:{
                name(){
                    if(this.$props.name){
                        var found=false
                        this.content.forEach((value,index)=>{
                            if(value.brand==this.$props.name){
                                found=value
                            }
                        })
                        this.show=found ? found:{brand:'',type:'',price:''}
                    }
                    else{
                        return
                    }
                }
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{}
        })
    </script>
</body>
</html>

vm.$options传入选项
数组 对象 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{base}}</p>
        <p>{{noBase}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            customOption:'我是自定义数据',
            data:{
                base:'我是基础数据'
            },
            created(){
                this.noBase=this.$options.customOption
            }
        })
    </script>
</body>
</html>

vm.$el访问vm实例使用的根DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>我是根标签结构</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app'
        })
        vm.$el.innerHTML='<div>我是替换后的div标签</div>'
    </script>
</body>
</html>

vm.$children访问实例的直接子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="child">查看子组件</button>
        <my-component></my-component>
    </div>
    <script>
        Vue.component('my-component',{template:'<div>myComponent</div>'})
        var vm=new Vue({
            el:'#app',
            methods:{
                child(){
                    console.log(this.$children)
                }
            }
        })
    </script>
</body>
</html>

vm.$root访问组件树的根Vue实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<button @click="root">查看根实例</button>',
            methods:{
                root(){
                    console.log(this.$root)
                    console.log(this.$root==vm.$root)
                }
            }
        })
        var vm=new Vue({el:'#app'})
    </script>
</body>

</html>

vm.$slots访问定义在组件内部的template模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component>你好</my-component>
    </div>
    <template id="first">
        <div>
            <slot></slot>
        </div>
    </template>
    <script>
        Vue.component('my-component',{template:'#first'})
        var vm=new Vue({el:'#app'})
    </script>
</body>
</html>

若有多个插槽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component>你好
            <template v-slot:second>
                <div>内部结构</div>
            </template>
        </my-component>
    </div>
    <template id="first">
        <div>
            <slot></slot>
            <slot name="second"></slot>
            </p>
    </template>
    <script>
        Vue.component('my-component', { template:'#first' })
        var vm = new Vue({ el: '#app' })
        console.log(vm.$children[0].$slots.second[0].children[0].text)
    </script>
</body>

</html>

vm.$attrs获取组件属性，不包括class，style，以及被声明prop的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component id="test"></my-component>
    </div>
    <script>
        Vue.component('my-component',{template:'<button @click="showAttrs">查看属性</button>',
        methods:{
            showAttrs(){
                console.log(this.$attrs)
            }
        }
        })
        var vm=new Vue({el:'#app'})
    </script>
</body>
</html>

全局配置，关闭提示信息
引入vue.js情况下
Vue.config.productionTip=false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <script>
        Vue.config.productionTip=false
    </script>
</body>
</html>

silent取消vue日志和警告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        Vue.config.silent = true
        var vm=new Vue({el:'#app'})
    </script>
</body>
</html>

devtools不允许调试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <script>Vue.config.devtools=false</script>
</body>
</html>

组件进阶
mixins是分发组件可复用功能的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <script>
        // 定义myMixin对象
        var myMixin={
            created(){
                this.hello()
            },
            methods:{
                hello(){
                    console.log('hello from mixin!')
                }
            }
        }
        var Component=Vue.extend({
            mixins:[myMixin]
        })
        var component=new Component()
    </script>
</body>
</html>

数据冲突，组数据优先

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <script>
        var mixin = {
            data() {
                return { message: 'hello' }
            }
        }
        var vm=new Vue({
            mixins:[mixin],
            data:{
                message:'goodbye'
            },
            created(){
                console.log(this.$data.message)
            }
        })
    </script>

</body>

</html>

自己的钩子函数先调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <script>
        var mixin={
            created(){
                console.log('gouzi')
            }
        }
        var vm=new Vue({
            mixins:[mixin],
            created(){
                console.log('组件函数')
            }
        })
    </script>
</body>
</html>

render实现虚拟DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component>成功渲染</my-component>
    </div>
    <script>
        Vue.component('my-component',{
            render(createElement){
                return createElement('p',{
                    style:{
                        color:'red',
                        fontsize:'16px',
                        backgroundColor:'#eee'
                    }
                },this.$slots.default)
            }
        })
        var vm=new Vue({el:'#app'})
    </script>
</body>
</html>

createElement创建虚拟节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component>
            <template v-slot:header>
                <div style="background-color: #ccc;height: 50px;">
                    这里是导航栏</div>
            </template>
            <template v-slot:content>
                <div style="background-color: #ddd;height: 50px;">
                    这里是图书展示信息</div>
            </template>
            <template v-slot:footer>
                <div style="background-color: #eee;height: 50px;">
                    这里是底部信息</div>
            </template>
        </my-component>
    </div>
    <script>
        Vue.component('my-component', {
            render(createElement) {
                return createElement(
                'div', [createElement('header', this.$slots.header),
                createElement('content', this.$slots.content), createElement('footer', this.$slots.footer)])
            }
        })
        var vm=new Vue({el:'#app'})
    </script>
</body>

</html>

明天加油！！！！！！

c木
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue学习日记
jklaaxasdas的博客
11-05 175
Vue是一套用于构建用户界面的渐进式JavaScript框架Vue很有趣 也很便捷 深度也很高很吸引人。
Vue学习日志01 --介绍
hanpiadong的博客
09-01 111
Vue学习日志 --介绍 创建一个.html文件，通过以下方法中引用Vue： 开发环境版本： <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 生产环境版本： <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> Vue.js的核心是采用声明式的编程范式 一、Hello World //编程范式：
Vue框架学习日志2021.3.27
qq_41456589的博客
03-27 127
在使用vue时，自定义的js文件一定要放在html的最后。 <div id="app"> {{message}}{{sentences}} </div> var a ; var app = new Vue({ el: '#app', data: { message: 'I hope I will pass the exam ', sentences:a } }) 以上是最基本的vue用法。 箭头函数：(参数列表)=>{函数体}不能用于构造函数 数据
3. Vue实例简介
止水鱼的博客
02-02 1513
创建Vue实例 每个Vue应用都是通过Vue构造器创建新的Vue实例开始。 var vm=new Vue({ //选项 });
简单梳理 Vue 知识笔记（持续更新）
DaXiong1024的博客
07-16 1270
Vue 001、Vue-简介 一、Vue简介 一套用于构建用户界面的渐进式框架 核心思想是数据驱动：数据映射视图，数据的修改会自动引起视图的改变。 双向数据绑定：数据的改变会引起视图的变化，视图的变化也会引起数据的变化，这就是双向数据绑定。 二、如何理解Vue的渐进式框架 Vue框架本身是分层的设计： 核心，视图渲染。 组件化 单页面路由 状态管理 构建系统 三、前端三大框架 框架名 出现时间 所属 一开始特色 Angular 2009年 谷歌 指令系统、双向数据绑定 Re
vue学习日记17：scoped样式冲突
最新发布
03-21
3. **第三方库样式冲突**：使用了一些外部库，它们的样式可能与我们的组件样式冲突。在这种情况下，可以考虑使用更深的选择器，或者在必要时使用`!important`来覆盖第三方库的样式，但同样要谨慎，避免过度依赖`!...
1.前端日记第一天，html和css代码 简历.zip
04-20
在“前端日记第一天，html和css代码 简历.zip”中，我们可以推测作者在学习如何使用这些标签来构建一个简历页面。例如，`<h1>`通常用于表示主要标题，如“个人简历”，`<p>`用于段落，展示个人信息、工作经历等内容...
MVCz在线个人日记系统
12-29
包含了项目依赖的第三方库和组件，如NuGet包，这些库可能包括对数据库操作的支持库（如Entity Framework）或者前端UI组件库。 8. **项目文件（MyDiary）**： 这是项目的主体，包含C#源代码、配置文件等，可能包括...
日记产品
02-24
8. **API接口**：如果产品支持移动应用或第三方服务集成，可能会包含RESTful API设计，利用Python的Flask-Restful或Django REST framework来实现。 9. **前端技术**：尽管主要关注Python，但前端界面可能使用HTML、...
leatherbound:一个日记网络应用程序
06-22
为了增加功能和互动性，"皮革装"可能还整合了第三方API，比如地图服务来记录日记地点，或者天气API来反映日记当天的气候。同时，开放API也可能允许用户通过插件或自定义脚本扩展其功能。 总结来说，"皮革装"是一款...
Vue.js——vm.$props属性（用于接收上级组件向下传递的数据）
Jinnw的博客
04-06 1743
Vue.js——vm.$props属性（用于接收上级组件向下传递的数据）（ps：需要提前安装需要的插件和代码补全：html sinppet, vetur,Vue 2 Sinppets，vscode-vue2-snippet，以及需要下载vue.js）
Vue属性
BEST_FUNK的博客
05-21 170
1.$props <body> <div id="app"> <father></father> </div> <script src="js/vue.js"></script> <script> Vue.component('father',{ template:` <div>
Vue基础小白入门笔记
阿飞的博客
05-12 490
前端基础 HTML：结构 CSS：表现 JavaScript：行为（js API 获取元素 CRUD） —> jQuery ----> VUE (MVVM) do…getElementById(“id”) — $("#id") MVVM: Model:模型层,在这里表示JavaScript对象（更多的指的是JSON对象） View：视图层,在这里表示DOM（HTML元素） ViewModel：连接视图和数据的一个中间件 view的变化会自动更新到ViewModel中,而vi
Vue2.5开发去哪儿网App 搜索功能完成
weixin_30591551的博客
02-27 117
效果展示： Search.vue: <div class="search-content" ref="search" v-show="keyword"> <!--双向绑定keyword--> <ul> <!--遍历找到的城市--> <li class="sear...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
weixin_30356837的博客
01-14 2521
业务场景由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。问题描述使用Cascader级联选择器过程中主要存在的应用问题如下：1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；2、提前加载数据后，点击相应父级节点出现数据重复等；3、使用多个数据源相同的级联选...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3950
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue框架学习（五）
qq_46087627的博客
01-14 264
Vue的全局API
前端开发：Vue中forEach() 的使用
热门推荐
软贱开发攻城狮
12-11 2万+
在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach() 的使用。 forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。 在Vue项目中，标签里的循环使用v-for，方法里面的循环使用forEach。 1、f
Vue笔记：Vue.set()，Vue.extend()， vue的属性和$slot $children的知识点+案例+手机搜索案例
weixin_45823347的博客
05-21 1043
Vue.set() 给vue实例中添加属性 总结： 1.当我们用索引修改数组中的元素时，必须用vue.set()操作 2.当我们用索引修改数组的长度时，我们也必须用Vue.set()操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app">
学习vue3 第三十六章
08-12
抱歉，我无法提供有关Vue 3第三十六章的具体内容，因为我没有编写或访问到该章节的信息。然而，我可以为您提供一些关于Vue 3的一般知识和学习资源。 Vue 3是一个流行的JavaScript框架，用于构建用户界面。它是Vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值