前端知识点

​​​​​​​

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）。

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。
var app = {
    name: 'app',
    version: '1.0.0',
    sayName: function(name){
        console.log(this.name);
    }
}
module.exports = app;

var app = require('./app.js');
app.sayName('hello');//hello

exports.[function name] = [function name]
moudle.exports= [function name]

exports的方法可以直接调用
module.exports需要new对象之后才可以调用

为什么要使用proxyTable
很简单，两个字，跨域。
在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。
在项目目录中找到根目录下config文件夹下的index.js文件

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
  cssSourceMap: false
}
上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下：
'http://localhost:8080/api' ===> 'http://www.abc.com/api'

index.html---主页，项目入口
App.vue---根组件
main.js---入口文件

指令是带有 v- 前缀的特殊属性。
<p v-if="seen">现在你看到我了</p>

使用 v-html 指令用于输出 html 代码

HTML 属性中的值应使用 v-bind 指令。 
 <div v-bind:class="{'class1': use}">
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性
<a v-bind:href="url">菜鸟教程</a>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<p>{{ message }}</p>
<input v-model="message">

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

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

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)。

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

Vuex就是在一个项目中，提供唯一的管理数据源的仓库
Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法以对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例。
场景一：处理多组件依赖于同一个数据，例如有柱状图和条形图两个组件都是展示的同一数据；
场景二： 一个组件的行为——改变数据——影响另一个组件的视图，其实也就是公用依赖的数据；

import model from "@/common/model";
resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

export default导出的对象里有个name属性，可以当做vue组件的名字，Vue.component('组件名字',{})
Vue实例中data属性的三种写法及区别

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            isLogin: false
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data: function(){
            return {
                isLogin: false
            }
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data() {
            return {
                isLogin: false
            }
        }
    })
</script>
第3种是第2种的ES6写法

在简单的Vue实例中，没什么区别，因为你app对象不会被复用。
var app = new Vue({...})

但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。
export default{
    data(){
        return {
            ...
        }
    }
}

Vue的组件为什么要export default
Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

export 和export default 的区别在于：export 可以导出多个命名模块，例如：
//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}
　　对应的引入方式：

//demo2.js
import { str, f } from 'demo1'

export default 只能导出一个默认模块，这个模块可以匿名，例如：

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}
　　对应的引入方式：

//demo2.js
import obj from 'demo1'
引入的时候可以给这个模块取任意名字，例如 "obj"，且不需要用大括号括起来。

created:html加载完成之前，执行。执行顺序：父组件-子组件
mounted:html加载完成后执行。执行顺序：子组件-父组件
methods：事件方法执行
watch：watch是去监听一个值的变化，然后执行相对应的函数。
computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
const app = new Vue({
  data: { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
}).$mount('#app')
const app = new Vue({
  data: { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000},
  el:'#app',
})

使用 Vue.js ，可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
	<router-link to="/foo/secondFoo">Go to second</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = {template: `
    <div class="user">
      <h2>User hai</h2>
      <router-view></router-view>
    </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const secondFoo = { template: '<div>secondFoo</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo,children: [
        {
          path: 'secondFoo',
          component: secondFoo
        }
      ] },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</body>
</html>

ES6
    //ES5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

    
// ES5
    var msg = "Hi \
    man!
    "
    
// ES6
    const template = `<div>
        
<span>hello world</span>
    
</div>`

 // 1.includes：判断是否包含然后直接返回布尔值
    const str = 'hahay'
    console.log(str.includes('y')) // true

    // 2.repeat: 获取字符串重复n次
    const str = 'he'
    console.log(str.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理
    // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理

    // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
    const str =  'hello world!'
    console.log(str.startsWith('hello')) // true
    console.log(str.endsWith('!')) // true
    
    // 4. padStart 和 padEnd 填充字符串，应用场景：时分秒
    setInterval(() => {
        const now = new Date()
        const hours = now.getHours().toString()
        const minutes = now.getMinutes().toString()
        const seconds = now.getSeconds().toString()
        console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
    }, 1000)

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。  
箭头函数最直观的三个特点:  
不需要 function 关键字来创建函数 
省略 return 关键字 
继承当前上下文的 this 关键字

//例如：
    [1,2,3].map(x => x + 1)
    
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：
const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }