NPM结合vue的使用

1.允许用户从NPM服务器下载别人编写的第三方包到本地使用

2.允许用户从NPM服务器下载并安装编写的命令行程序到本地使用

3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

常用命令：

npm install   npm unistall npm update npm ls 树形结构打印依赖包

常用参数：

-g global 全局依赖

npm一般用于安装脚手架

脚手架：搭建好一个一个基本的模板

vue支持IE9 及更高版本

├── build                      // 构建相关

├── config                     // 配置相关

├── src                        // 源代码

│   ├── api                    // 所有请求

│   ├── assets                 // 主题 字体等静态资源

│   ├── components             // 全局公用组件

│   ├── directive              // 全局指令

│   ├── filtres                // 全局 filter

│   ├── icons                  // 项目所有 svg icons

│   ├── lang                   // 国际化 language

│   ├── mock                   // 项目mock 模拟数据

│   ├── router                 // 路由

│   ├── store                  // 全局 store管理

│   ├── styles                 // 全局样式

│   ├── utils                  // 全局公用方法

│   ├── vendor                 // 公用vendor

│   ├── views                   // view

│   ├── App.vue                // 入口页面

│   ├── main.js                // 入口 加载组件 初始化等

│   └── permission.js          // 权限管理

├── static                     // 第三方不打包资源

│   └── Tinymce                // 富文本

├── .babelrc                   // babel-loader 配置

├── eslintrc.js                // eslint 配置项

├── .gitignore                 // git 忽略项

├── favicon.ico                // favicon图标

├── index.html                 // html模板

└── package.json               // package.json

components:/HelloWorld.vue 实际页面的html样式

router/index.js 配置了路由

src/App.vue 页面级vue组件

src/main.js 页面配置

index.html 主页面入口

一个页面要这么复杂吗

vue提供一个过渡效果….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="app">
    <ul>
        <test v-for="item in groceryList" v-bind:todo="item"></test>  
    </ul>
</div>
<script>
     Vue.component('test',{ //父组件
       props:['todo'],//可继承todo属性
       template:'<li>{{todo.text}}</li>'//模版中使用todo属性
     })
     new Vue({
     el: '#app',
     data: {
       groceryList: [
         { text: 'Vegetables' },
         { text: 'Cheese' },
         { text: 'Whatever else humans are supposed to eat' }
       ]
     }
   })
</script>

已经将应用分割成了两个更小的单元，子元素通过 props 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父应用的基础上，进一步为我们的 todo 组件改进更多复杂的模板和逻辑。

拓展vue

var MyComponent = Vue.extend({ //拓展选项  })

所有的Vue组件都是被拓展的Vue实例

1
2
3
4
5
6
7
8
9

var vm = new Vue({

el: '#example',

data: data

})

vm.$data === data vm.$el === document.getElementById('example')

钩子的this指向调用它的Vue实例

{{}}是指JavaScript表达式 {{number + 1}} 且只支持单个表达式

Vue 2.x中，过滤器只能在{{}}中使用，

1
2
3
4
5

filters:{

    capitalize:function(){}

}

computed和methods的区别： 计算属性是基于它的依赖缓存，计算属性只有在它的相关依赖发生改变时才会重新取值，methods调用总会执行函数

$watch 用于观察Vue实例上的数据变动，通常更好的办法是使用计算属性而不是一个命令式的$watch回调

何时用$watch？ 当你想要在数据变化响应时，执行异步操作或昂贵操作时

watch选项允许我们执行异步操作

:bind 支持对象，计算属性，数组

v-bind:style其实是一个JavaScript对象，用驼峰式

1
2
3
4
5
6
7
8
9
10
11
12
13

<div v-bind:style="styleObject"></div>

data:{

styleObject:{

color:'red',

fontsize:'13px'

}

}

v.if 和 v.show

v.if是真实的，惰性的v.show始终保留，只是切换display

需要频繁切换用v-show，不容易改变的用v-if

v-for item and items items是源数据item是数组元素迭代的别名

支持第二个参数作为索引

(item,index) in items

v-for支持<template>标签来渲染多个元素块

1
2
3
4
5
6
7

<template v-for = "item in items">

<li>{{item.msg}}</li>

<li class="divider"></li>

<template>

items也可以是一个对象，(value,key,index) 键值，键名，索引

v-for = "n in 10"  输出1-10

尽可能使用v-for来提供key <div v-for="item in items" :key="item.id"><!-- 内容 --><div>

数组变异方法： push(),splice(),reverse()

过滤结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<li v-for="n in evenNumbers">{{ n }}</li>

data: {

  numbers: \[ 1, 2, 3, 4, 5 \]

},

computed: {

  evenNumbers: function () {

    return this.numbers.filter(function (number) {

      return number % 2 === 0

    })

  }

}

methods只有纯粹的数据逻辑，而不是去处理DOM事件细节，提供了事件修饰符

事件修饰符：.stop阻止事件冒泡 .prevent提交事件不在重载页面 .vapture .self只当事件在该元素触发时触发

按键修饰符：v-on:keyup.13="submit" v-on:keyup.enter

1
2
3

<input type="checkbox" id="checkbox" v-model="checked"/>

<label for="checkbox">男</label>

checked:true

这样的model才是默认选中的

复选框呢 =》 用数组保存

v-model  在input事件中同步输入框的值和数据，.lazy 转变为change事件中同步

.nember 转为number类型

.trim自动过滤首尾空格

组件：

组件可以拓展HTML元素，封装可重用的代码；组件是自定义元素，也可以是原生HTML元素的形式，以is特性拓展

自定义签名，最好遵循W3C规则（小写，并且包含一个短杠）

全局注册：

1

Vue.component('my-component',{template:'<div>A custom component!</div>'})

局部注册：

1
2
3
4
5
6
7
8
9

Var Child ={ template: '<div>A custom conponent!</div>' }

new Vue({ components:{ 'my-component': Child } })

<table>

<tr is="my-row"></tr>  //这样渲染的时候不会报错

</table>

父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息

组件实例的作用域是孤立的，父组件可以使用props把数据传给子组件

1

props: \['message'\]

组件中驼峰写法，到html中是W3C写法（用短横线隔开）…

1
2
3

props:\['initialCounter'\],

data: function(){return {counter: this.initialCounter}}

父组件→子组件

使用$on(eventName)监听事件

使用$emit(eventName)触发事件

要让组件的v-model生效，必须接收一个value属性，在有新的value时触发input事件

编写可复用组件：

props，Events，Slots

props允许外部环境传递数据给组件，

Events允许组件触发外部环境的副作用

Slots允许外部环境将额外的内容组合在组件中

自定义指令

钩子函数包括： bind，inserted，update，componentUpdated，unbind

钩子函数的参数：el指令所绑定的元素，binding，vnode虚拟节点，oldVnode上一个虚拟节点

开发插件：

添加全局方法或者属性： vue-element

添加全局资源：vue-touch

通过全局minxin方法添加一些组件选项：vuex

添加Vue实例方法，通过把它们添加到Vue.prototype上实现

一个库，提供自己的API，同时提供上面提供的一个或多个功能，如vue-router

使用插件：

Vue.user()

单文件组件：

1.全局定义要求每个component命名不得重复

2.字符串模版缺乏语法高亮，要用到 \

3.不支持CSS

4.没有构建步骤

components放置的是全局公用的一些组件，一些页面级的组件还是放在各自views下，方便管理

自定义components使用方法

1.编写XXX.vue  <template></template><script></script><style></style>

2.引入  在App.vue中引入 import firstcomponent from './component/XXX.vue'

3.注册  在<script></script>标签内的 data 代码块后面加上 components: { XXX }

4.使用  在<template></template>内加上<XXX></XXX>