vue组件 *** 作 ---ref --v-model 2018-11-05

在组件上定义ref="名字",可以通过this$refs名字，，，获取dom元素。。例如下面：

<div id="out">

    <h2>组件 *** 作</h2>

    <hr/>

    <p ref="tit">组件 *** 作组件 *** 作v组件 *** 作组件 *** 作组件 *** 作</p>

    <button @click="tap">点击</button>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

        el:'#out',

        data:{

        },

methods:{

        tap(){

             consolelog(this$refstitinnerHTML)//获取dom元素把dom元素的内容拿了出来

        }

    }

})

v-model,,,在输入框，单选框，多选框等等，添加v-model=“tit”的时候v-model的值必须在data里面声明；

v-model的值是他们的value值

和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法

PS: 生命周期钩子 = 生命周期函数 = 生命周期事件

    Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

    也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM

    那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

    在Vue中如果想要拿到DOM元素我们可以通过ref来获取

    在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落</>

    在使用的地方通过this$refsxxx获取, 例如this$refmyppp

    ref添加到元素DOM上, 拿到的就是元素DOM

    ref添加到组件上, 拿到的就是组件

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

原文章出处

>

先设置元素的ref，如 <div style="height: 500px" ref="tablewrap" ></div>，要获取该元素高度，必须先给该元素设置css高度

再用  windowgetComputedStyle(this$refstablewrap)height  获取

注意：用this$refs获取dom元素高度，必须在mounted钩子中，如下：

mounted() {

        consolelog(windowgetComputedStyle(this$refstablewrap)height)

}

给element表格设置动态高度，就可以用上述方法

在data中定义变量

最后，在mounted钩子中设置表格的高度

和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法

PS: 生命周期钩子 = 生命周期函数 = 生命周期事件

    21创建期间的生命周期方法beforeCreate:

        created:

        beforeMount:

        mounted:

    22运行期间的生命周期方法beforeUpdate:

        updated:

    23销毁期间的生命周期方法beforeDestroy:

        destroyed：

1Vue特殊特性Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM

那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

在Vue中如果想要拿到DOM元素我们可以通过ref来获取2ref使用21在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落

22在使用的地方通过 this$refsxxx获取, 例如this$refmyppp

3ref特点ref添加到元素DOM上, 拿到的就是元素DOM

ref添加到组件上, 拿到的就是组件

1Vue渲染组件的两种方式

    11先定义注册组件, 然后在Vue实例中当做标签来使用

    12先定义注册组件, 然后通过Vue实例的render方法来渲染

2两种渲染方法的区别

    11当做标签来渲染, 不会覆盖Vue实例控制区域

    12通过render方法来渲染, 会覆盖Vue实例控制区域

大家都知道mounted声明周期是发生在dom挂载完成之后，所以理论上是可以获取到dom元素的

但是有一些特殊情况下，是没办法在mounted中直接获取到都dom元素的。

例如，dom是一个v-if判断展示与否的元素时，如果我们在mounted里使判断条件成立，那么此时打印这个dom元素会是undefined。

这个时候就需要使用异步 *** 作来获取。

1 header组件开发总结

  1）使用classMap设置优惠活动项

  2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题

       bg-image($url) 解决背景在不同设备像素比之下的大小

2headerd出层组件开发

d出层的内容部分采用 css sticky footer布局 ：

。最外层容器负责该d出层的整体位置 背景以及控制浮层的展示和隐藏

。外层两个容器一个内容层（清除浮动），一个定在底部的底部层

。内容层里面再建立一个内容层装主要内容

布局 如下：

关于样式 ：

。外层容器 detail-wrapper设置min-height:100%(最小高度有视口那么高)

。detail-close为底部固定层，相对定位，设置-margin值来使它保留在底部

。注意：内容层detail-main设置margin-bottom来为使其不会遮盖住底部固定层

样式如下：

。加入文字进行测试发现文字短的时候close在底部，文字长的时候，close在内容层最底部

控制浮层展示和隐藏 ：

。dom上使用v-show="变量名"进行控制

。实例中设置data函数返回变量名的值为false(默认不展示)

。需要控制点击展示的dom上使用@click=“方法名”

。在实例methods中定义方法使变量名的值为相反

2 星星组件开发

公共部分抽离成公共组件

。建立组件star接受两个参数星星数和大小，数据类型为Number

。使用计算属性来改变star 类名达到改变大小的目的

。

实现原理：建立一个数组result,声明变量 hasDecimal代表有小数点的情况，integer代表整数的部分。遍历整数部分，将类名on放入数组result中，如果有半星的情况就就放置类名off,剩下的放off。由于半星只会放置一个，所以不需循环。

。在header组件中引用star组件，使用star标签测试成功就可以了

布局方面：

效果：页面左右两边没有滚动条，页面长度超过视口，页面可以上下滑动

解决：定义视口的高度。将视口盒子绝对定位

首先   将商品goods数据mock到页面中，同header中seller数据请求

实现垂直居中使用table

实现页面垂直滚动：

。实现视口里的内容能够滚动，使用better-scroll库 >

以上就是关于vue组件 *** 作 ---ref --v-model 2018-11-05全部的内容，包括:vue组件 *** 作 ---ref --v-model 2018-11-05、vue核心基础-vue生命周期方法和特殊特性ref、vue虚拟dom实现原理等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！