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});深度監視