欧美日韩夜夜干,青青操视频网站

0332afac3bf2d60d72fe69db0cc263274290dd686145b-Xeebvn.jpeg

官網(wǎng)：http://cn.vuejs.org/
與angular類似的一個(gè)MVVM框架。
與DOM的行為驅(qū)動(dòng)不同、vue以及angular是以數(shù)據(jù)作為驅(qū)動(dòng)操作頁面變化。

基本格式

以json的形式、將數(shù)據(jù)(支持所有格式)掛載在vue的data上、方法掛載在vue的methods上。

  new Vue({
       el:'#box',
        //數(shù)據(jù)
       data:{
             key:'welcome vue',
             arr:['apple','banana','orange','pear'],
             json:{a:'apple',b:'banana',c:'orange'}
       }
      //方法
      methods:{
            add:function(){
            //push 添加元素
                  this.arr.push('tomato');
            }
      }
      //計(jì)算屬性
      computed:{
       //默認(rèn)為get方法
           b:function(){
               //業(yè)務(wù)邏輯代碼
               return 2;
          }
        //內(nèi)部可以實(shí)現(xiàn)set、get兩個(gè)方法
           c:{
               get:function(){
                   return this.a+2;
               },
               set:function(val){
                  this.a=val-2;
               }
           }
       },
       components:{ //局部組件---詳見組件
        'my-aaa':Aaa
    }   
  });
  //鉤子函數(shù)(生命周期)
  created:function(){
       alert('實(shí)例已經(jīng)創(chuàng)建');
  }
  //自定義過濾器
  Vue.filter('toDou',function(val,a,b){
        return val<10?'0'+val:''+val;
  });
  //自定義指令
  Vue.directive('red',function(){
        this.el.style.background='red';
  });

常用指令

雙向數(shù)據(jù)綁定v-model:"key"
 <input type="text" v-model="key">
將{key:value}于input雙向綁定。
改動(dòng)時(shí)其余部分的{{key}}也會(huì)隨之替換。
循環(huán)v-for
<li v-for="value in arr">

       {{value}}
    </li>

value為內(nèi)容、$index為索引、$key為字典(json)獨(dú)有。
//針對(duì)json格式的數(shù)據(jù)還有以下寫法
<li v-for="(k,v) in json">
{{k}} {{v}}
</li>
k為key、v為value
重復(fù)數(shù)據(jù)有事不予展示:track-by="$index/uid"添加索引
<li v-for="(k,v) in json" track-by="$index">
{{k}} {{v}}
</li>
顯示隱藏v-show
data:{ //數(shù)據(jù)

        a:true
     }
    <input type="button" value="按鈕" v-on:click="a=false">
    <div style="width:100px; height:100px; background: red" v-show="a">

v-show:true/false

false顯示
條件渲染v-if
<div id="app" >

       <p v-if='ture'>{{message}}</p>
    </div>

v-if:true/false

true顯示

區(qū)別

v-if是真實(shí)的條件渲染、當(dāng)進(jìn)行條件切換時(shí)、它會(huì)銷毀和重建條件塊的內(nèi)容，并且它支持<template>語法
v-show的條件切換時(shí)基于css的display屬、所以不會(huì)銷毀和重建條件塊的內(nèi)容

當(dāng)你頻繁需要切換條件時(shí)，推薦使用v-show；否則使用v-if；

v-else

v-else必須與v-show/v-if連用
當(dāng)其處在非渲染狀態(tài)下執(zhí)行v-else中的代碼塊
事件綁定v-on:
<input type="button" value="按鈕" v-on:click="show()">
click可以換成任意事件
v-on:click與@click等價(jià)

自定義指令:directive

聲明為red、調(diào)用時(shí)調(diào)用v-red

無參數(shù)
v-red
Vue.directive('red',function(){
//此處的this.el與vm.$el為同一個(gè)DOM元素。但是寫法不同需要區(qū)分
this.el.style.background='red';
});

有參數(shù)
v-changeColor="'blue'"/"myColor"
Vue.directive('changeColor',function(color){
this.el.style.background=color;
});

元素指令
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<div id="box">
<zns-red></zns-red>
</div>

事件對(duì)象

 <input type="button" value="按鈕" @click="show($event)">
$event結(jié)構(gòu)體內(nèi)部與原生相同

阻止事件冒泡

a).方法內(nèi)部： ev.cancelBubble=true; (原生js)
b).@click.stop (vue功能)

阻止默認(rèn)行為

a). ev.preventDefault(); (原生js)
b). @contextmenu.prevent (vue功能)//contextmenu為右鍵點(diǎn)擊

鍵盤事件

默認(rèn)
@keydown ------ $event 　　 ev.keyCode
@keyup
回車 (a). @keyup.13(b). @keyup.enter

自定義鍵盤事件
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
<input type="text" @keydown.myenter="show">

屬性

普通屬性

<im src="{{url}}" alt=""> 數(shù)據(jù)雙向綁定，但是會(huì)報(bào)一個(gè)404錯(cuò)誤
<im v-bind:src="url" alt="">屬性綁定，不會(huì)發(fā)404請求
v-bind:src="url"可以簡寫成:src="url"

class

1、
:class="[red]" red是數(shù)據(jù) :class="[red,b,c,d]"
2、
:class="{red:a, blue:false}" a=true
3、
:class="json"
data:{
json:{red:true, blue:false}
}

style
 :style="json"
 backgroundColor:'gray'  //復(fù)合樣式，采用駝峰命名法

模板

{{msg}}----數(shù)據(jù)更新模板變化
{{*msg}}----數(shù)據(jù)只綁定一次
{{{msg}}}----HTML轉(zhuǎn)意輸出(< h3>aaa</ h3>)

過濾器

過去模板中的內(nèi)容并加以改變
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase --- 大寫
lowercase --- 小寫
capitalize --- 首字母大寫
currency --- 美元符號(hào)
currency "人民幣:" --- 自定義參數(shù)
debounce 2000--- 配合事件，延遲執(zhí)行

數(shù)組配合使用過濾器:
limitBy 取幾個(gè)/取幾個(gè) 從哪開始
filterBy'關(guān)鍵詞' 過濾數(shù)據(jù)
orderBy 排序
json 展示json全部數(shù)據(jù)
　　　　 1 -> 正序
　　　　 -1 -> 倒序

自定義過濾器
Vue.filter('toDou',function(val,a,b){
return val<10?'0'+val:''+val;

});

  {{a | toDou 1 2}}

禁止{{花括號(hào)}}顯示

v-cloak
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak> </div>

v-text:直接輸出
<span v-text="msg"></span>

v-html:轉(zhuǎn)譯輸出
<span v-html="msg"></span>

交互

get

獲取普通文本數(shù)據(jù)
this.$http.get('a.txt').then(function(res){

      alert(res.data);
    },function(res){
      alert(res.status);
    });

給服務(wù)發(fā)送數(shù)據(jù)
this.$http.get('url',paramsDic).then(function(res){
alert(res.data);

    },function(res){
        alert(res.status);
    });

post

this.$http.post('post.php',{

      a:1,
      b:20
  },{
      emulateJSON:true
  }).then(function(res){
      alert(res.data);
  },function(res){
      alert(res.status);
  });

jsonp

jsonp采用的get方式
this.$http.jsonp(''https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'',{
word:'a'
},{
//callback名字，默認(rèn)名字就是"callback"

      jsonp:'cb'
  }).then(function(res){
      alert(res.data.s);
  },function(res){
      alert(res.status);
  });

簡寫

this.$http({

    url:地址
    data:給后臺(tái)提交數(shù)據(jù),
      //method默認(rèn)為get
    method:'get'/'post'/'jsonp'
      //如果method改為jsonp、需要聲明cbName
    jsonp:'cb' //cbName
  }).then(function(res){
       //成功
  },function(res){
      // 失敗
  });

生命周期(鉤子函數(shù))

1.0

created -> 實(shí)例已經(jīng)創(chuàng)建
beforeCompile -> 編譯之前
compiled -> 編譯之后
ready -> 插入到文檔中 √
beforeDestroy -> 銷毀之前
destroyed -> 銷毀之后

2.0

beforeCreate ->實(shí)例初始化之后。
created -> 實(shí)例已經(jīng)創(chuàng)建。
beforeMount -> 編譯之前
mounted -> 編譯之后 √
activated -> keep-alive 組件激活時(shí)調(diào)用。
deactivated -> keep-alive 組件銷毀時(shí)調(diào)用。
beforeUpdate -> 數(shù)據(jù)更新之前
update -> 數(shù)據(jù)更新之后
beforeDestroy -> 銷毀之前
destroyed -> 銷毀之后

通常在√時(shí)、vue.js已可以使用
created:function(){

       alert('實(shí)例已經(jīng)創(chuàng)建');
  }

計(jì)算屬性:computed

computed:{

   //默認(rèn)為get方法
        b:function(){
           //業(yè)務(wù)邏輯代碼
           return 2;
        }
  //內(nèi)部可以實(shí)現(xiàn)set、get兩個(gè)方法
        c:{
          get:function(){
             return this.a+2;
                },
          set:function(val){
              this.a=val-2;
          }
        }
   }

{}

計(jì)算屬性必須有返回值

vue實(shí)例簡單方法

vm.$el -> 獲取元素
vm.$el.style.background='red';>

vm.$data -> 獲取data數(shù)據(jù)對(duì)象
console.log(vm.$data.a);
vm.$mount -> 手動(dòng)掛載vue程序
 vm.$mount('#box');
vm.$options -> 獲取自定義屬性
vm.$options.customMethods.show();

vm.$destroy -> 銷毀對(duì)象
vm.$destroy

vm.$log(); -> 查看現(xiàn)在數(shù)據(jù)的狀態(tài)

vm.$watch ->監(jiān)聽數(shù)據(jù)變化

淺度監(jiān)聽
vm.$watch('a',function(){
this.b=this.a+100;
});

深度監(jiān)聽
vm.$watch('json',function(){
alert('發(fā)生變化了');
},{deep:true});

過渡(動(dòng)畫)

<div id="div1" class="animated" v-show="bSign" transition="fade"></div>

自定義動(dòng)畫
```
<style>
```

          //動(dòng)畫總體設(shè)置
      .fade-transition{
          transition: 1s all ease;  
      }
          //動(dòng)畫進(jìn)入
      .fade-enter{
          opacity: 0;
      }
          //動(dòng)畫移出
      .fade-leave{
        opacity: 0;
          transform: translateX(200px);
      }
    </style>

利用animate.css實(shí)現(xiàn)動(dòng)畫

下載https://daneden.github.io/animate.css/
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
//需要做動(dòng)畫的控件需要一個(gè)專屬className:animated
vue中
transitions:{ //定義所有動(dòng)畫名稱(具體樣式可以去animate.css官網(wǎng)查看)
bounce:{
//進(jìn)入
enterClass:'zoomInLeft',
//離開
leaveClass:'zoomOutRight'
}
}

組件

注冊組件
var Aaa=Vue.extend({

        //直接顯示
        template:"<h3 @click='change'>我是標(biāo)題3</h3>",
        //顯示數(shù)據(jù)
        //****data必須是函數(shù)的形式，函數(shù)必須返回一個(gè)對(duì)象(json)
        data(){
            return {
                msg:'數(shù)據(jù)MSG'
            }
        },
        //添加方法
        methods:{
          change(){
                this.msg="changed";
            }
        }
    });

全局組件

    //參數(shù)1組件名、參數(shù)2組件對(duì)象
    Vue.component('aaa',Aaa);

局部組件

//在vue中
components:{ //局部組件

        'aaa':Aaa
    }

html中均使用<aaa></aaa>即可
模板使用
template:'#aaa'
配合js

      <script type="x-template" id="aaa">
        <h2 @click="change">標(biāo)題2->{{msg}}</h2>
      </script>

配合template-------推薦

      <template id="aaa">
        <h1>標(biāo)題1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

動(dòng)態(tài)組件
//html中 :is="組件名稱"
<component :is="a"></component>
//vue中
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa組件</h2>'
},
'bbb':{
template:'<h2>我是bbb組件</h2>'
}
}
組件查看工具
vue-devtools

父子組件

在父級(jí)控件中繼續(xù)聲明components即可
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa組件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb組件</h3>'
}
}
}
}
});

數(shù)據(jù)傳遞:

默認(rèn)情況下，vue子組件沒法訪問父組件數(shù)據(jù)

子級(jí)獲取父級(jí)數(shù)據(jù):
//父組件中---綁定子組件屬性
//.sync可以讓組件屬性跟隨子組件而同步
<bbb :m="msg2" :my-msg.sync="msg"></bbb>
//子組件中---在props中聲明屬性
props:['m','myMsg']
props:{

        'm':String,
        'myMsg':Number
      }

父級(jí)獲取子級(jí)數(shù)據(jù):3步
//子級(jí)方法中發(fā)數(shù)據(jù)記給父級(jí)
this.$emit('child-msg',數(shù)據(jù));
//子控件標(biāo)簽中綁定數(shù)據(jù)名與方法
<bbb @child-msg="get"></bbb>
//父組件中聲明方法
get(msg){
this.msg=msg;
}

slot:組件占位標(biāo)簽(槽口)
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>

    </aaa>
    <hr>
    <aaa>
    </aaa>
    <template id="aaa">
        <h1>xxxx</h1>
         //上面的“ol-slot”會(huì)出現(xiàn)在此處
        <slot name="ol-slot">這是默認(rèn)的情況</slot>
        <p>welcome vue</p>
         //上面的“ul-slot”會(huì)出現(xiàn)在此處
        <slot name="ul-slot">這是默認(rèn)的情況2</slot>
    </template>

node.js

https://nodejs.org/en/#download
安裝后可以使用npm命令
版本號(hào)用@----例:
npm install vue-router@0.7.13

bower

Bower是一個(gè)客戶端技術(shù)的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網(wǎng)絡(luò)資源。其他一些建立在Bower基礎(chǔ)之上的開發(fā)工具，如YeoMan和Grunt，這個(gè)會(huì)在以后的文章中介紹。
npm install -g bower
bower info vue //查看vue版本

vue-router:路由

SPA單網(wǎng)頁應(yīng)用
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
<a v-link="{path:'/home'}">主頁</a>
<a v-link="{path:'/news'}">新聞</a>
//路由組件展示位置
<router-view></router-view>
//1. 準(zhǔn)備一個(gè)根組件
var App=Vue.extend();

    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
        template:'<h3>我是主頁</h3>'
    });

    var News=Vue.extend({
        template:'<h3>我是新聞</h3>'
    });

    //3. 準(zhǔn)備路由
    var router=new VueRouter();

    //4. 關(guān)聯(lián)
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });

    //5. 啟動(dòng)路由
    router.start(App,'#box');

    //6. 跳轉(zhuǎn)
    router.redirect({
        '/':'/home'
    });

點(diǎn)擊的v-line按鈕會(huì)添加class="v-link-active"
多級(jí)路由(路由的嵌套)
<a v-link="{path:'/home/login'}">登錄</a>

    <a v-link="{path:'/home/reg'}">注冊</a>

//在'home'中
subRoutes:{
'login':{
component:{
template:'<strong>我是登錄信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注冊信息</strong>'
}
}

路由的其他信息

<a v-link="{path:'/news/detail/001?a=1&b=2'}">新聞001</a>

    <a v-link="{path:'/news/detail/002'}">新聞002</a>

  subRoutes:{
      //'/:id'為可變參數(shù):::detail/002

        '/detail/:id':{
            component:Detail
        }
    }

  <template id="detail">
    //參數(shù)信息

    {{$route.params | json}}
       <br>

    //路由地址:::/news/detail/001?a=1&b=2

    {{$route.path}}
      <br>

    //數(shù)據(jù):::a=1&b=2

    {{$route.query | json}}
    </template>

vue.loader:模塊開發(fā)

類似css-loader、style-loader、url-loader、html-loader...
簡單的目錄結(jié)構(gòu):
|-index.html
main.js ||-入口文件
import Vue from 'vue'

    import App from './App.vue'
    new Vue({
    el:'body',
      components:{
       app:App
      }
    });

|-App.vue   vue文件，官方推薦命名法

package.json ||-工程文件(項(xiàng)目依賴、名稱、配置)
npm init --yes 生成
"scripts": {

        //工程
        "dev": "webpack-dev-server --inline --hot --port 8082"
    },

webpack.config.js ||-webpack配置文件（關(guān)鍵）
module.exports={

      //入口文件
      entry:'./main.js',
      //出口文件
      output:{
          //當(dāng)前路徑
          path:__dirname,
          //打包結(jié)束的名字叫build.js
          filename:'build.js'
      },
      module:{
        loaders:[
        //以.vue結(jié)尾的文件用vue.loader
        {test:/\.vue$/, loader:'vue'},
        //除node_modules的.js之外全部檢查轉(zhuǎn)換
        {test:/\.js$/, loader:'babel', exclude:/node_modules/}
        ]
      },
      babel:{
        presets:['es2015'],
        //實(shí)時(shí)刷新插件            
        plugins:['transform-runtime']
      }
    };

webpack準(zhǔn)備工作
下載webpack以及webpack-dev-server(帶服務(wù)器版本)
 npm install webpack webpack-dev-server --save-dev
下載vue.loader
App.vue -> 變成正常代碼
npm install vue-loader@8.5.4 --save-dev

下載vue-html-loader

編譯.vue中<template>
cnpm install vue-html-loader --save-dev
下載css-loader以及vue-style-loader --save-dev
 npm install css-loader vue-style-loader
下載vue-hot-reload-api@1.3.2
 npm install vue-hot-reload-api@1.3.2 --save-dev
下載babel以及準(zhǔn)備工作
babel必要插件(用來轉(zhuǎn)譯ES6語法)
//依舊是npm install xxxxx(可以連寫)
babel-loader
babel-core

  babel-plugin-transform-runtime
  babel-preset-es2015
  babel-runtime

如何運(yùn)行
1. npm install

    2. npm run dev --- ('dev'為在package.json中配置的名稱)

vue-cli:vue腳手架

簡要:

幫你提供好基本項(xiàng)目結(jié)構(gòu)

本身集成很多項(xiàng)目模板:

simple ->  不太常用
webpack :可以使用(大型項(xiàng)目)、Eslint 檢查代碼規(guī)范、單元測試
webpack-simple  推薦使用, 沒有代碼檢查    √
browserify  ->  不太常用
browserify-simple  ->  不太常用

基本使用流程:
1.安裝vue命令環(huán)境

    npm install vue-cli -g  安裝 vue命令環(huán)境
      驗(yàn)證安裝ok?
      vue --version
  2.生成項(xiàng)目模板 
    vue init <模板名> 本地文件夾名稱
  3. 進(jìn)入到生成目錄里面
    cd xxx
    npm install
  4.運(yùn)行:
    npm run dev

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue.js1.0筆記

基本格式

常用指令

雙向數(shù)據(jù)綁定v-model:"key"

循環(huán)v-for

顯示隱藏v-show

false顯示

條件渲染v-if

true顯示

區(qū)別

當(dāng)你頻繁需要切換條件時(shí)，推薦使用v-show；否則使用v-if；

v-else

事件綁定v-on:

自定義指令:directive

事件對(duì)象

阻止事件冒泡

阻止默認(rèn)行為

鍵盤事件

屬性

普通屬性

class

style

模板

過濾器

禁止{{花括號(hào)}}顯示

交互

get

post

jsonp

簡寫

生命周期(鉤子函數(shù))

1.0

2.0

通常在√時(shí)、vue.js已可以使用

計(jì)算屬性:computed

vue實(shí)例簡單方法

過渡(動(dòng)畫)

自定義動(dòng)畫

利用animate.css實(shí)現(xiàn)動(dòng)畫

組件

注冊組件

全局組件

局部組件

html中均使用<aaa></aaa>即可

模板使用

配合js

配合template-------推薦

動(dòng)態(tài)組件

組件查看工具

父子組件

數(shù)據(jù)傳遞:

slot:組件占位標(biāo)簽(槽口)

node.js

bower

vue-router:路由

多級(jí)路由(路由的嵌套)

路由的其他信息

vue.loader:模塊開發(fā)

main.js ||-入口文件

package.json ||-工程文件(項(xiàng)目依賴、名稱、配置)

webpack.config.js ||-webpack配置文件（關(guān)鍵）

webpack準(zhǔn)備工作

下載webpack以及webpack-dev-server(帶服務(wù)器版本)

下載vue.loader

下載vue-html-loader

下載css-loader以及vue-style-loader --save-dev

下載vue-hot-reload-api@1.3.2

下載babel以及準(zhǔn)備工作

如何運(yùn)行

vue-cli:vue腳手架

簡要:

本身集成很多項(xiàng)目模板:

基本使用流程:

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

當(dāng)你頻繁需要切換條件時(shí)，推薦使用v-show；否則使用v-if；

通常在√時(shí)、vue.js已可以使用

package.json ||-工程文件(項(xiàng)目依賴、名稱、配置)