第一次课

通过ip vue实例和html互相绑定 ,互相的改动也会响应
//这样做之后,vue实例的data 用{{}}语法绑定到html模块区域的任意位置,包括节点属性上,只不过写法会改变
//不够纯字符串的互相绑定好像是要用到v-Module
模板指令是绑定节点属性的
触发事件是放在vue的method里面
//第一次课,做了一个编辑2个imput+button切换编辑的小功能,用到了几个标签,做了一个状态开关
//状态开关要写在data里面,因为使用v-show它的值默认是boolean,因为多处要用到这样的组件,所以用组件打包实现这样的功能,减少代码
如何打包封装组件的呢?
//首先要声明component(里面接受2个参数,第一个是组件名字;第二个是一个对象,里面写的是组件的参数,其中也是可以放data,它和vue实力的data不同,是属于template自己的data)
//vue的api提供了一个poros,专门给组件提供一个外部接口用来传参数进入组件,poros是一个数组,因为有时候需要多个参数,那哪些数据是可以通过poros传进组件的呢?
//使用poros的数据,就是在html模板的节点上用v-bind,html模板上用{{}}
//声明过后,直接在html模板上,可以直接输入组件名使用
前面提到了组件的传参问题,就要提到传入和传出的用法了,前面提到传入现在讲传出
//老师这里的做法是用@imput监听事件,当imput被触发就操作函数将数据改动出去,让外边的app做一个函数改动自己的data实现数据的双绑定
//其中@imput监听事件x函数,是要这样写才能把数据传出去
//this.$emit('edit,e.target.value')

app源码
var app = new Vue({
    el: '#app',
    data: {
      editingName: false,
      resume: {
        name: '姓名',
        gender: '女',
        birthday: '1990年1月',
        jobTitle: '前端工程师',
        phone: '138111111111',
        email: 'example@example.com'
      }
    },
    methods: {
      onEdit(key, value){
        this.resume[key] = value
      },
    }
  })

span组件源码
Vue.component('editable-span', {
    props: ['value'],
    template: `
        <span class="editableSpan">
          <span v-show="!editing">{{value}}</span>
          <input v-show="editing" type="text" v-bind:value="value" @input="triggerEdit">
          <button @click="editing = !editing">edit</button>
        </span>
      `,
    data(){
      return {
        editing: false
      }
    },
    methods: {
      triggerEdit(e){
        this.$emit('edit', e.target.value)
      }
    }
  })

小总结

目前为止学到的vue知识

一个大的app,vue用id绑定了整个页面,页面上的逻辑vue都能解决,所以说axios+vue=jQuery可以死了
控制页面是否显示用v-show指令,它接受的是一个状态布尔值,这个布尔值得在大的APP.vue上面的data上面声明,html模板才可以使用
//这个太好用了,dom的操作vue都帮你封装好了,只要用指令就行了
点击节点,触发事件用on-click指令,可以简写@click='xxxx',这个xxxx函数得在大的APP.vue上面的methods声明
页面的css效果给个class写个文件引入就解决了
一个页面上的所有东西都用一个App.vue解决了,vue上面就只有data methods ...就没了
v-clock指令专门用于隐藏class样式,避免css加载比JavaScript快导致页面闪烁

前端路由

路由就是向导,根据路径的不同展示不用的页面
这件事情一般是后端做,比如上课时候的http-server代码中的if path XXX ~这样的if else代码,现在这件事情让前端来做,也就是给几个button根据不同的button采用不同的class 显示出不同的'页面效果'
这样一来就显得前端做了路由一样