npm install (install dependencies)
npm run dev (serve with hot reload at localhost:8080)
npm run build (build for production with minification)
npm run unit (run unit test)
npm run e2e (run e2e tests)
npm test (run all tests)
npm init
npm i(install) 包名 -S(--save)-D(--save-dev) 安装包
npm i -s-d 包名
全部恢复或者生产恢复包 npm i(install) --production(只恢复生产依赖dependencies)
yarn命令：
yarn add||remove 包名 -S(--save)-D(--save-dev) 安装包
全部恢复或者生产恢复包 yarn i(install) --production(只恢复生产依赖dependencies)
yarn add vue axios mint-ui vue-router -S(生产依赖) &&
yarn add webpack html-webpack-plugin
webpack-dev-server style-loader css-loader
autoprefixer-loader less-loader less
url-loader file-loader babel-loader
babel-core babel-preset-es2015
babel-plugin-transform-runtime vue-loader
vue-template-compiler（开发依赖） -D
babel-loader 依赖babel-core
vue-loader 依赖于vue-template-compiler
webpack.config.js -->入口和出口，解决文件的解析loader
index.html -->SPA
main 程序入口，分析项目之间的依赖关系
app.vue 主体组件文件
components 各种功能页面的组件
static 全局css，img图片，vender ->mui
npm instal -g yarn
yarn version
yarn init
yarn install
yarn add vue
yarn add vue-router
yarn remove vue-router
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
1 npm init -y
2 webpack.config.js直接用
3 index.html 视口
3.1：div #app
4 main.js 引入包，安装包，构建Vue实例 render(App)
5 app.vue
6 配置路由，
7 home.vue文件
v-on 缩写 @ v-bind 缩写 :
http://www.cnblogs.com/wisewrong/p/6255817.html
npm cache clean 清理缓存
npm install -g vue-cli
最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
安装完成后，可以使用 vue -V （注意 V 大写）
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看是否安装成功
如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本
vue init webpack-simple my-project-name
cd my-project
cnpm install
cnpm run dev
cnpm run build
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后，可以输入 npm run build 来进行打包工作
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。
//排除路径
exclude: /node_modules/,
{
test: /\.vue$/,
loader: 'vue-loader' //vue-loader 依赖于vue-template-compiler
}
plugins: [
new htmlWebpackPlugin({
template: './index.html', //未来移动到dist目录下能够有Index.html文件
//自动加上引入output中的filename
})
],
<button v-model="n1"></button>
<button @click="doChange"></button>
{{shwoResult}}
export default {
data() {
return {}
},
methods: {
},
computed:{
showResult() {
return this.n3=this.n1+this.n2;
}
},created() {
console.log("子页面被穿件了");
}
}
<router-link :to="{name:'subVue'}">进入到子页面进入到子页面进入到子页面</router-link>
在webpack.config.js中的plugins中全局申明jquery
在main.js中是局部引入；因为bootstrap也要使用jQuery，
，所以要全局引入；同时在项目中用webpack中
使用webpack要在node_modules里面下载webpack包，之前
启动使用的是全局的
在main.js中引入axios时，得挂载到Vue的原型上
Vue.prototype.$ajax=Axios;
在vue中使用代理跨域时，只能在开发环境当中使用（webpack-dev-server）；
在生成环境中使用webpack命令；要在webpack.config.js中
配置，使webpack遇到这个标识开头的链接时，自动启动一个node服务器帮助转发
created() {
//var self =this; 在下方使用self，箭头函数替代了这个事情；
this.$ajax.get('getlunbo')
.then((res)=>{
this.pictures=res.data.message;
})
.catch(function(err){
console.log(err);
})
}
<style scoped>
<img v-bind:src="imgUrl"/>
<img :src="imgurl"/>
推荐将静态文件放入static文件夹下,个文件夹下的文件（夹）会按照原本的结构放在网站根目录下
*特性插值会转为v-bind绑定: href='{{url}}' --> v-bind:href='url'
//引入axios
import Axios from 'axios';
//配置默认的请求url
Axios.defaults.baseURL = 'http://webhm.top:8899/api/';
Vue.prototype.$ajax = Axios;
//引入mint-ui
import MintUi from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUi)
//引入我们的全局的css
import './static/global.css';
import App from './app.vue';
import Home from './components/home.vue';
vue和angular区别：
vue 更适合移动端
angular更适合pc
都不兼容低版本的IE；
vue常用指令
v-model 一般用于表单元素，双向数据绑定
v-show="true/false"
v-on:click/mouseover/mouseout/keyup="add()"
new Vue({
el:".box" //各种选择器
data:{ //数据
string,number,boolean,arr,json
}，
methods:{ //里面放方法,函数
this.arr //这里面的this就是代表new出来的对象，this.arr可以访问它里面的数据；
}
})
<li v-for="value in arr">
{{value}} {{$index}} value变量随便起名 $index元素在数组内的索引
</li>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
value变量随便起名 $index元素在json内的索引
$key是json的键
</li>
<li v-for="(key,value) in json">
{{key}} {{value}}
</li>
bootstrap.min.css和bootstrap.min.js
bootstrap和jqueryMobile一样，只需要给标签赋值class,role
bootstrap是依赖jquery，使用bootstrap要引入jquery
v-on:click =>@click="show($event,12)"
$event事件对象
阻止冒泡：（1）在methods中ev.cancelBubel="true"
（2）@click.stop
阻止默认行为（默认事件）：
(1) <input type="button" value="按钮' @contextmenu="show($event)">
在methods中， ev.preventDefault(); 默认执行show方法和鼠标右键展开菜单
(2) @contextmenu.prevent
--------------------------------------------------
键盘类的事件：
@keydown $event ev.keyCode
回车，上下左右， @keydown.13 @keydown/keyup.enter @keydown/keyup.up/down/left
-----------------------------------------
属性：v-bind 绑定属性；
<img v-bind:src="url"/>
<img :src="url" :width/height/title/href="w" />
--------------------------------------------
class和style:
:class :style
（1） :class="[red]" red这里是data数据
:class="[red,b,c,d]" 多个class
（2）:class="{red:a,blue:false}" red这里是json的键，对应的是style中.red类
:class="json" data中的json，
data{
json：{
red:a,blue:false
}
}
---------------------------------
<strong :style="{color:'red'}">sdfsdfsd</strong> 正常的行内样式
<strong :style="[c]"> data中的 c:{color:'red'}
<strong :style="[c,d,e,f]"> data:{
c:{color:'red'},//复合样式，采用驼峰命名
d:{backgroundColor:'blue'}
}
<strong :style="[c]"> data{
c:{
color:'red',
backgroundColor:'gray'
}
}
<strong :style="json">
------------------------------------------------
模板：
{{msg}}数据更新，模板变化
{{*msg}}数据只绑定一次，
{{{msg}}} HTML转义输出
--------------------------------------------
过滤器：==》过滤模板数据
系统提供了一些过滤器
{{msg|filterA ‘参数’}}
{{msg|filterA|filterB|filterC}}
{{‘welcome’|upppercase/lowercase/capitalize(首字母大写)}}
{{12|currency ‘¥’}}
----------------------------------------
交互：emulateJSON:true
$http (ajax)
vue本身不支持交互 如果vue想做交互，引入vue-resouce库
get请求：
methods:{
get:function(){
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
------------------------------------------------
post请求：emulateJSON:true
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
----------------------------------------------
jsonp： jsonp:'cb'
----------------------------------
vue生命周期
当vue实例创建完毕 后自己执行created:function(){}函数
beforeCompile:function(){} 实例创建完毕编译之前
{{msg}}编译就是把模板内填充上数据
compiled: 编译之后
ready window.onload 把文本节点插入到文档中了
beforeDestroyed 销毁之前
destroyed 销毁之后
$destroy()指令
这些真正完成之后会得到一个对象，官方叫vm，vue-model
document.οnclick=function(){
vm.$destroy();
}
--------------------------------------
用户有时会看到{{}}产生闪烁，
v-cloak 防止闪烁,用在比较大的段落，
<style>[v-cloak]{display:none;}
v-text
v-html 都防止闪烁
-----------------------------------
computed 计算属性的使用
computed: { //默认写法
b:function(){
//业务逻辑代码
return this.a+1; //这里不是方法，是属性，函数的写法
不return这个属性是没有值的 return什么，b的值就是什么
}
}
正确写法：
computed:{
b:{
get:function(){},
set:function(){}
}
}
computed里面放一些业务逻辑的代码，一定要return
vue实例一些加单的方法
vm.$el 就是元素，
vm.$data 就是本身的数据对象data
vm.$mount("#box"); 手动挂载vue程序
vm.$destroy 销毁对象说
vm.$options 配置，访问自定义的属性
vm.$log() 查看当前数据的状态
vm.$options.show();
------------------------------------
循环：
v-for="value in data" 当重复添加数据时，结合track-b
track-by="索引"
track-by="$index/uid"
-------------------------------------------
过滤器：
debounce 配合事件,延迟执行
<input @keydown="show | debounce 2000"
limitBy 参数（取几个）数组中的用法
limitBy A B 取几个，从哪里开始
<li v-for="v in arr | limitBy 2">
filterBy 'o' 包含字母o的数据
有时需要初始化一下数据
orderBy 排序
orderBy 1 正序 -1 倒序
json 相当于stingify
----------------------------------------
自定义过滤器
Vue.filter(name,function(input){})
时间转化器：
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
过滤html标记
双向过滤器
Vue.filter('filterHtml',{
read:function(input){ //默认，model->view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){
return val;
}
})
--------------------------------------------------
自定义指令：
Vue.directive(指令名称,function(){
//自定义时不带v-,只写red
//默认调用也是bind：
this.el --->原生dom对象
})
指令名称：v-red 在自定义时写red
-----------------------------------------
拖拽：
------------------------------
自定义元素指令： （用处不大）
elementDirection
--------------------------------------
自定义键盘信息：
Vue.directive("on").keyCodes.ctrl=17;
@keydown.ctrl
---------------------------------------
监听数据变化：
vm.$watch(name,function(){}) //浅度监视
vm.$watch(name,function(){},{deep:true});深度监视
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
