vue.js技巧小计

//删除数组索引方法01
del (index) { this.arr.splice(index ,1); }
//删除数组索引方法01
del (index) { this.$delete(this.arr, index); }
//获取输入框内容
<input type="text" v-model="message" @focus="$event.target.select()">

//子向父传递参数  this.$emit('hide');<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <link rel="stylesheet" href="src/dist/styles/iview.css">
    <script src="src/dist/vue.min.js"></script>
    <script src="src/dist/iview.min.js"></script>
</head>
<body>
    <div id="page">
        <my-dialog :is-show="isShow" @hide="toggle"></my-dialog>
        <i-button @click="toggle">显示切换</i-button>
    </div>
    <script src="src/components/text01.js"></script>
</body>
</html>

//js代码
//vue2.0 定义局部组件时  组件首字母要大写 vue1.0 大小写都支持
var Dialog = {
    template: '<div v-if="isShow">aaaaaaaaaaaaaa<i-button @click="toHide">子组件关闭</i-button></div>',
    props:['isShow'],
    methods:{
        toHide:function(){
           this.$emit('hide');
        }
    }
}

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
    el:'#page',
    data:{
        isShow:false
    },
    methods:{
        toggle:function(){
            this.isShow = !this.isShow;
        }
    },
    components: {
        'my-dialog': Dialog
    }
})

巴特西

vue.js技巧小计

最新文章

热门文章