vue好棒

Author Avatar
芝士君 4月 16, 2017
  • 在其它设备中阅读本文章

前言

前些天ES6看得差不多了,就想着捡起以前学了一点点的vue
不学不要紧。连带得把yarn,webpack给学了。
yarn的话是一个比npm强大的包管理工具,很简单使用
webpack是一个前端资源模块化管理和打包工具,十分强大,但配置起来很要命

vue成绩录入小例子

学什么都要弄点小玩意练练手,所以用vue写了个java实训的成绩录入
示例: demo
源码: github

铲掉重写

vue有一个特别棒的功能就是组件(conpenent),能把页面上的各部分进行拆分,
再利用ES6的importexport导入导出。
一开始觉得特别棒,所以边看文档边弄实例。
结果gg了,因为如果拆分的组件涉及到复杂的数据传输,就会特别麻烦。
不过也由于这个失误,知道了怎么进行父子组件的传参。

简单父子传参

  • 父向子组件传参
    父:<componentA msgFromFather="from father"></componentA>  //如果msgFromFather是动态的,可以:msgFromFather.
    子:<button @cllick="consoleInfo"></button>
    props: ["msgFromFather"],  //先声明调用父组件的变量
    methods: {
      consoleInfo() {
          console.log(this.msgFromFather);
      }
    }
    
  • 子向父组件传参

    使用 $on(eventName) 监听事件
    使用 $emit(eventName) 触发事件

    父:<course v-on:child="showScore"></course>
    子:setCBgColor(x) {
        this.nowSelected = x;
        this.$emit('child', this.nowSelected.scores); // 第一个参数为父组件函数绑定的自定义事件,剩余参数为传参
      }
    

vue脚手架

vue-cli, vue 提供的一个脚手架工具

里面已经配置好webpack,可以直接利用它来写一个单页spa

yarn add global vue-cli   // 全局安装vue脚手架
vue init webpack vue-todolist  // 创建一个webpack模板的新项目
cd vue-todolist
yarn install  安装所需依赖
yarn run dev  监听8080端口index.html

结语

神奇的 MVVM 框架,对那些之前很懵懂的前端模块化,组件化,工程化
有了一个大概的认识,😝

素晴らしい