vue使用

今天一个问题弄的我很久,是这样的:

vue的数据定义一个空对象,data: {},通过调用接口获取到数据a,给data.a赋值,然后渲染到页面上去。

发现如果data.a不能false,渲染就没有问题,如果为false, 渲染就报错,即不同了。我们要设置双向数据绑定。有两种解决方法

1.定义 data: {a:''}

2.this.$set(this.data, 'a', '')

用要动态使用swipe插件,需要用nextTick包装,用v-if也需要nextTick包装,如果业务涉及到swipe插件和v-if的。可以使用nextTick嵌套。

3.slot有三种用法,1.匿名slot、2.具名slot,3.作用域slot, 动态数据在父组件定义,子组件通过prop属性接收数据,在子组件进行循环。通过:item="item"与父组件中的

slot-scope="{item}"吧模板中的数据替换子组件的<slot></slot>。

4. is的使用,有两种使用。1.是在html中有些特殊的标签如ul,它的子元素只能是li,如果子元素是组件名,浏览器解析不了,那就利用li标签中的is属性指定组件,如:

<div id = "app">
        <ul>
            <!-- <component-name></component-name> -->
            <li is="component-name"></li>
        </ul>
</div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        components:{
            'component-name':{
            template:'<p>你好,这是一个示例</p>' 
            }
        }
    })
    </script>

   2.切换子组件。那需要用:is=‘组件变量’,组件变量切换时,HTML也会渲染指定的组件。

5.父组件传子组件的值,如果是引用类型,则需要把这个值赋值给子组件的数据,这样子组件修改就不会修改父组件的值;父组件传递给子组件的值,需要watch,否则父组件的值变化,子组件是不会同步的。

posted @ 2019-03-28 22:39  anthonyliu  阅读(178)  评论(0编辑  收藏  举报