The vueapp from lzyhero1990

主要包含以下主题

vue-cli插件使用
vue-reource插件使用
vue-router插件使用
vue组件化
Todo-List 应用
关于ESLint工具

vue-cli插件使用

说明:
- vue-cli是vue官方提供的脚手架工具包
- github: https://github.com/vuejs/vue-cli

使用vue-cli快速创建工程化项目

使用基于webpack的简单模板创建项目: webpack-simple_demo

npm install -g vue-cli    //下载脚手架包
vue init webpack-simple webpack-simple_demo   //下载模板
vue init webpack-simple#1.0 webpack-simple_demo   //下载模板
cd webpack-simple_demo
cyarn/npm install
npm run dev
访问: http://localhost:8080/

使用基于webpack的完整模板创建项目: webpack_demo

vue init webpack#1.0 webpack_demo
cd webpack_demo
cyarn/npm install
npm run dev
访问: http://localhost:8080/

vue-resource插件使用

说明:

vue-resource是非官方提供的ajax插件, 受众广
github: https://github.com/pagekit/vue-resource
vue官方推荐使用axios作为ajax库
下载
```
npm install vue-resource --save
```

基本使用编码

//引入模块
import VueResource from 'vue-resource'
//使用插件
Vue.use(VueResource)

// 发送get请求
this.$http.get('/someUrl').then((response) => {
  // success callback
  console.log(response.data) //返回结果数据
}, (response) => {
  // error callback
  console.log(response.statusText) //错误信息
});

详细用法(查看在线文档)

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
Vue.http.json('/someUrl', [options]).then(successCallback, errorCallback);

vue-router插件使用

说明
- 官方提供的用来实现SPA的插件
- github: https://github.com/vuejs/vue-router
- 对应vue1.x的版本为: 0.7.13

下载和引入

npm install [email protected] --save
import VueRouter from 'vue-router'

相关API说明

VueRouter(): 构建函数, 用来创建路由器对象

配置: 在创建对象时可以指定一个配置对象

new VueRouter({
  linkActiveClass: 'active', //指定当前路由链接的样式名
  history: true //去掉#!
})

map(): 映射路由

router.map({
    '/about': {
      component: About
    },
    '/home': {
      component: Home
    }
  })

start(): 启动应用
```
router.start(App, '#app')
```
go(): 请求指定路由
```
router.go('/about')
```

指令与组件:
- v-link: 用来指定路由路径
```
<a v-link='{path:"/about"}'>About</a>
```
- : 用来显示当前路由组件界面
```
<router-view></router-view>
```

实现简单路由

路由组件:
- home.vue
- about.vue

应用组件: App.vue

<div>
  <!--路由链接-->
  <a v-link="{path:'/about'}">About</a>
  <a v-link="{path:'/home'}">Home</a>
  <!--用于渲染当前路由组件-->
  <router-view keep-alive></router-view>  
</div>

入口js: main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import app from './components/app.vue'

//使用插件
Vue.use(VueRouter)

//创建用来映射路由的路由器对象
const router = new VueRouter({
  linkActiveClass: 'active', //指定当前路由链接的样式名
  history: true //去掉#!
})

//配置路由
router.map({
  '/about': {component: about},
  '/home': {component: home}
})

//启动应用
router.start(app, '#app')

//初始请求一个路由
router.go('/about')

实现嵌套路由

配置嵌套路由

subRoutes: {
  '/news': {
    component: news
  }
}

路由路径

<a v-link="{path: '/home/news'}">News</a>

路由请求携带参数

配置路由

subRoutes: {
  '/mdetail/:id': {
    component: messageDetail
  }
}

路由路径

<a v-link="{path: '/home/message/mdetail/2'}">{{m.title}}</a>

路由组件中读取请求参数
```
{{$route.params.id}}
```

使用
- 参数keep-alive属性实现路由界面的缓存
- 通过标签属性可动态向路由组件内部传递数据
```
<router-view keep-alive :msg="msg"></router-view>
```

vue组件

一个.vue文件就是一个vue组件

组成(3个部分)

模板页面:
```
<template>
  页面模板
</template>
```

JS默认模块对象:

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

页面样式:

<style scoped>
  样式定义
</style>

基本使用在父组件对象的components属性中配置组件模块对象

<template>
  <Hello>
</template>
<script>
  import Hello from './components/Hello'
  export default {
    components: {
      Hello
    }
  }
</script>

关于标签名与标签属性名书写问题:
- 标签名与标签属性名不区分大小写
- 标签名: 如果组件名是XxxYyy, 标签名必须为
- 属性名: 如果标签属性名为xxx-yyy, 组件得到的属性名为: xxxYyy
使用props传递数据
- 组件标签:
  - 动态props: :age='myAge'
- 组件: MyComponent
  - 所有props的属性都会成为component对象的属性, 模板页面可以直接引用
  - 在组件内的prop验证
```
//简写
props: ['name', 'age', 'setName']
//详写
props: {
  name: {type: String},
  age: {type: Number},
  setNmae: {type: Function}
}
```

组件间通信

尽量通过props的方式实现组件间通信
基本原则: 不要在子组件中直接修改父组件的状态数据

可以使用vue的自定义事件机制实现组件间通信

绑定事件监听

方式一: 通过$on()

this.$on('delete_todo', function (todo) {
  this.deleteTodo(todo)
})

方式二: 通过events选项

events: {
  'delete_todo': function (todo) {
    this.deleteTodo(todo)
  }
},

方式三: 通过v-on绑定
```
@delete_todo="deleteTodo"
```

触发事件(3种情况)

this.$emit(eventName, data): 在当前组件触发事件
this.$dispatch(eventName, data): 分发给父辈组件(冒泡)
this.$broadcast(eventName, data): 广播给后代组件

关于ESLint

说明
- ESLint是一个代码规范检查工具
- 官网: http://eslint.org/
- 基本已替代以前的JSLint
ESLint提供以下支持
- ES6
- AngularJS
- JSX
- Style检查
- 自定义错误和提示
ESLint提供以下几种校验
- 语法错误校验
- 不重要或丢失的标点符号，如分号
- 没法运行到的代码块（使用过WebStorm的童鞋应该了解）
  - 未被使用的参数提醒
- 漏掉的结束符，如}
- 确保样式的统一规则，如sass或者less
  - 检查变量的命名
规则的错误等级有三种
- 0：关闭规则。
- 1：打开规则，并且作为一个警告（不影响exit code）。
  - 2：打开规则，并且作为一个错误（exit code将会是1）。
相关配置文件
- .eslintrc.js : 规则相关配置文件, 可以在此修改规则
  - 在js/vue文件中指定
```
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})
```
  - .eslintignore: 指令检查忽略的文件,　可以在此添加想忽略的文件
```
*.js
*.vue
```

lzyhero1990 / vueapp Goto Github PK

vueapp's Introduction

主要包含以下主题

vue-cli插件使用

vue-resource插件使用

vue-router插件使用

vue组件

关于ESLint

vueapp's People

Contributors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent