2. 技术
    3. Vue组件基础

    Vue组件基础

    技术2024-07-12  65

    Vue组件基础

    内部调用render函数

    创建组件构造器

    //Vue.extend() const cpnC = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是i内容哈哈哈哈哈</p> <p>我是内容呵呵呵呵</p> </div> ` })

    注册组件

    //Vue.extend() const cpnC = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是i内容哈哈哈哈哈</p> <p>我是内容呵呵呵呵</p> </div> ` }) //Vue.component() Vue.component('my-cpn', cpnC)

    使用组件

    //Vue.extend() const cpnC = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是i内容哈哈哈哈哈</p> <p>我是内容呵呵呵呵</p> </div> ` }) //Vue.component() Vue.component('my-cpn', cpnC) //使用组件 const app = new Vue({ el:'#app', data:{ }, })

    Vue全局组件和局部组件

    全局组件：直接在标签中进行注册局部组件：在对应的Vue实例当中进行注册 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是i内容哈哈哈哈哈</p> <p>我是内容呵呵呵呵</p> </div> ` }) const app_0 = new Vue({ el: '#app_0', components: { cpn: cpnC } }) const app_1 = new Vue({ el: '#app_1' })

    Vue父组件和子组件

    const cpn_2 = Vue.extend({ template:` <div> <h1>aaaaaa</h1> <p>assssssss</p> </div> `, }) const cpn_1 = Vue.extend({ template:` <div> <h1>我是标题</h1> <p>我是内容啊啊啊啊啊</p> <cpn2></cpn2> </div> `, components:{ cpn2:cpn_2 } }) const app = new Vue({ el: '#app', components:{ cpn1:cpn_1 } }) //Vue是cpn1的父组件，cpn1是cpn2的父组件

    Vue组件语法糖

    /* 1.全局组件语法糖 */ Vue.component('cpn1', { template:` <div> <h1>我是标题</h1> <p>我是内容啊啊啊啊啊</p> <cpn2></cpn2> </div> ` }) /* 2.局部组件语法糖 */ const app = new Vue({ el: '#app', components:{ cpn2:{ template:` <div> <h1>我是标题</h1> <p>我是内容啊啊啊啊啊</p> </div> ` } } })

    Vue模板与组件分离写法

    <template id = 'cpn_1'> <div> <h1>我是标题</h1> <p>我是内容哈哈哈哈哈哈</p> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', components:{ cpn:{ template:'#cpn_1' } } }) </script>

    Vue组件中数据的存放

    vue中组件的数据需要用一个函数来返回值

    这样组件和组件之间的data才不会相互影响，也不会被同一个methods更改

    <body> <div id = 'app'> <!-- 当data是一个函数时，所创建的组件实例则不会共享数据 --> <!-- 函数会在栈空间内创建地址 --> <!-- 如果是对象就会使组件共用同一个内存地址 --> <Counter></Counter> <Counter></Counter> <Counter></Counter> <Counter></Counter> </div> <template id = "Counter"> <div> <h1>当前数字是：{{counter}}</h1> <button @click="plus">+</button> <button @click="reduce">-</button> </div> </template id> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', components:{ Counter:{ template:'#Counter', data() { return{ counter: 0, } }, methods:{ plus(){ this.counter++ }, reduce(){ this.counter-- } } } } }) </script> </body>
    Processed: 0.013, SQL: 9