vue基础

# demo01

项目初始化成功之后

安装Vetur插件

#API

  1.模板的渲染

    {{}} 读取数据

    v-html识别html的标签

    <h1 v-html="room">{{room}}</h1>

    v-bind实现标签属性的动态绑定  v-bind:->:

    <a v-bind:href="url">aaaa</a>

  2.条件渲染

      v-if v-if-else v-else

      <div v-if="flag">

      <h1>aaa</h1>

      <h1>aaa</h1>

      <h1>aaa</h1>

      </div>

      会渲染div标签，要是不像渲染可以使用<template>标签代替<div>就只有<h1>标签

      在<template> 元素上使用 v-if 条件渲染分组 

      v-show

      v-if和v-show的区别：

          v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

          v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

          相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

          一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  3.列表渲染

      数组 v-for="(item,index) in names"

       <li v-for="item in names">{{item}}</li> 会报错是因为缺少key

      需要绑定key

      <li v-for="(item,index) in names" v-bind:key="index">{{item}}</li>

      对象 v-for="(value,key,index) in obj"

      <li v-for="(value,key,index) in student" v-bind:key="index">{{value}}</li>

      数组更新检测

          变异方法 (mutation method) push操作的是原有的数组

          替换数组 concat生成新的数组

      对象更新检测

          Vue.set(object, propertyName, value)

  4.事件处理

      v-on指令  v-on:click 可以简写为@click  v-on:->@

      内联处理器中的方法(事件传递参数)

          <button v-on:click="addCountHandler(5,$event)">按钮</button>

      事件修饰符

          <button v-on:click.prevent="send">发送</button>

  5.计算属性和侦听器

      computed  对模板的数据进行操作{{msg}}

          computed vs methods的区别 computed有缓存效果而methods没有缓存效果

              我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

       watch

            监听数据的变化 input 双向绑定的数据 v-model="memage"  watch中定义memage(value){ console.log(value);} watch中方法必须和绑定参数v-model一致

  6.Class 与 Style 绑定

      绑定 HTML Class

          对象语法

              <p :class="{active:isActive,'text-danger':hasError}">hello</p>

              active定义的样式，isActive为ture显示active定义的样式

          数组语法

              <p :class="[c1,c2]">我是样式</p>

              <p :class="[isActive ? 'active' :'',c1]">我是样式2</p>

          对象数组合并语法

              <p :class="[isActive ? 'active' :'',{'text-danger':hasError},c2]">我是样式3</p>

      绑定内联样式

          对象语法

              <p :style="{color:'green',fontSize:'30px'}">style1</p>

          数组语法

              <div v-bind:style="[baseStyles, overridingStyles]"></div>

      自动添加前缀

  7.表单输入绑定

      v-model指令

      修饰符

      双向数据绑定的原理：

          参考地址：https://www.cnblogs.com/zhuzhenwei918/p/7309604.html

  8.组件

      vue单文件组件后缀名为.vue

      组件由三个部分组成：template  script  style

      template:

          只能存在一个跟组件

      script:

          data必须是一个纯函数

      scoped:

          增加scoped属性，样式只能在当前组件中生效

      组件的引入：

          1.引入 

          2.依赖注入

          3.加载

      组件的复用

          因为你每用一次组件，就会有一个它的新实例被创建。相互不干扰的

      通过 Prop 向子组件传递数据 App.vue组件中定义参数 <ModuleTest :name="item"/> ModuleTest.vue组件中使用参数 props:["name"]

          读取：props:[key]

          Prop 验证

       通过自定义事件完成数据传递（子组件向父组件传递参数）

          通过点击事件子组件向夫组件传递参数

            子组件中定义参数一个方法，方法通过this.$emit(costomEventName,params)像父组件传参数， 父类组件通过@costomEventName="ceilMamage"  ceilMamage(data)方法接收参数

            this.$emit(costomEventName,params)

          通过change实现input参数向父组件传递参数

        插槽

            <SoltTest>我是插槽</SoltTest>

            子组件SoltTest 使用<slot></slot>将父组件的内容在子组件中显示

            编译作用域：写在哪里，就在哪里声明

            父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

            后备内容(默认数据) <slot>AAAA</slot> 父组件要是没有内容就会显示AAAA 就是默认值

            具名插槽 (通过定义插槽名字调整显示组件的位置)父组件

父组件的使用    
<SoltTest>
<template v-slot:footer>我是插槽头部</template>
<template>插槽内容</template>
<template v-slot:header>我是插槽尾部</template>
</SoltTest>
字组件的使用
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>

            作用域插槽(数据传递)（使用插槽传递参数）

子组件
<slot name="header" :msg="msg"> 
</slot>
父组件
/**
如果插槽没有名字就是default，slotProps 没有实际意义可以随便写
v-slot:default="slotProps"

*/

<SoltTest>
      <template  v-slot:header="slotProps">
        我是插槽尾部
         {{ slotProps.msg}}
      </template>
</SoltTest>

　　

            v-slot:  ->  #

        动态组件和异步组件

            动态组件 

                component

                keep-alive:只要需要被缓存都可以使用,在路由中同样生效

      

/**动态组件 */
<template>
  <div>
    <p @click="showA">展示a组件</p>
    <p @click="showB">展示b组件</p>
    <keep-alive>
      <component :is="currentTabComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import Acomponent from "./Acomponent";
import Bcomponent from "./Bcomponent";

export default {
  name: "DynamicComponents",
  data() {
    return {
      currentTabComponent: Acomponent
    };
  },
  components: {
    Acomponent,
    Bcomponent
  },
  methods: {
    showA() {
      this.currentTabComponent = Acomponent;
    },
    showB() {
      this.currentTabComponent = Bcomponent;
    }
  }
};
</script>

　　

            异步组件

                const CComponent = () => import("./CComponent");

            处理边界情况

                访问根实例:$root

                访问父级组件实例：$parent

                访问子组件实例或子元素：ref(读取DOM的操作)

    9.过渡与动画

        1.css动画

            v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

    10.生命周期

        beforeCreate

        created

        beforeMount

        mounted

        beforeUpdate

        updated

        beforeDestroy

        destroyed

    11.可复用性 & 组合

        自定义指令

            全局自定义指令

            局部自定义指令

main.js中写入全局指令

Vue.directive("focus", {
    bind: function (ele) {
        console.log(ele);
      return ele.innerText="请输入数据";
    },
   inserted: function (ele) {
        ele.focus();
    }
})

局部指令
<template>
    <!-- <input type="text" v-focus> -->
    <div>
        <input type="text" v-focus/>
        <p>局部自定义指定</p>
        <input type="text" v-localFocus>
    </div>
</template>
<script>
export default {
    name:'directive',
    data(){
        return{}
    },
    //自定义局部指令
    directives: {
        localFocus:{
            inserted:function(ele){
              ele.focus();
            }
        }
    }
}
</script>

    12.渲染函数 & JSX

        支持jsx语法

    13.过滤器

        全局过滤器

        局部过滤器

//main.js中定义全局过滤器
Vue.filter("toCase",function (value) {
  return value.toUpperCase();
})
/**自定义过滤器 */
<template>
    <div>
        过滤器
        <p>{{msg | rmb}}</p>
        <p>{{message | toCase}}</p>
    </div>
</template>

<script>
export default {
    name:"filterTest",
    data(){
        return{
            msg: 200,
            message:"helloword"
        }
    },
    filters:{
        rmb: function(value){
          return value+"$"
        }
    }
}
</script>

　14.路由

　　1.基础引入
       2.动态路由匹配(路由传递参数)
　　1.路由配置中添加：path:"/Shop/:id"
　　2.跳转传递参数：<router-link to="/shop/100233610">商城</router-link>
　　3.读取参数：{{ this.$route.params.id }}
　　3.路由嵌套
　　1.规则

children:[
{
path:"java",
component:Java
},
{
path:"web",
component:Web
}
]

　　2.注意：路由配置中，不需要给定全部路由，单纯当前路径即可，不需要增加"/"
　　3.增加二级路由显示位置:<router-view />这个主要显示路由的信息
　　4.编程式导航（通过编写方法实现页面的一中路由跳转）
　　 router.push(location, onComplete?, onAbort?)
　　 router.replace(location, onComplete?, onAbort?)
　　router.go(n)
　　5.命名路由
　　6.重定向和别名
　　redirect
　　alias
　　7.路由组件传参参数的解耦 除了{{ this.$route.params.id }}的另外一种读取参数的方式

       

路由种props为true
 {
      path: '/page1/:id',
      props:true,
      name: 'page1',
      component: page1
    },

page1页面获取传递的参数
<template>
    <div>
        <h1>page1</h1>
       <!--  // 组件1参数：{{this.$route.params.id}} -->
         组件1参数：{{id}}
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件"
            }
        },
        //props获取路由传递的参数
        props:{
            id:{
                type:[String,Number],
                default: 0
            }
        }
    }
</script>

　　props: true
　　可以使用props传递参数的方案读取路由参数
　　8.HTML5 History 模式
　　hash
　　history
　　9.高亮显示
　　router-link-exact-active 绝对高亮显示
　　router-link-active 相对高亮显示

      

在App.vue页面中添加.router-link-exact-active 或者.router-link-active
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.router-link-exact-active{
  color: red;
}
</style>