精品一区一区三区,色999日韩精品,99热被操

第一節(jié)

vue:
讀音: v-u-e
view

vue到底是什么?
    一個mvvm框架(庫)、和angular類似
    比較容易上手、小巧
mvc:
    mvp
    mvvm
    mv*
    mvx
官網(wǎng):http://cn.vuejs.org/ 
手冊： http://cn.vuejs.org/api/

vue和angular區(qū)別?
vue——簡單、易學(xué)
指令以 v-xxx
一片html代碼配合上json，在new出來vue實(shí)例
個人維護(hù)項目

vue基本雛形:
vue:
html:

        <div id="box">
            {{msg}}
        </div>
        var c=new Vue({
            el:'#box',  //選擇器  class tagName
            data:{
                msg:'welcome vue'
            }
        });

常用指令:
指令: 擴(kuò)展html標(biāo)簽功能,屬性

v-model 一般表單元素(input)   雙向數(shù)據(jù)綁定

循環(huán):
    v-for="name in arr"
        {{$index}}

    v-for="name in json"
        {{$index}}  {{$key}}

    v-for="(k,v) in json"
事件:
    v-on:click="函數(shù)"

    v-on:click/mouseout/mouseover/dblclick/mousedown.....

    new Vue({
        el:'#box',
        data:{ //數(shù)據(jù)
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            show:function(){    //方法
                alert(1);
            }
        }
    });
顯示隱藏:
    v-show=“true/false”

bootstrap+vue簡易留言板(todolist):

bootstrap: css框架    跟jqueryMobile一樣
    只需要給標(biāo)簽 賦予class，角色
    依賴jquery

確認(rèn)刪除？和確認(rèn)刪除全部么?

事件:
v-on:click/mouseover......

簡寫的:
@click=""       推薦

事件對象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop 推薦
默認(rèn)行為(默認(rèn)事件):
    阻止默認(rèn)行為:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推薦
鍵盤:
    @keydown    $event  ev.keyCode
    @keyup

    常用鍵:
        回車
            a). @keyup.13
            b). @keyup.enter
        上、下、左、右
            @keyup/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....

屬性:
v-bind:src=""
width/height/title....

簡寫:
:src="" 推薦

<img src="{{url}}" alt="">  效果能出來，但是會報一個404錯誤
<img v-bind:src="url" alt="">   效果可以出來，不會發(fā)404請求

class和style: 數(shù)組用的是數(shù)據(jù)，對象用的是屬性
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]"  red是數(shù)據(jù)
:class="[red,b,c,d]"

:class="{red:a, blue:false}"

:class="json"
    
    data:{
        json:{red:a, blue:false}
    }
--------------------------
style:
:style="[c]"
:style="[c,d]"
    注意:  復(fù)合樣式，采用駝峰命名法
:style="json"

模板:
{{msg}} 數(shù)據(jù)更新模板變化
{{*msg}} 數(shù)據(jù)只綁定一次

{{{msg}}}   HTML轉(zhuǎn)意輸出

過濾器:-> 過濾模板數(shù)據(jù)
系統(tǒng)提供一些過濾器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase   eg: {{'welcome'| uppercase}}
lowercase
capitalize

currency    錢

{{msg| filterA 參數(shù)}}

....

交互:
$http （ajax）

如果vue想做交互

引入: vue-resouce

get:
    獲取一個普通文本數(shù)據(jù):
    this.$http.get('aa.txt').then(function(res){
        alert(res.data);
    },function(res){
        alert(res.status);
    });
    給服務(wù)發(fā)送數(shù)據(jù):√
    this.$http.get('get.php',{
        a:1,
        b:2
    }).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:
    https://sug.so.#/suggest?callback=suggest_so&word=a

    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
        wd:'a'
    },{
        jsonp:'cb'  //callback名字，默認(rèn)名字就是"callback"
    }).then(function(res){
        alert(res.data.s);
    },function(res){
        alert(res.status);
    });

https://www.baidu.com/s?wd=s

第二節(jié)

vue制作weibo
交互

vue-> 1.0
vue-resource ajax php
服務(wù)器環(huán)境(node)

this.$http.get()/post()/jsonp()

this.$http({
    url:地址
    data:給后臺提交數(shù)據(jù),
    method:'get'/post/jsonp
    jsonp:'cb' //cbName
});

vue事件:
@click=""
數(shù)據(jù):

添加一條留言：

獲取某一頁數(shù)據(jù):
getPageData(1);

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

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

beforeDestroy   ->   銷毀之前
destroyed   ->   銷毀之后

用戶會看到花括號標(biāo)記:

v-cloak     防止閃爍, 比較大段落

<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html

ng: $scope.$ watch

計算屬性的使用:
computed:{
b:function(){ //默認(rèn)調(diào)用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}

* computed里面可以放置一些業(yè)務(wù)邏輯代碼，一定記得return

vue實(shí)例簡單方法:
vm. $el -> 就是元素 vm.$ data -> 就是data
vm.$mount -> 手動掛在vue程序

vm.$options ->   獲取自定義屬性
vm.$destroy ->   銷毀對象

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

循環(huán)：
v-for="value in data"

會有重復(fù)數(shù)據(jù)？
track-by='索引'   提高循環(huán)性能

track-by='$index/uid'

過濾器:
vue提供過濾器:
capitalize uppercase currency....

    debounce    配合事件，延遲執(zhí)行
數(shù)據(jù)配合使用過濾器:
    limitBy 限制幾個
    limitBy 參數(shù)(取幾個)
    limitBy 取幾個  從哪開始

    filterBy    過濾數(shù)據(jù)
    filterBy ‘誰’

    orderBy 排序
    orderBy 誰 1/-1
        1  -> 正序
        2  -> 倒序

自定義過濾器:  model ->過濾 -> view
    Vue.filter(name,function(input){
        
    });

時間轉(zhuǎn)化器
過濾html標(biāo)記

雙向過濾器:*
Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<+]>/g,'');
            },
            write:function(val){ //view -> model
                return val;
            }
});

數(shù)據(jù) -> 視圖
model -> view

view -> model

v-text
v-for
v-html
指令: 擴(kuò)展html語法

自定義指令:
屬性:

Vue.directive(指令名稱,function(參數(shù)){
    this.el -> 原生DOM元素
});

<div v-red="參數(shù)"></div>

指令名稱:   v-red  ->  red

* 注意: 必須以 v-開頭

拖拽:
-------------------------------

自定義元素指令:（用處不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});

@keydown.up
@keydown.enter

@keydown.a/b/c....

自定義鍵盤信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

監(jiān)聽數(shù)據(jù)變化:
vm. $el/$ mount/$options/....

vm.$watch(name,fnCb);  //淺度
vm.$watch(name,fnCb,{deep:true});  //深度監(jiān)視

vue組件:
組件間各種通信
slot
vue-loader webpack .vue
vue-router

第三節(jié)

git page：
任何倉庫 master分支，都可以發(fā)布(git page)

雙向過濾器:
Vue.filter(name,{
read:
write:
});

1.0
2.0

引入 vue.js
bower-> （前端）包管理器
npm install bower -g
驗(yàn)證: bower --version
bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息
<script src="bower_components/vue/dist/vue.js"></script>

vue-> 過渡(動畫)
本質(zhì)走的css3: transtion ,animation

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

動畫:
    .fade-transition{
        
    }
    進(jìn)入：
    .fade-enter{
        opacity: 0;
    }
    離開：
    .fade-leave{
        opacity: 0;
        transform: translateX(200px);
    }
----------------------------------------

vue組件:
組件: 一個大對象
定義一個組件:

全局組件
var Aaa=Vue.extend({
template:'<h3>我是標(biāo)題3</h3>'
});

Vue.component('aaa',Aaa);

*組件里面放數(shù)據(jù):
    data必須是函數(shù)的形式，函數(shù)必須返回一個對象(json)

局部組件
放到某個組件內(nèi)部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件
aaa:Aaa
}
});

另一種編寫方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});

var vm=new Vue({
    el:'#box',
    components:{
        'my-aaa':{
            template:'<h2>標(biāo)題2</h2>'
        }
    }
});

配合模板:
1. template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'

2. 單獨(dú)放到某個地方
    a). <script type="x-template" id="aaa">
        <h2 @click="change">標(biāo)題2->{{msg}}</h2>
    </script>
    b). <template id="aaa">
        <h1>標(biāo)題1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

動態(tài)組件:
<component :is="組件名稱"></component>

vue-devtools -> 調(diào)試工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

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

組件數(shù)據(jù)傳遞: √

子組件就想獲取父組件data
在調(diào)用子組件：
<bbb :m="數(shù)據(jù)"></bbb>

子組件之內(nèi):
props:['m','myMsg']
```
 props:{
     'm':String,
     'myMsg':Number
 }
```
父級獲取子級數(shù)據(jù)
*子組件把自己的數(shù)據(jù)，發(fā)送到父級

vm.$emit(事件名,數(shù)據(jù));

v-on: @

vm. $dispatch(事件名,數(shù)據(jù)) 子級向父級發(fā)送數(shù)據(jù) vm.$ broadcast(事件名,數(shù)據(jù)) 父級向子級廣播數(shù)據(jù)
配合: event:{}

在vue2.0里面已經(jīng)，報廢了

slot:
位置、槽口
作用: 占個位置

類似ng里面 transclude  （指令）

vue-> SPA應(yīng)用，單頁面應(yīng)用
vue-resouce 交互
vue-router 路由

根據(jù)不同url地址，出現(xiàn)不同效果

咱上課: 0.7.13

主頁 home
新聞頁 news

html:
<a v-link="{path:'/home'}">主頁</a> 跳轉(zhuǎn)鏈接

展示內(nèi)容:
<router-view></router-view>

js:
//1. 準(zhǔn)備一個根組件
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. 啟動路由
router.start(App,'#box');

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

路由嵌套(多層路由):

主頁  home
    登錄  home/login
    注冊  home/reg
新聞頁 news

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

路由其他信息:
/detail/:id/age/:age

{{$route.params | json}}    ->  當(dāng)前參數(shù)

{{$route.path}} ->  當(dāng)前路徑

{{$route.query | json}} ->  數(shù)據(jù)

vue-loader:
其他loader -> css-loader、url-loader、html-loader.....

后臺: nodeJs  ->  require  exports
broserify  模塊加載，只能加載js
webpack   模塊加載器， 一切東西都是模塊, 最后打包到一塊了

require('style.css');   ->   css-loader、style-loader


vue-loader基于webpack

.css
.js
.html
.php
.....

a.vue
b.vue

.vue文件:
    放置的是vue組件代碼

    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js  （平時代碼、ES6）  babel-loader
    </script>

ES6: 模塊化開發(fā)
導(dǎo)出模塊：
export default {}
引入模塊:
import 模塊名 from 地址

webpak準(zhǔn)備工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev

App.vue -> 變成正常代碼       vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

第四節(jié)

手動配置自己:
webpack+vue-loader

webpack加載模塊

如何運(yùn)行此項目？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}

以后下載模塊：
npm install <package-name> --save-dev

EADDRINUSE 端口被占用

少了:
webpack-dev-server
webpack

.vue 結(jié)尾，之后稱呼組件
路由:
vue-router
-> 如何查看版本:bower info vue-router
路由使用版本: 0.7.13

配合vue-loader使用:

下載vue-router模塊
cnpm install vue-router@0.7.13
import VueRouter from 'vue-router'
Vue.use(VueRouter);
配置路由
var router=new VueRouter();
router.map({
路由規(guī)則
})
開啟
router.start(App,'#app');

注意:
之前: index.html -> <app></app>
現(xiàn)在: index.html -> <div id="app"></div>

App.vue ->   需要一個 <div id="app"></div>  根元素

home news

路由嵌套:
和之前一模一樣

上線:
npm run build
-> webpack -p

腳手架:
vue-cli——vue腳手架
幫你提供好基本項目結(jié)構(gòu)

本身集成很多項目模板:
simple 個人覺得一點(diǎn)用都沒有
webpack 可以使用(大型項目)
Eslint 檢查代碼規(guī)范，
單元測試
webpack-simple 個人推薦使用, 沒有代碼檢查 √

browserify  ->  自己看
browserify-simple

基本使用流程:

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

第五節(jié)：vue2.0

vue2.0:
bower info vue

http://vuejs.org/

到了2.0以后，有哪些變化?

在每個組件模板，不在支持片段代碼
組件中模板:
之前:
<template>
<h3>我是組件</h3><strong>我是加粗標(biāo)簽</strong>
</template>
現(xiàn)在: 必須有根元素，包裹住所有的代碼
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標(biāo)簽</strong>
</div>
</template>
關(guān)于組件定義
Vue.extend 這種方式，在2.0里面有，但是有一些改動，這種寫法，即使能用，咱也不用——廢棄

Vue.component(組件名稱,{ 在2.0繼續(xù)能用
data(){}
methods:{}
template:
});

2.0推出一個組件，簡潔定義方式：
var Home={
template:'' -> Vue.extend()
};
生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
現(xiàn)在:
beforeCreate 組件實(shí)例剛剛被創(chuàng)建,屬性都沒有
created 實(shí)例已經(jīng)創(chuàng)建完成，屬性已經(jīng)綁定
beforeMount 模板編譯之前
mounted 模板編譯之后，代替之前ready *
beforeUpdate 組件更新之前
updated 組件更新完畢 *
beforeDestroy 組件銷毀前
destroyed 組件銷毀后
循環(huán)
2.0里面默認(rèn)就可以添加重復(fù)數(shù)據(jù)

arr.forEach(function(item,index){

});

去掉了隱式一些變量
$index$ key

之前:
v-for="(index,val) in array"
現(xiàn)在:
v-for="(val,index) in array"

track-by="id"
變成
<li v-for="(val,index) in list" :key="index">
自定義鍵盤指令
之前：Vue.directive('on').keyCodes.f1=17;

現(xiàn)在: Vue.config.keyCodes.ctrl=17
過濾器
之前:
系統(tǒng)就自帶很多過濾
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些簡單功能，自己通過js實(shí)現(xiàn)

到了2.0，內(nèi)置過濾器，全部刪除了

lodash  工具庫 _.debounce(fn,200)


自定義過濾器——還有
    但是,自定義過濾器傳參

    之前: {{msg | toDou '12' '5'}}
    現(xiàn)在:     {{msg | toDou('12','5')}}

組件通信:
vm. $emit() vm.$ on();

父組件和子組件:

子組件想要拿到父組件數(shù)據(jù):
    通過  props

之前，子組件可以更改父組件信息，可以是同步  sync
現(xiàn)在，不允許直接給父級的數(shù)據(jù)，做賦值操作

問題，就想更改：
    a). 父組件每次傳一個對象給子組件, 對象之間引用  √
    b). 只是不報錯, mounted中轉(zhuǎn)

可以單一事件管理組件通信: vuex
var Event=new Vue();

Event.$emit(事件名稱, 數(shù)據(jù))

Event.$on(事件名稱,function(data){
    //data
}.bind(this));

debounce 廢棄
-> lodash
_.debounce(fn,時間)

第六節(jié)

vue動畫
vue路由

transition 之前屬性
<p transition="fade"></p>

.fade-transition{}
.fade-enter{}
.fade-leave{}

到2.0以后 transition 組件

class定義:
.fade-enter{} //初始狀態(tài)
.fade-enter-active{} //變化成什么樣 -> 當(dāng)元素出來(顯示)

.fade-leave{}
.fade-leave-active{} //變成成什么樣 -> 當(dāng)元素離開(消失)

如何animate.css配合用？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>

多個元素運(yùn)動:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>

vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:

布局
<router-link to="/home">主頁</router-link>

<router-view></router-view>
路由具體寫法
//組件
var Home={
template:'<h3>我是主頁</h3>'
};
var News={
template:'<h3>我是新聞</h3>'
};

//配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
];

//生成路由實(shí)例
const router=new VueRouter({
routes
});

//最后掛到vue上
new Vue({
router,
el:'#box'
});
重定向
之前 router.rediect 廢棄了
{path:'*', redirect:'/home'}

路由嵌套:
/user/username

const routes=[
    {path:'/home', component:Home},
    {
        path:'/user',
        component:User,
        children:[  //核心
            {path:'username', component:UserDetail}
        ]
    },
    {path:'*', redirect:'/home'}  //404
];

/user/strive/age/10

:id
:username
:age

路由實(shí)例方法:
router.push({path:'home'}); //直接添加一個路由,表現(xiàn)切換路由，本質(zhì)往歷史記錄里面添加一個
router.replace({path:'news'}) //替換路由，不會往歷史記錄里面添加

vue-cli

npm install

腳手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})

vue2.0
vue-loader和vue-router配合

style-loader css-loader

style!css

項目:

第七節(jié)

vue問題:
論壇
http://bbs.zhinengshe.com

UI組件
別人提供好一堆東西

目的: 
    為了提高開發(fā)效率
    功能

原則: 拿過來直接使用

vue-cli -> vue-loader

bootstrap:
twitter 開源
簡潔、大方
官網(wǎng)文檔

基于 jquery

柵格化系統(tǒng)+響應(yīng)式工具  (移動端、pad、pc)
按鈕

bower 前端包管理器 jquery#1.11.1
自動解決依賴
npm node包管理器 jquery@1.11.1

餓了么團(tuán)隊開源一個基于vue 組件庫
elementUI PC
MintUI 移動端

elementUI:
如何使用

官網(wǎng):http://element.eleme.io/

使用:

安裝 element-ui
npm i element-ui -D

npm install element-ui --save-dev

// i -> install
// D -> --save-dev
// S -> --save
引入 main.js 入口文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

全部引入
使用組件
Vue.use(ElementUI)

css-loader 引入css
字體圖標(biāo) file-loader

less:
    less
    less-loader

按需加載相應(yīng)組件: √
就需要按鈕

babel-plugin-component
cnpm install babel-plugin-component -D
.babelrc文件里面新增一個配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
想用哪個組件就用哪個
引入:
import {Button,Radio} from 'element-ui'
使用:
a). Vue.component(Button.name, Button); 個人不太喜歡
b). Vue.use(Button); √

發(fā)送請求:
vue-resourse 交互

axios

element-ui -> pc

mint-ui
移動端 ui庫

http://mint-ui.github.io/

下載
npm install mint-ui -S

-S
--save
引入
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);

按需引入:
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

http://mint-ui.github.io/docs/#!/zh-cn2

論壇:

Mint-ui-demo: 看著手冊走了一遍

https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

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

vue

vue

第一節(jié)

第二節(jié)

第三節(jié)

第四節(jié)

第五節(jié)：vue2.0

第六節(jié)

vue-cli

npm install

項目:

第七節(jié)

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

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

vue

第一節(jié)

第二節(jié)

第三節(jié)

第四節(jié)

第五節(jié)：vue2.0

第六節(jié)

vue-cli

npm install

項目:

第七節(jié)

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

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