某课网「vue.js 入门基础」课程札记

准备知识:

  1. 前端开发基础 htmlcssjs
  2. 前端 模块化 基础;
  3. 对 ES6 有初步的了解。

初步了解vue.js框架

  1. vue.js是一种轻量级的MVVM前端框架;
  2. 同时吸收了 ReactAngular 的优点:
    • 它强调了 React 组件化的概念,可以轻松的实现数据的展现和分离
    • 它也吸收了 Angular 灵活的指令和页面操作的一些方法

vue.js开发环境的搭建

  1. 推荐使用 vuejs 官方提供的 命令行工具
    • 实现效果: 可以直接在命令行中使用 vue 命令;
    • npm 工具在国内网络环境下很慢,推荐使用 淘宝的 npm 镜像
    • cnpm 安装到系统中:$ npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 安装 vue-cli$ cnmp install -global vue-cli

      -global 代表全局安装,使用之后便可安装到系统的node目录下,继而使用 vue 命令,不使用则只能在当前目录使用。

  2. 初始化 vue 项目步骤:
    • cd 目录『你要把项目放在哪个目录』;
    • vue init webpack {project_name}

      webpack,为项目类型, 使用 webpack 模板, 并且使用 webpack 这个工具进行压缩和打包

    • ? Project name {project_name};
    • ? Project description (A Vue.js project) - 「项目描述」
    • ? Author - 「项目作者」
    • ? Vue build:这里选择 Runtime + Compiler: recommended for most users
      > Runtime + Compiler: recommended for most users 
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in
    • ? Install vue-router? (Y/n) Yes; - [vue-router]
    • ? Use ESLint to lint your code? (Y/n) Yes; - [ESLint是一个语法检查工具]
    • ? Pick an ESLint preset (Use arrow keys):这里选择 Standard (https://github.com/feross/standard)
      > Standard (https://github.com/feross/standard) 
      Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 
    • ? Setup unit tests with Karma + Mocha? (Y/n) No; - [单元测试]
    • Setup e2e tests with Nightwatch? (Y/n) No; - [单元测试]
    • ? Should we run 'npm install' for you after the project has been created? (recommended) (use arrow keys): 这里选择 Yes, use Npm
      > Yes, use NPM
      Yes, use Yarn
      No, I will handle that myself
    • cd {project_name}
    • npm run dev; - [本地运行项目]

脚手架工具的使用

  1. vue.js 组件的重要选项

    new Vue({
        data: {
            a: 1,
            b: []
        },
        methods: {
            doSomething: function(){
                // console.log(this.a);
                this.a ++;
            }
        },
        // 监听
        watch: {
            'a': function(val, oldVal){
                console.log(val, oldVal);
            }
        }
    })

    2.模板指令 - [html和vue对象的粘合剂]

    • 数据渲染: v-text、v-html、{{}} 这三种方式并不等价
      <p>{{ a }}</p>
      <p v-text="a"></p>
      <p v-html="a"></p>
    • 控制模块隐藏: v-if、v-show

      v-if直接不渲染这个DOM元素, 而v-show是通过css的display: none来对它进行隐藏

    <p v-if="isShow"></p>
    <p v-show="isShow"></p>
    new Vue({
            data: {
                isShow: true
            }
    })
    • 渲染循环列表: v-for
      <ul>
      <li v-for="item in items">
          <p v-text="item.label"></p>
      </li>
      </ul>
      new Vue({
      data: {
          items: [
              {
                  label: 'apple'
              },
              {
                  label: 'banana'
              }
          ]
      }
      })
    • 事件绑定: v-on

      <button v-on:click="doThis"></button>
      <button @click="doThis"></button>
      new Vue({
          methods: {
              doThis: function(someThing){
      
              }
          }
      })

      (!!! 实践一下)

    • 属性绑定: v-bind
      <img v-bind:src="imageSrc">
      <div :class="{ red: isRed }"></div>
      <div :class="[classA, classB]"></div>
      <div :class="[classA, { classB: isB, classC: isC }]"></div>

      3.小结

    • new 一个 vue 对象的时候你可以设置它的属性, 其中最重要的包括三个, 分别是 datamethodswatch.
    • 其中data 代表 vue 对象的数据、methods 代表 vue 对象的方法、watch 设置了对象监听的方法
    • vue 对象里的设置通过 html 指令进行关联
    • 重要的指令包括: 指令 释义
      v-text 渲染数据
      v-if 控制显示
      v-on 绑定事件
      v-for 循环渲染

vue.js 具体的指令和项目实践

Vuejs 中的组件

  1. 如何区分组件
    • 功能模块 - [select, pagenation]
    • 页面区域 - [header, footer, sidebar]
  2. 组件之间的调用 - [components]
    import Header from './header'
    import Footer from './footer'
    new Vue({
        components: {
            Header, Footer
        }
    })
    <header></header>
    <footer></footer>
  3. 组件之间的通信 - [props]
    // this is header.vue
    new Vue({
        props: ['msg'],
    })
    <!-- this is app.vue -->
    <header msg="something interesting"></header>
    <footer></footer>

补充

  1. 本地存储的利用
    • 赋值: localStorage.setItem('key', 'value')
    • 取值: localStorage.getItem('key')
  2. 某课网「vue.js 入门基础」课程札记
  3. 某课网「vue.js 入门基础」课程札记

vue

刻意练习,日益精进。

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!