1.允许用户从NPM服务器下载别人编写的第三方包到本地使用
2.允许用户从NPM服务器下载并安装编写的命令行程序到本地使用
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
常用命令：
npm install npm unistall num 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提供一个过渡效果....
<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实例
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data vm.$el === document.getElementById('example')
钩子的this指向调用它的Vue实例
{{}}是指JavaScript表达式 {{number + 1}} 且只支持单个表达式
Vue 2.x中，过滤器只能在{{}}中使用，
filters:{
capitalize:function(){}
}
computed和methods的区别： 计算属性是基于它的依赖缓存，计算属性只有在它的相关依赖发生改变时才会重新取值，methods调用总会执行函数
$watch 用于观察Vue实例上的数据变动，通常更好的办法是使用计算属性而不是一个命令式的$watch回调
何时用$watch？ 当你想要在数据变化响应时，执行异步操作或昂贵操作时
watch选项允许我们执行异步操作
:bind 支持对象，计算属性，数组
v-bind:style其实是一个JavaScript对象，用驼峰式
<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 ind items items是源数据item是数组元素迭代的别名
支持第二个参数作为索引
(item,index) in items
v-for支持<template>标签来渲染多个元素块
<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()
过滤结果
<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
<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规则（小写，并且包含一个短杠）
全局注册：
Vue.component('my-component',{template:'<div>A custom component!</div>'})
局部注册：
Var Child ={ template: '<div>A custom conponent!</div>' }
new Vue({ components:{ 'my-component': Child } })
<table>
<tr is="my-row"></tr> //这样渲染的时候不会报错
</table>
父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息
组件实例的作用域是孤立的，父组件可以使用props把数据传给子组件
props: ['message']
组件中驼峰写法，到html中是W3C写法（用短横线隔开）...
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>
评论（0）
登录 后参与评论。