vue 动态设置元素高度--驼峰引用注意--data引用注意

1.动态给元素设置高度

       var tt = document.body.clientHeight || document.documentElement.clientHeight;
            this.$refs.yuansu.style.height = tt + 'px'; //动态设置HTML元素高度
            console.log(tt);

注意 给要设置的元素 添加 id="yuansu" ref="yuansu"

2. 关于驼峰命名的组件在引用的时候的注意事项

在vue 中，使用组件时，如果组件的命名有驼峰式的要改为短线连接，这是由于html不区分大小写，而如果不采用短线连接而是直接还是用驼峰命名的引用会报错。
正确的用法例如
js中

var userName={
       <template>
             <div> 名称为驼峰式的组件，在引用的时候要改为短线连接。 </div>
       <template>
     }
 var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        // '组件的名称': 组件的模板对象
      userName     
      }
    });

html 引用时

 <div id="app">
<user-name></user-name>
  </div>

3vue 中关于data 中对象的使用情况，要注意，使用的是对象的引用还是对象本身。

注意局部组件data是个函数，所有的数据要return出去，return的是一个对象。

• 如果复用组件mycon 则改变一个组件中间中的count ，其它的组件也会跟着改变

var counts=0;
  Vue.component('mycom', {
      template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>',

               data(){
                      return{
                            count:counts,
                    }
        }
    })

。

• 把data 中返回的值 改为非引用的这个时候在复用组件的时候，组件之间互不影响。。

  Vue.component('mycom', {
      template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>',
               data(){
                      return{
                            count:0,
                    }
        }
    })

• 第一项，列表的使用方法测试 ，就是在英文的状态下书写- 然后写具体的列表名称。