使用 vue-cli 创建模板项目

vue-cli 是 vue 官方提供的脚手架工具
github: https://github.com/vuejs/vue-cli
作用: 从 https://github.com/vuejs-templates 下载模板项目

创建 vue 项目
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

模板项目的结构

示例代码

/*main.js*/
<template>
  <div>
    <h2 class="title">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '第一个Vue组件'
    }
  }
}
</script>

<style scoped>
  .title {
    color: red;
  }
</style>

/*App.vue*/
<template>
  <div>
    <img src="./assets/logo.png" alt="logo" class="logo">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
  .logo {
    width: 100px;
    height: 100px;
  }
</style>


/*HelloWorld.vue*/

<template>
  <div>
    <h2 class="title">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '第一个Vue组件'
    }
  }
}
</script>

<style scoped>
  .title {
    color: red;
  }
</style>

项目的打包与发布

打包:
npm run build

发布 1: 使用静态服务器工具包
npm install -g serve
serve dist
访问: http://localhost:5000

发布 2: 使用动态 web 服务器(tomcat)

修改配置: webpack.prod.conf.js

 output: {
      publicPath: '/xxx/' //打包文件夹的名称
 }

重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问: http://localhost:8080/xxx

eslint

ESLint 是一个代码规范检查工具
它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示
官网: http://eslint.org/
基本已替代以前的 JSLint

ESLint 提供以下支持

ES
JSX
style 检查
自定义错误和提示

ESLint 提供以下几种校验

语法错误校验
不重要或丢失的标点符号，如分号
没法运行到的代码块(使用过 WebStorm 的童鞋应该了解)
未被使用的参数提醒
确保样式的统一规则，如 sass 或者 less
检查变量的命名

规则的错误等级有三种

0:关闭规则。
1:打开规则，并且作为一个警告(信息打印黄色字体)
2:打开规则，并且作为一个错误(信息打印红色字体)

相关配置文件

.eslintrc.js : 全局规则配置文件

'rules': {
   'no-new': 1
}

在 js/vue 文件中修改局部规则

/* eslint-disable no-new */ 
new Vue({
  el: 'body',
  components: { App }
 })

-.eslintignore: 指令检查忽略的文件

*.js
*.vue

组件定义与使用

vue 文件的组成

-模板页面

<template>
页面模板
</template>

JS 模块对象

<script>
export default {
    data() {
      return {}
    }, 
    methods: {}, 
    computed: {}, 
    components: {}
} 
</script>

样式

<style>
样式定义
</style>

基本使用

引入组件
映射成标签
使用组件标签

<template> 
    <HelloWorld></HelloWorld> 
    <hello-world></hello-world>
</template> 
<script>
import HelloWorld from './components/HelloWorld' 
export default {
  components: {
     HelloWorld
  } 
}
</script>

关于标签名与标签属性名书写问题

写法一: 一模一样
写法二: 大写变小写, 并用-连接

组件间通信

组件间通信基本原则

不要在子组件中直接修改父组件的状态数据
数据在哪, 更新数据的行为(函数)就应该定义在哪

vue 组件间通信方式

props
vue 的自定义事件
消息订阅与发布(如: pubsub 库)
slot
vuex

组件间通信 1: props

使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

定义 MyComponent 时

在组件内声明所有的 props
方式一: 只指定名称
props: ['name', 'age', 'setName']
方式二: 指定名称和类型

props: {
    name: String,
    age: Number, 
    setNmae: Function
}

方式三: 指定名称/类型/必要性/默认值

props: {
    name: {type: String, required: true, default:xxx},
}

注意

此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
问题:
a. 如果需要向非子后代传递数据必须多层逐层传递
b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

组件间通信 2: vue 自定义事件

绑定事件监听

// 方式一: 通过 v-on 绑定 
@delete_todo="deleteTodo"
// 方式二: 通过$on() 
this.$refs.xxx.$on('delete_todo', function (todo) {
    this.deleteTodo(todo)
 })

触发事件

// 触发事件(只能在父组件中接收)
 this.$emit(eventName, data)

注意:

此方式只用于子组件向父组件发送消息(数据)
问题: 隔代组件或兄弟组件间通信此种方式不合适

组件间通信 3: 消息订阅与发布(PubSubJS 库)

订阅消息

PubSub.subscribe('msg', function(msg, data){})

发布消息

PubSub.publish('msg', data)

注意

优点: 此方式可实现任意关系组件间通信(数据)

事件的 2 个重要操作(总结)

绑定事件监听 (订阅消息)

目标: 标签元素 <button>
事件名(类型): click/focus
回调函数: function(event){}

触发事件 (发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发

组件间通信 4: slot

此方式用于父组件向子组件传递"标签数据"

子组件: Child.vue

<template> 
    <div>
         <slot name="xxx">不确定的标签结构 1</slot> 
          <div>组件确定的标签结构</div>
         <slot name="yyy">不确定的标签结构 2</slot>
    </div> 
</template>

父组件: Parent.vue

<child>
      <div slot="xxx">xxx 对应的标签结构</div> 
      <div slot="yyy">yyyy 对应的标签结构</div>
</child>