vue学习+css预处理器

一、命令

    1.`v-if`与`v-show`
    2.`@`事件绑定 v-on的简写 用于绑定事件 
    3.`v-for`用于循环 v-for="{item，index} in list"
    5.`v-model` 表单的同步改变

二、父子组件传值：props与$emit

• props怎么传值？
  1、父组件中import引入、components中引入、templete中插入<child :name=value><child/>
  2、子组件中props中引入name、templete中使用
• $emit怎么写？
  1、子组件中的方法中写this.$emit('nowtime',this.oldtime)
  2、父组件的templete中插入<child @nowtime=change><child/>、在方法中change(oldtime){}

三、watch监听

handler方法和immediate属性、deep属性

   watch: {
   
            myput:function(){
   
                this.timedata=this.timedata+'正在输入。。。';
            },
            immediate: true,
            deep: true,
        },
        }

四、插槽

1、插槽内容
引用组件中：插槽可以被替换为html、模板等

 <navigation-link url="/profile">
      Your Profile
  </navigation-link>

被引用组件中：在 <navigation-link> 的模板中可能会写为：

  <a v-bind:href="url" class="nav-link">
        <slot></slot>
  </a>

此时，组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。

2、插槽作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
也就是说，父组件的子组件html标签中的内容实际作用域是子组件，在父组件中调用结果是undefined

3、后备内容

<slot>smit</slot>
 //当父组件不提供任何插槽内容时，被smit渲染

4、具名插槽
<slot> 元素有一个特殊的 attribute：name

 <header>
    <slot name="header">