Vue-5【列表渲染、DOM模板、子组件data、ref属性】

最新推荐文章于 2024-04-28 18:27:10 发布

可乐雪碧薄荷糖

最新推荐文章于 2024-04-28 18:27:10 发布

阅读量344

点赞数

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

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110733647

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一.列表渲染

(1).input临时数据保留

vue只会处理上面的列表，但是下面的input临时的输入则不跟随上方的列表改变而改变,留在原地了

为了解决这个问题用key

(2).数组数据保留

：key="item.xx"

<div id="root">
        <div v-for="(item,index) of list" :key = "item.id">
            {{item}}-{{index}}
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                list:[{
                    id:'123',
                    text:'a'
                },
                {
                    id:'234',
                    text:'b'
                },
                {
                    id:'456',
                    text:'c'
                }]
            }
        })
    </script>
    { "id": "123", "text": "a" }-0
    { "id": "234", "text": "b" }-1
    { "id": "456", "text": "c" }-2

一般需要给循环元素给key,key值也是需要唯一的，不能用index.

(3).数组变异方法

push-往数组里增加一条
pop-最后一项删除
shift-第一项删除
unshift添加第一条
splice-数组截取
sort-排序
reverse-取反

通过变异方法，每当我调用变异方法则会自动触发渲染

     上方代码引入
     vm.list.splice(0,1)
    { "id": "234", "text": "b" }-0
    { "id": "456", "text": "c" }-1

(4).数组下标改值

vue无法通过下标改变数组实现更新，数据增加了，但是页面不渲染

上方代码引入
vm.list[3]=({id:'123',text:'a'})
{id: "123", text: "a"}
vm.list
(4) [{…}, {…}, {…}, {…}, __ob__: Observer]
但是此时页面没有渲染
     { "id": "123", "text": "a" }-0
    { "id": "234", "text": "b" }-1
    { "id": "456", "text": "c" }-2

3种解决办法

vm.$set（vmitems，index, value）

vm.$set(vm.list,3,{id:'123',text:'a'})
此时数据布局改变了，页面也自动渲染了

Vue.set

Vue.set(vm.list,3,{id:'123',text:'a'})

vm.list.splice

vm.list.splice(5,1,{id:'123',text:'a'})

(5).对象的自动渲染

vue里面可以监听到对象里的修改，但是没法监听添加和删除

<div id="root">
        <div v-for="(item,key,index) of userInfo" >
           {{key}}- {{item}}-{{index}}
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    name:'zza',
                    age:21
                }
            }
        })
    </script>
    name- zza-0
    age- 21-1
    vm.userInfo.price='166' 对象中添加进去了，但是没有自动渲染
    delete vm.userInfo.name 对象中删除了，但是没有自动渲染

三种解决办法

vm.$set(vm.object,key,value)

vm.$set(vm.userInfo,'price','99')；//对象中添加进去了，也自动渲染了

Vue.set

Vue.set(vm.userInfo,'price','99')；//对象中添加进去了，也自动渲染了

重新引用

vm.userInfo={'name':'zza'}

二.DOM模板

用组件模板dom会到渲染到外侧，全局和局部都是一样的

<body>
    <div id="root">
    <table>
       <tbody>
          <rowsw></rowsw>
          <rowsw></rowsw>
       </tbody>
    </table>   
    </div>
    <script>
        // Vue.component('rowsw',{
        //     template:'<tr>我是tr</tr>'
        // })
        let rows = {
            template:'<tr>我是tr</tr>'
        }
        let vm = new Vue({
            el:'#root',
            components:{
                'rowsw':rows
            },
            data:{
                userInfo:{
                    name:'zza',
                    age:21
                }
            }
        })
    </script>
    
</body>

会当成无效结果,因为要求table里必需为tr selectction中必须为option等等这样的要求

解决办法

局部全局都可以

<body>
    <div id="root">
    <table>
       <tbody>
          <tr is="rowsw"></tr>
          <tr is="rowsw"></tr>
       </tbody>
    </table>   
    </div>
    <script>
        Vue.component('rowsw',{
            template:'<tr>我是tr</tr>'
        })
        // let rows = {
        //     template:'<tr>我是tr</tr>'
        // }
        let vm = new Vue({
            el:'#root',
            // components:{
            //     'rowsw':rows
            // },
            data:{
                userInfo:{
                    name:'zza',
                    age:21
                }
            }
        })
    </script>
    
</body>

三.子组件data

(1).子组件中访问data

获取子组件中的data值

<body>
    <div id="root">
    <table>
       <tbody>
        <rowsw></rowsw>
        
       </tbody>
    </table>   
    </div>
    <script>
        Vue.component('rowsw',{
            data:{
                content:"我是tr"
            },
            template:'<tr>{{content}}</tr>'
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    name:'zza',
                    age:21
                }
            }
        })
    </script>

这样写会报错，必须要改为function

<div id="root">
    <table>
       <tbody>
        <tr is="rowsw"></tr>
        
       </tbody>
    </table>   
    </div>
 Vue.component('rowsw',{
            data(){
                return{
                 content:"我是tr"
                }
            },
            template:'<tr>{{content}}</tr>'
        })
        这样才能显示出来值

(2).独立保存数据的特性

独立响应

<div id="root">
        <btn></btn>
        <btn></btn>
    </div>
    <script>
        Vue.component('btn',{
            data(){
                return{
                 count:0
                }
            },
            template:'<button @click="btnclick">点击了{{count}}次</button>',
            methods:{
                btnclick(){
                    this.count++;
                }
            }
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
               count:1
            }
        })
    </script>

点击其中一个按钮，其它按钮不会跟着响应

统一响应

通过外部声明一个对象实现

<div id="root">
        <btn></btn>
        <btn></btn>
    </div>
    <script>
        let btnCount = {
            count:0
        }
        Vue.component('btn',{
            data(){
                return btnCount
            },
            template:'<button @click="btnclick">点击了{{count}}次</button>',
            methods:{
                btnclick(){
                    this.count++;
                }
            }
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
               count:1
            }
        })
    </script>

四.ref引用

1.注册一个引用信息

2.获取dom结构

在元素上通过ref="xx"绑定

在实例里触发的方法里通过this.$refs.xx调用

(1).理论演示

获取dom结构

<div id="root">
        <div ref="hello" @click="btnclick">
            hello
        </div>
        
    </div>
    <script>
        let vm = new Vue({
            el:'#root',
            data:{
               
            },
            methods:{
                btnclick(){
                    console.log(this.$refs.hello);
                }
            }
        })
    </script>

点击后打印

引用注册信息

<div id="root">
        <btn ref="btn1" @change="btnclick1"></btn>
    </div>
    <script>
        Vue.component('btn',{
            data(){
                return {
                    count:0
                }
            },
            template:'<button @click="btnclick">点击了{{count}}次</button>',
            methods:{
                btnclick(){
                    this.count++;
                    this.$emit('change')
                }
            }
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
              total:0
            },
            methods:{
                btnclick1(){
                    console.log(this.$refs.btn1);
                   
                }
            }
        })
    </script>
    VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

(2).实例

通过子组件传值实现按钮点击后的数据累加

<div id="root">
        <btn @change="btnclick1"></btn>
        <btn @change="btnclick1"></btn>
        <div>Total:{{total}}</div>
    </div>
    <script>
        Vue.component('btn',{
            data(){
                return {
                    count:0
                }
            },
            template:'<button @click="btnclick">点击了{{count}}次</button>',
            methods:{
                btnclick(){
                    this.count++;
                    this.$emit('change',this.count)
                }
            }
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
              total:0
            },
            methods:{
                btnclick1(value){
                    this.total += value;
                }
            }
        })
    </script>

ref通过引用注册信息即可简化

<div id="root">
        <btn ref="btn1" @change="btnclick1"></btn>
        <btn ref="btn2" @change="btnclick1"></btn>
        <div>Total:{{total}}</div>
    </div>
    <script>
        Vue.component('btn',{
            data(){
                return {
                    count:0
                }
            },
            template:'<button @click="btnclick">点击了{{count}}次</button>',
            methods:{
                btnclick(){
                    this.count++;
                    this.$emit('change')
                }
            }
        })
        
        let vm = new Vue({
            el:'#root',
            data:{
              total:0
            },
            methods:{
                btnclick1(){
                    this.total = this.$refs.btn1.count+this.$refs.btn2.count;
                }
            }
        })
    </script>

可乐雪碧薄荷糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-5【列表渲染、DOM模板、子组件data、ref属性】

一.列表渲染(1).input临时数据保留vue只会处理上面的列表，但是下面的input临时的输入则不跟随上方的列表改变而改变,留在原地了为了解决这个问题用key(2).数组数据保留：key="item.xx"<div id="root"> <div v-for="(item,index) of list" :key = "item.id"> {{item}}-{{index}} </di
复制链接

扫一扫

专栏目录