初识Vue，显浅

初识Vue

# 1. Vue.js是什么?

一位华裔前Google工程师开发的前端js库

一个MVVM框架

核心概念

  数据绑定

  组件

借鉴angular的模板和数据绑定技术

借鉴react的组件化和虚拟DOM技术

体积下, 运行效率高, 编码简洁, PC/移动端开发都合适

它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目

  

# 2. 基本使用

引入vue.js

创建Vue对象(vm), 指定选项(配置)对象

el : 指定dom标签容器的选择器

data : 指定初始化状态属性数据的对象函数(返回一个对象)

页面中

使用v-model: 实现双向数据绑定

使用{{}}: 显示数据

 

# 3. Vue对象的选项

## el

指定dom标签容器的选择器

Vue就会管理对应的标签及其子标签

## data

对象或函数类型

指定初始化状态属性数据的对象

vue对象可以直接访问其属性

页面中可以直接访问使用

数据代理: 由vm对象来代理对data中所有属性的操作(读/写)

## methods

包含多个方法的对象

供页面中的事件指令来绑定回调

回调函数默认有event参数, 但也可以指定自己的参数

所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx

## computed

包含多个方法的对象

对状态属性进行计算返回一个新的数据, 供页面获取显示

一般情况下是相当于是一个只读的属性

利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化

如何给对象定义get/set属性

在创建对象时指定: get name () {return xxx} / set name (value) {}

   对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})

## watch

Vue.$watch()

包含多个属性监视的对象

分为一般监视和深度监视

'xxx' : {

deep : true,

handler : fun(value)

}

 

 

# 4. 过渡动画

利用vue去操控css的transition/animation动画

模板: 使用<transition name='xxx'>包含带动画的标签

css样式

.fade-enter-active: 进入过程, 指定进入的transition

.fade-leave-active: 离开过程, 指定离开的transition

.xxx-enter, .xxx-leave-to: 指定隐藏的样式

编码例子

    .xxx-enter-active, .xxx-leave-active {

      transition: opacity .5s

    }

    .xxx-enter, .xxx-leave-to {

      opacity: 0

    }

    

    <transition name="xxx">

      <p v-if="show">hello</p>

    </transition>

    

# 5. 生命周期

vm/组件对象

生命周期图

主要的生命周期函数(钩子)

     created(): 启动异步任务(发送ajax请求, 启动定时器)

     beforeDestroy(): 做一些收尾的工作

 

# 6. 页面指令

v-text/v-html: 指定标签体

    v-text : 当作纯文本

* v-html : 将value作为html标签来解析

v-if v-else v-show

* v-if : 如果vlaue为true, 当前标签会输出在页面中

* v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中

* v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

v-for : 遍历

* 遍历数组 : v-for="(person, index) in persons"   

* 遍历对象 : v-for="value in person"   $key

v-on : 绑定事件监听

* v-on:事件名, 可以缩写为: @事件名

* 监视具体的按键: @keyup.keyCode   @keyup.enter

* 停止事件的冒泡和阻止事件默认行为: @click.stop   @click.prevent

* 隐含对象: $event

v-bind : 强制绑定解析表达式  

* 很多属性值是不支持表达式的, 就可以使用v-bind

* 可以缩写为:  :id='name'

* :class

  * :class="a"

* :class="{classA : isA, classB : isB}"

* :class="[classA, classB]"

* :style

:style="{color : color}"

v-model

* 双向数据绑定

ref : 标识某个标签

* ref='xxx'

* 读取得到标签对象: this.$refs.xxx

  

# 7. 自定义指令

## 注册全局指令

    Vue.directive('my-directive', function(el, binding){

      el.innerHTML = binding.value.toUpperCase()

    })

## 注册局部指令

    directives : {

      'my-directive' : {

        bind: function(el, binding) {

          el.innerHTML = binding.value.toUpperCase()

        }

      }

    }

## 使用指令:

    v-my-directive='xxx'

 

# vue-cli插件使用

## 1. 说明:

vue-cli是vue官方提供的脚手架工具

github: https://github.com/vuejs/vue-cli

 

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

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

    npm install -g vue-cli    //下载脚手架包

    vue init webpack-simple webpack-simple_demo   //下载模板

    cd webpack-simple_demo

    npm install

    npm run dev

    访问: http://localhost:8080/

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

    vue init webpack webpack_demo

    cd webpack_demo

    npm install

    npm run dev

    访问: http://localhost:8080/

### 模板项目的结构

|-- build : webpack相关的配置文件夹(基本不需要修改)

     |-- dev-server.js : 通过express启动后台服务器

|-- config: webpack相关的配置文件夹(基本不需要修改)

     |-- index.js: 指定的后台服务的端口号和静态资源文件夹

|-- node_modules

|-- src : 源码文件夹

     |-- components: vue组件及其相关资源文件夹

       |-- app.vue: 应用根主组件

     |-- main.js: 应用入口js

|-- static: 静态资源文件夹

|-- .babelrc: babel的配置文件

|-- .eslintignore: eslint检查忽略的配置

|-- .eslintrc.js: eslint检查的配置

|-- .gitignore: git版本管制忽略的配置

|-- index.html: 主页面文件

|-- package.json: 应用包配置文件

|-- README.md: 应用描述说明的readme文件

 

## 3. 编码测试与打包发布项目

### 编码测试:

npm run dev

    访问: http://localhost:8080

    编码, 自动编译打包(HMR), 查看效果

### 打包发布

    npm run build

    npm install -g pushstate-server

    pushstate-server dist

访问: http://localhost:9000

 

 

# 1. vue组件的定义与使用

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

## 组成(3个部分)

1.模板页面:

      <template>

        页面模板

      </template>

    2.JS模块对象:

      <script>

        export default {

          data() {return {}},

          methods: {},

          computed: {},

          components: {}

        }

      </script>

    3.样式:

      <style scoped>  //scoped代表样式只针对当前组件的模板页面

        样式定义

      </style>

## 基本使用

在父组件中配置子组件标签

    <template>

      <hello>

    </template>

    <script>

      import Hello from './components/Hello'

      export default {

        components: {

          Hello

        }

      }

    </script>

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

1.标签名与标签属性名不区分大小写

2.标签名: 如果组件名是XxxYyy, 标签名必须为<xxx-yyy>

3.属性名: 如果标签属性名为xxx-yyy, 组件得到的属性名为: xxxYyy

  

# 2. 组件化编码的基本流程

1.拆分界面, 抽取组件

2.编写静态组件, 并使用

3.编写动态组件, 并使用

     初始化数据, 动态显示初始化界面

     实现与用户交互功能

    

# 3. 组件间通信

## 组件通信的2种方式

props

vue的自定义事件

vuex

## 基本原则:

不要在子组件中直接修改父组件的状态数据

## 使用props

组件标签: <my-component name='tom' :age='myAge' :set-name='setName'></my-component>

## 组件: MyComponent

1.在组件内声明所有的props

    //方式一: 只指定名称

    props: ['name', 'age', 'setName']

    //方式二: 指定名称和类型

    props: {

      name: String,

      age: Number,

      setNmae: Function

    }

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

    props: {

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

    }

2.所有props的属性都会成为component对象的属性, 模板页面可以直接引用

## 使用vue的自定义事件机制

1.绑定事件监听

// 方式一: 通过v-on绑定

@delete_todo="deleteTodo"

// 方式二: 通过$on()

this.$refs.xxx.$on('delete_todo', function (todo) {

  this.deleteTodo(todo)

})

 

2.触发事件

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

 

# 1.个常用的库

vue-resource: vue插件, 非官方库, vue1.x使用广泛

axios: 通用的ajax请求库, 官方推荐, vue2.x使用广泛

 

## 2.vue-resource基本使用

## 在线文档: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

## 下载: npm install vue-resource --save

## 编码

    // 引入模块

    import VueResource from 'vue-resource'

    // 使用插件

    Vue.use(VueResource)

   

    // 通过vue/组件对象发送ajax请求

    this.$http.get('/someUrl').then((response) => {

      // success callback

      console.log(response.body) //返回结果数据

    }, (response) => {

      // error callback

      console.log(response.statusText) //错误信息

    })

 

## 3. axios基本使用

## axios在线文档: https://github.com/mzabriskie/axios

## 下载axios: npm install axios --save

## 编码:

    // 引入模块

    import axios from 'axios'

    // 发送ajax请求

    axios.get(url)

      .then((response) => {

        console.log(response.data) // 得到返回结果数据

      })

 

# 1. 说明

官方提供的用来实现SPA的vue插件

github: https://github.com/vuejs/vue-router

中文文档: http://router.vuejs.org/zh-cn/

下载: npm install vue-router --save

  

# 2. 相关API说明

## VueRouter(): 用于创建路由器的构建函数

    new VueRouter({

      // 多个配置项

    })

## 路由配置

    routes: [

      { // 一般路由

        path: '/about',

        component: about

      },

      { // 自动跳转路由

        path: '/',

        redirect: '/about'

      }

    ]

## 组件:

1. router-link: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面

<router-view></router-view>

      

# 3. 实现简单路由

## 路由组件:

home.vue

about.vue

## 应用组件: App.vue

    <div>

      <!--路由链接-->

      <router-link to="/about">About</router-link>

      <router-link to="/home">Home</router-link>

      <!--用于渲染当前路由组件-->

      <router-view></router-view>  

    </div>

## 入口js: main.js

    // 创建路由器(配置路由)

    new VueRouter({

      routes: [

        {

          path: '/',

          redirect: '/about'

        },

        {

          path: '/about',

          component: about

        },

        {

          path: '/home',

          component: home

        }

      ]

    })

      

    // 创建vue配置路由器

    new Vue({

      el: '#app',

      router,

      render: h => h(app)

    })

## 优化路由器配置

    linkActiveClass: 'active', // 指定选中的路由链接的class

    mode: 'history',  // 路由路径不带#

    

# 4. 嵌套路由

## 配置嵌套路由

    path: '/home',

    component: home,

    children: [

      {

        path: 'news',

        component: news

      },

      {

        path: 'message',

        component: message

      }

    ]

## 路由路径

    <router-link to="/home/news">News</router-link>

    <router-link to="/home/message">Message</router-link>

 

# 5. 向路由组件传递数据

## 路由路径携带参数

1.配置路由

      children: [

        {

          path: 'mdetail/:id',

          component: messageDetail

        }

      ]

    2.路由路径

      <router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

    3.路由组件中读取请求参数

      this.$route.params.id

## <router-view>属性携带数据

    <router-view :msg="msg"></router-view>

 

# 6. 其它重要

## 使用<keep-alive>缓存路由组件

    <keep-alive>

      <router-view></router-view>

    </keep-alive>

## 路由组件中监视路由参数的变化

    watch: {

      '$route' (to, from) {

        // to为包含最新参数的$route对象

      }

    }

 

# 1.说明

ESLint是一个代码规范检查工具

官网: http://eslint.org/

基本已替代以前的JSLint

 

# 2. ESLint提供以下支持

ES6

AngularJS

JSX

style检查

自定义错误和提示

 

# 3. ESLint提供以下几种校验

语法错误校验

不重要或丢失的标点符号，如分号

没法运行到的代码块（使用过WebStorm的童鞋应该了解）

未被使用的参数提醒

确保样式的统一规则，如sass或者less

检查变量的命名

 

# 4. 规则的错误等级有三种

0：关闭规则。

1：打开规则，并且作为一个警告（不影响exit code）

2：打开规则，并且作为一个错误（exit code将会是1）

 

# 5. 相关配置文件

## .eslintrc.js : 规则全局配置文件, 可以在此修改规则

    'rules': {

      'no-new': 1   

    }

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

    /* eslint-disable no-new */

    new Vue({

      el: 'body',

      components: { App }

    })

## .eslintignore: 指令检查忽略的文件,　可以在此添加想忽略的文件

*.js

    *.vue