zoukankan      html  css  js  c++  java
  • Vue2.0学习笔记

    环境搭建

      vue-cli@3    vue-cli@2.X

      npm i -g @vue/cli

    模板语法

      文本 <span>Message: {{ msg }}</span>

      原始HTML <span v-html="msghtml"></span>

      特性 <div v-bind:id="dynamicId"></div>

      表达式{{ number + 1 }}  {{ ok ? 'YES' : 'NO' }}  {{ message.split('').reverse().join('') }}

    指令

      v-if  <p v-if="seen">现在你看到我了</p>

    修饰符

      <form v-on:submit.prevent="onSubmit">...</form>

    计算属性

      模板内的表达式非常方便,但是对于复杂的逻辑,这时候使用计算属性

      场景 具有依赖关系的数据监听

    Class

      对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

      数组语法   <div v-bind:class="[activeClass, errorClass]"></div>

    条件渲染

      v-if  <h1 v-if="awesome">Vue is awesome!</h1>

      v-else

      v-else-if

    列表渲染

      v-for  <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li>

    事件定义

      定义

      v-on  <button v-on:click="counter += 1">Add 1</button>

      内联处理器中的方法  <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>

      事件修饰符   .stop  .prevent .

      按键修饰符  

    组件

      通过prop向子组件传递数据

      使用事件抛出一个值   $emit

      插槽    slot 

        具名插槽

          <slot name="header"></slot>

          <template slot="header"> <h1>Here might be a page title</h1> </template>

    vue-router

      起步

        HTML

          <router-view></router-view>

        JS

          const Foo = {template:'<div>Foo</div>'}

          const routes = [{path:'/foo',component:Foo}]

          const router = new VueRouter({routes})

          const app = new Vue({router}).$mount('#app')

    router-link 

       字符串 <router-link to='/foo'></router-link>

       表达式 <router-link :to='{name:"user",params:{userId:123}}'></router-link> 

    Vuex  

      state  单一状态树

      mutation 更改store中的唯一方法提交mutation 

      action   提交mutation ,不能更改状态   异步

  • 相关阅读:
    Go 语言入门教程,共32讲,6小时(已完结) yangxu
    JavaGuide学习Zookeeper
    javaguide学习数据库
    使用restTemplate报错:no suitable HttpMessageConverter found for response type [class java.lang.Object...
    MySQL blocked nested loop join(bnl)和index nested loop join(inl)
    spring boot中自动配置应用场景
    MySQL锁的定义
    我挖掘Kafka底层原理!发现了它火爆宇宙的3个真相!
    MySQL导致metadata lock或者flush table lock原因排查方法
    maven中parent标签的作用
  • 原文地址:https://www.cnblogs.com/sonwrain/p/10469030.html
Copyright © 2011-2022 走看看