Vue开发vueNote（一）

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.onclick=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});深度监视