Vue2基础语法4

VIP文章晓殇大人

已于 2023-01-06 01:17:19 修改

阅读量81

点赞数

文章标签： javascript vue.js 前端

于 2022-12-29 22:53:37 首次发布

本文链接：https://blog.csdn.net/dx3906nnn/article/details/128489065

版权

一. 高内聚低耦合

高内聚:同一个组件内,尽量增强各个元素之间的联系
低耦合:不同组件之间,尽量使不同组件元素之间的联系降低

二. 全局组件定义

<body>
    <div id='app'>
        <!-- 方法一调用 -->
        <login-it1></login-it1>
        <!-- 方法二调用 -->
        <login-it2></login-it2>
        <!-- 方法三调用 -->
        <login-it3></login-it3>
        <!-- 方法四调用 -->
        <login-it4></login-it4>

    </div>

    <!-- 模板组件要放在Vue组件外面 -->
    <template id="loginfor2">
        <!-- 注意此方法里,组件模板内应该只包含一个根元素 -->
        <h1>
            这是最好的方法
        </h1>
    </template>
</body>

<!-- 注意这个组件的script标签必须放在包含声明的script标签上面 -->
<script type="x-template" id="loginfor1">
    <h1>这是第三菜的方法</h1>
</script>
<script>
    //全局声明    


    //方法一
    //extend与component一起配合使用
    var login = Vue.extend({
   
        template: '<h1>这是最菜的方法</h1>'
    })
    // 注意起名字如果有大写字母,那么在视图层书写时,大喜字母要变成  -小写字母  的样式,但在正式写项目的时候,就没有这条规则
    Vue.component('loginIt1', login)   //参数一: 自己定义的组件名称(注意组件名称严谨和HTML保留元素同名如div等)    参数二: 组件的声明 



    //方法二
    //extend融入component
    Vue.component('loginIt2', {
   
        templ