vue的详解

vue一些基本语法

1、初始化一个vue项目

> cnpm install -g vue-cli # 全局安装vue-cli 
> vue -V #检查vue版本
> vue init webpack vue-project #初始化一个vue项目
> cnpm install #进入项目目录 安装需要的依赖
> cnpm run dev #启动项目

> npm config set registry https://registry.npm.taobao.org
> npm config get registry

• 父组件

  <Todo
    :message="我是父数据传给子组件"  #可以通过:message="父传子的数据"
    v-for="(item) in groceryList"
    v-bind:todo="item"  #可以通过v-bind 将数据传给子组件 todo是子组件的props
    v-bind:key="item.id"
  ></Todo>
  <script>
  import Todo from '@/components/Todo' #引入子组件
  export default {
    name: 'HelloWorld',
    data () {
    
    },
    components: {
      Todo #组件见
    }
  }  
  </script>

• 子组件

  <template>
    <div class="hello">
      我是子组件
      <li>{{ todo.text }}</li>
    </div>
  </template>
  <script>
  export default {
    name: 'Todo',
    props: ['todo'] #父组件要一致
  }
  </script>

  • 子组件 子组件拥有自己的生命周期

    <template>
      <div class="hello">
        我是子组件
        <li @click="emitToparent">点击我传数据给父组件</li>
      </div>
    </template>
    ​
    <script>
    export default {
      name: 'Todo',
      methods: {
        emitToparent () {
          this.$emit('child-event', '我是子组件传数据给父组件')  #child-event是父组件绑定标示
        }
      }
    }
    </script>

  • 父组件

    <template>
      <div class="hello">
        <Todo
          @child-event="parentEvent"
        ></Todo>
      </div>
    </template>
    <script>
    import Todo from '@/components/Todo'
    export default {
      name: 'HelloWorld',
      data () {
        return {
        }
      },
      components: {
        Todo
      },
      methods: {
        parentEvent (data) {
          console.log('接入数据', data)
        }
      }
    }
    </script>

    - v-if   绑定判断关系 eg:<p v-if="seen">现在你看到我了</p>
    - v-bind 绑定html标签属性 eg:<a v-bind:href="url">...</a>
    - v-on 绑定on事件 eg:<a v-on:click="doSomething">...</a>
    - <a v-bind:[attributeName]="url"> ... </a> 动态绑定参数 data属性需有attributeName 其值为 "href"，那么这个绑定将等价于 v-bind:href

    <input type="text" v-model.lazy="value"> #lazy这个修饰符会在光标离开input框才会更新数据
    <input type="text" v-model.trim="value"> #trim是输入框过滤首尾的空格
    <input type="text" v-model.number="value"> #number的功能是先输入数字就会限制输入只能是数字
    <button @click.stop="test">test</button> #stop是阻止事件冒泡
    <a @click.prevent="test">test</a> #prevent 阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件
    <div @click.self="test"></div> #self 只有元素本身触发时才触发方法，就是只有点击元素本身才会触发
    <div @click.once="test"></div> #once 只能用一次，无论点击几次，执行一次之后都不会再执行

    - v-bind 缩写
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    - v-on 缩写
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })

    new Vue({
      data: {
        n: 0,
        obj: {
          a: "a"
        }
      },
      template: `
        <div>
          <button @click="n += 1">n+1</button>
          <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
          <button @click="obj = {a:'a'}">obj = 新对象</button>
        </div>
      `,
      watch: {
        n() {
          console.log("n 变了");
        },
        obj:{
          handler: function (val, oldVal) { 
          console.log("obj 变了")
        },
          deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
        },
        "obj.a":{
          handler: function (val, oldVal) { 
          console.log("obj.a 变了")
        },
          immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
        }
      }
    }).$mount("#app");

    • deep 控制是否要看这个对象里面的属性变化

    • immediate 控制是否在第一次渲染是执行这个函数

      vm.$watch() 的用法和 watch 回调类似

      • vm.$watch('data属性名', fn, {deep: .., immediate: ..})

      vm.$watch("n", function(val, newVal){
            console.log("n 变了");
      },{deep: true, immediate: true})

      vue.esm.js?efeb:628 [Vue warn]: Error in callback for watcher "fullName": "TypeError: Cannot read property 'call' of undefined"

      <div v-bind:class="[{ active: isActive }, errorClass]"></div>
      <my-component v-bind:class="{ active: isActive }"></my-component>

      <h1 v-show="ok">Hello!</h1>

      <ul id="example-1">
            <li v-for="(item,i) in items" :key="i">  #其中in可以使用of代替
              {{ item.message }}
            </li>
      </ul>

      <div v-for="(value, name, index) in object">
        {{ index }}. {{ name }}: {{ value }}
      </div>

      <li v-for="n in even(numbers)">{{ n }}</li>

      <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button> #也可以传递数据 v-on:click="greet('abc',$event)"
      </div>
      methods: {
          greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            if (event) {
              alert(event.target.tagName) #得到原生事件
            }
          }
        }

      computed: {
        fullName: {
          // getter
          get: function () {
            return this.firstName + ' ' + this.lastName
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }

      <input v-on:keyup.enter="submit"> #按键修饰符
      <input v-on:keyup.13="submit"> #按键码
      <input v-on:keyup.k="submit" #k键

      <input v-model="message" placeholder="edit me">
      <p>Message is: {{ message }}</p>

      <!-- 在“change”时而非“input”时更新 -->
      <input v-model.lazy="msg" >  
      输入值转为数值类型
      <input v-model.number="age" type="number">
      如果要自动过滤用户输入的首尾空白字符
      <input v-model.trim="msg">

      <h3>{{ title }}</h3>
      <div v-html="content"></div> 这样会报错的 # every component must have a single root element
      正确 eg:
      <div class="blog-post">
        <h3>{{ title }}</h3>
        <div v-html="content"></div>
      </div>

      <div :style="{fontSize: postFontSize + 'em'}"></div> #在绑定的样式中要使用大小写

      <blog-post
              v-for="post in posts"
              v-bind:key="post.id"
              v-bind:post="post"
              v-on:enlarge-text="postFontSize += 1"
            ></blog-post>

      <input v-model="searchText"> 
      这里雷同于：
      <div id="app">
          <custom-input :value="searchText" @input="searchText = $event"></custom-input>
      </div>
      ​
      <template>
        <div>
          <input :value="value" @input="$emit('input', $event.target.value)"/>
        </div>
      </template>
      <script>
      export default {
        name: 'BlogPost',
        props: ['post', 'value'],
        data () {
          return {
            seen: true,
            obj: {
              content: '这个是子组件'
            }
          }
        }
      }
      </script>

      Vue.component('my-component-name', { /* ... */ })
      Vue.component('MyComponentName', { /* ... */ })

      Vue.component('component-a', { /* ... */ })
      Vue.component('component-b', { /* ... */ })
      Vue.component('component-c', { /* ... */ })
      new Vue({ el: '#app' })
      <div id="app">
        <component-a></component-a>
        <component-b><component-a></component-a></component-b>
        <component-c></component-c>
      </div>
      #笔者经过测试 只能后加载能使用前面加载的 比如在a使用b组件会报错的，应该是顺序加载的原因吧

      props: {
        title: String,
        likes: Number,
        isPublished: Boolean,
        commentIds: Array,
        author: Object,
        callback: Function,
        contactsPromise: Promise // or any other constructor
      }

      父组件
      <base-checkbox :checked="lovingVue"  @change="lovingVueFunc" ></base-checkbox> #checked接收是一个bool值的变量，change接收是一个影响lovingVue的方法，
      子组件
      Vue.component('base-checkbox', {
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: Boolean
        },
        template: `
          <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
          >
        `
      })

      [Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function

      eg:
      this.checked = this.checked === false ? true : false; #报错Unnecessary use of boolean literals in conditional expression
      应该替代为：
      this.checked = !this.cheked

       12% building modules 22/31 modules 9 active ...pace/vue_demo/Vue-Project/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
       95% emitting
       > 这个是因为 prettier版本有问题导致的 更换版本即可
       > 在当前项目中直接cnpm install prettier@~1.12.0 -D 或者cnpm install prettier@~1.12.0 --save-dev 然后重新npm run dev
      

      <template>
        <div id="example">
          <button @click="decrement">-</button>
          {{count}}
          {{dataCount}}
          <button @click="increment">+</button>
          <div>{{sex}}</div>
          <div>{{from}}</div>
          <div>{{myCmpted}}</div>
        </div>
      </template>
      <script>
      import { mapState } from 'vuex'
      export default {
        data () {
          return {
            str: '国籍',
            dataCount: this.$store.state.count
          }
        },
        computed: mapState({
          count: 'count', // 第一种写法
          sex: (state) => state.sex, // 第二种写法
          from: function (state) { // 用普通函数this指向vue实例,要注意
            return this.str + ':' + state.from
          },
          // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
          // from: (state) => this.str + ':' + state.from
          myCmpted: function () {
            // 这里不需要state,测试一下computed的原有用法
            return '测试' + this.str
          }
        }),
        methods: {
          increment () {
            this.$store.commit('increment')
          },
          decrement () {
            this.$store.commit('decrement')
          }
        },
        created () {
          // 写个定时器，发现computed依旧保持了只要内部有相关属性发生改变不管是当前实例data中的改变，还是vuex中的值改变都会触发dom和值更新
          setTimeout(() => {
            this.str = '国家'
          }, 1000)
        }
      }
        computed也可以写
        computed: mapState([
          // 映射 this.count 为 store.state.count
          'count'
        ])
      </script>

      const store = new Vuex.Store({
        state: {
          todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
          ]
        },
        getters: {
          doneTodos: state => {
            return state.todos.filter(todo => todo.done)
          }
        }
      })
      其他组件可以使用：
      store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
      ​

      mapGetters 辅助函数
      import { mapGetters } from 'vuex'
      export default {
        // ...
        computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
          ...mapGetters([
            'doneTodosCount',
            'anotherGetter',
            // ...
          ])
        }
      }

      // ...
      mutations: {
        increment (state, n) { #n为increment的第一个参数
          state.count += n
        }
      }
      store.commit('increment', 10) #直接调用传入参数

      import { mapMutations } from 'vuex'
      export default {
        // ...
        methods: {
          ...mapMutations([
            'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
            // `mapMutations` 也支持载荷：
            'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
          ]),
          ...mapMutations({
            add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
          })
        }
      }

      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment (state) {
            state.count++
          }
        },
        actions: {
          increment (context) { #context则代表是所有的store 但不是store
            context.commit('increment')
          }
        }
      })

      <template>
        <div id="app">
          Hello app.vue!
          <!-- 显示路由组件的位置 -->
          <router-view></router-view>
        </div>
      </template>

      export default new Router({
        // mode: 'history',  #默认是使用history模式的 在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushState方法来更改url，不会引起刷新 ，直接访问路由是默认是首页，关闭即可
        routes: [
          {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
          }
      }]

      <div>
            <router-link to = "/home">首页</router-link>
      </div>

      // 路由的懒加载方式
          { path :"/home",component:()=>import("../views/Home")},// 当我访问/home首页时，页面才去加载Home组件，减少首页加载的时长
          { path :"/list",component:()=>import("../views/List")}, //也可以使用 component:()=>import('@/views/List')
          { path :"/mine",component:()=>import("../views/Mine")}

      { path :"/list",component:()=>import("../views/List"),children:[
             // 二级路由前不需要加“/”
            { path: "audio", component: () => import("../views/Audio") },
            { path: "video", component: () => import("../views/Video") }
          ]}

      <div>
        <router-link to = "/list/audio">音频</router-link>
        <router-link to = "/list/video">视频</router-link>
      </div>
      <router-view></router-view> 

      <router-link tag = "li" :to = "{name:'detail',params:{id:'1'},query:{title:'最近播放'}}">我的歌单</router-link>

       

       

       

       

       

       

      路由跳转中 路由1，2同个路由节点，路由1设置了replace ，则先点击路由2再到路由1 ，用户点击浏览器退回按钮在路由2会被替换

      路由跳转到不同的url默认是push的过程，当用户点击浏览器后退按钮式时，则回到之前url，replace属性可以控制router-link的跳转不被记录。

      7、replace

      注解：name是要跳转的路由的名字，也可以写path来指定路径，但是用path的时候就不能使用params传参，params是传路由参数，query传queryString参数

      router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多。

      6、to

      注：二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）。

      在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由，注意：一级路由path前加'/'，二级路由前不需要加'/'。

      5、二级路由：

      懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，会出现长时间的白屏

      4、路由懒加载

      3、使用route-link来创建切换路由工具

      2、在route中使用的mode是history模式

      1、路由切换须使用route-view

      vue的路由

      6、分发action mutation 执行的都是同步，但是action则可以执行异步

      5、可以使用mapMutations映射到vue

      4、改变store且传入参数

      3、mapGetter使用

      2、vuex 的getter使用

      1、获取多个状态的时候可以使用mapstate处理

       

      vue官方调试工具：https://github.com/vuejs/vue-devtools

      Flux文档：https://facebook.github.io/flux/docs/overview

      Redux文档：https://redux.js.org/

      vuex课程：https://scrimba.com/learn/vuex

      一些link

      vuex的一些基本语法

      注：开发项目中遇到的bug处理

       

      37、在eslint中 当存在简单替代方案时，不允许使用三元运算符

      36、在vue中函数不能与变量名一致，否则报错

      35、checkbox 中替代v-model的写法

      34、子组件的prop数据是单向流动的，意味着不能通过子组件去改变父组件的元素

      33、在prop的子组件中可以传入动态或者静态的prop

      32、prop定义数据的类型

      31、在prop中使用大写 在浏览器中可以直接转为小写的

      30、组件的全局注册

      29、组件名称：短横线或者是驼峰命名

      28、在父子组件中使用事件 可以使用v-model 来绑定事件

      27、在元素中添加js事件

      26、在style中添加变量

      25、每个组件都是新的实例，每个实例可以维护一份被返回对象的独立的拷贝，因为每个组件数据互不影响,组件元素比较只有一个根元素、否则报错

      组件可与v-model使用

      24、修饰符

      23、表单输入使用v-model

      22、按键修饰符

      　　可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。

      　　　　

      　　　　此时点击就会弹窗：

      　　　　

      　　　　 添加修饰符：

      　　　此时点击页面中的按钮无任何反应。

      　　　　

      （7）. native：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。

      （６）. passive：该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。

      （５）. once：设置事件只能触发一次，比如按钮的点击等。

      

      此时点击最内层：

      （４）. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

      　　　　

      点击最内层结果：

      多个获取事件 ： 　　　　

      　　　　

      此时点击最内层div，结果如下：

      　　　　

      （３）. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

      　　默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。 　　　　 此时点击超链接不会进行页面的跳转。

      （２）. prevent：阻止默认事件的发生

      　　　　。

      　　再次点击内层div的结果如下：

      　　　　

      　　修改代码，为内层点击事件添加事件".stop"修饰符：

      　　　　

      　　点击外层div的结果：

      　　　　

      点击内层div的结果：

      

      （１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

      21、修饰符

       

       

       

      20、v-on 在事件中获取元素属性

      19、v-for中可以使用方法

      18、对已有对象赋值多个新属性 使用Object.assign() 、_.extend()

      17、v-for 中使用对象

      16、v-for 进行循环

      15、如果频繁的话使用v-show 如果条件复杂则使用v-if

      14、v-show 判断元素是否显示 类似于display

      Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外

      13、用 key 管理可复用的元素

      12、html绑定class 可以使用object 、可以使用[]三元表达式、 {}做类似if判断

      11、在vue中属性data跟methods方法名称不一样

      watch 是可以有setter getter 方法的 笔者使用会报错

    注意：不应该使用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例

    一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个 val （修改后的 data 数据），一个 oldVal（原来的 data 数据） Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性

    10、watch

    9、computed 通过计算出来的属性不需要调用直接可以在 DOM 里使用 页面渲染就会执行的

    8、v-缩写

    7 、修饰符

    6、绑定指令

    {{ }} 可以进行简单的运算以及三运表达式 {{ message.split('').reverse().join('') }}

    5、插入数据中使用双大括号

  4、子组件传数据给父组件

3、父组件传数据给子组件

2、配置本地的vue的淘宝镜像