vue_manager_system学习心得

1.设置图片圆形显示：

img{
    display: block;
    width:40px;
    height:40px;
    border-radius: 50%;
  }

效果：

2._blank和_self

<a href="#" target="_blank"></a> 
//意思是在新的页面窗口打开一个超链接

<a href="#" target="_self"></a> 
//意思是在本页面打开一个超链接

3.vue中的@含义：

1.1代指路经：src

@/component 等于 src/component

2.1指令v-on的缩写，代名词，@click 等于 v-on：click,还可在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

3。@command自定义事件的用法：等同于给click取得一个别名，配合trigger="click"使用，在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。@command监听子组件自定义事件，方法可以以多类型作为参数

 <el-dropdown trigger="click" placement='bottom-start' @command='addGroupChat'>
        <span>
        下拉菜单   
        </span>
        <el-dropdown-menu slot="dropdown">
         <el-dropdown-item command='cust'>添加群聊</el-dropdown-item>
         <el-dropdown-item command='inner'>内部群聊</el-dropdown-item>
         <el-dropdown-item command='addFriend'>添加好友</el-dropdown-item>
        </el-dropdown-menu>
       </el-dropdown>  
// 创建群聊
   addGroupChat(type) {
    if(type === 'addFriend') {
     alert(type)
    },

              if(type === 'cust') {
     alert(type)
    }
              else{
                  alert("内部群聊")
               }

4.vue的插槽：

<div id="app">
    <p>我是父组件的标题</p>
    <child>
       <!-- <h3>我不是slot，而是插值</h3>
        <h3>再说一次：我不是slot，而是插值</h3>
        <h3>我是我，是不一样的烟火</h3> -->
    </child>
</div>
<script>
    Vue.component('child',{
        template:'<div><h5>我是子组件的标题</h5><slot><h3>我是子组件中slot值</h3></slot></div>'
    });
    new Vue({
        el:'#app'
    })
</script>

去掉注释：效果如下：

具名插槽：

更改代码：

<h2 name="IamI" style="color: red">我是我，是不一样的烟火</h2>
template:'<div><h5>我是子组件的标题</h5><slot><h3>我是子组件中slot值</h3></slot><slot name="IamI"></slot></div>'

总结：

关于slot插口的作用：可以借助input中的placeholder占位属性来理解。
若子组件中插入DOM元素时，则slot不显示，如果没有插入一些DOM的时候，则slot显示。

child随便命名的

插槽进行渲染时，先在父组件<div id="app"><dim-component>xxxx</dim-component></div>的dim-component标签中查找有无数据，若有，则将其填入或者渲染到模板的<slot>中，原slot中的值会被覆盖，若没有，之就用原slot中的值进行渲染。（占坑填坑的问题，指定渲染，二重渲染）

优质内容筛选与推荐>>
1、关于H5本部缓存localStorage，sessionStorage
2、关于我
3、keil软件错误总结.doc
4、优化SQL查询：如何写出高性能SQL语句
5、020 <one-to-one>、<many-to-one>单端关联上的lazy(懒加载)属性

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看