vue視頻學習筆記

video 7

vue問題:
論壇
http://bbs.zhinengshe.com
------------------------------------------------
UI組件
別人提供好一堆東西

目的:
爲了提升開發效率
功能

原則: 拿過來直接使用

vue-cli -> vue-loader

//建立項目
vue init webpack-simple bootstrap-demo

//下載bootstrap
bower install bootrap

bootstrap:
twitter 開源
簡潔、大方
官網文檔

基於 jquery

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

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

餓了麼團隊開源一個基於vue 組件庫
elementUI PC
MintUI 移動端
--------------------------------
elementUI:
如何使用

官網:http://element.eleme.io/
使用:
1. 安裝 element-ui
npm i element-ui -D

npm install element-ui --save-dev

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

所有引入
3. 使用組件
Vue.use(ElementUI)

css-loader 引入css
字體圖標 file-loader

less:
less
less-loader
-------------------------------------------------
按需加載相應組件: √
就須要 按鈕
1. babel-plugin-component
cnpm install babel-plugin-component -D
2. .babelrc文件裏面新增一個配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3. 想用哪一個組件就用哪一個
引入:
import {Button,Radio} from 'element-ui'
使用:
a). Vue.component(Button.name, Button); 我的不太喜歡
b). Vue.use(Button); √
---------------------------------------------------
發送請求:
vue-resourse 交互

axios
---------------------------------------------------
element-ui

//使用組件調用UI
//組件加事件---有點像事件委託
<button @click="get"></button>
<mybutton @click.native="get"></mybutton>

axios --------- ajax，官方推薦
https://github.com/mzabriskie/axios

1.cnpm install axios -D
2.import axios from 'axios';

 

element-ui -> pc

mint-ui
移動端 ui庫

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

1. 下載
npm install mint-ui -S

-S
--save
2. 引入
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

//引入css使用模塊
//須要先在package.json里加載css-loader和style-loader
cnpm install style-loader css-loader -D

webpack.config.js裏添加代碼

{
test: /\.css$/,
loader: 'style!css'
},

 

 

 

 

 

 

 

 

---------------------------------------------------------------------------------------------------------------------

video 6

vue動畫
vue路由
--------------------------------------
transition 以前 屬性
<p transition="fade"></p>

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

到2.0之後 transition 組件

<transition name="fade">
運動東西(元素，屬性、路由....)
</transition>

class定義:
.fade-enter{} //初始狀態
.fade-enter-active{} //變化成什麼樣 -> 當元素出來(顯示)

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

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

多個元素運動:
<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
基本使用:
1. 佈局
<router-link to="/home">主頁</router-link>

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

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

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

//最後掛到vue上
new Vue({
router,
el:'#box'
});
3. 重定向
以前 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
------------------------------------------
路由實例方法:
router.push({path:'home'}); //直接添加一個路由,表現切換路由，本質往歷史記錄裏面添加一個
router.replace({path:'news'}) //替換路由，不會往歷史記錄裏面添加
------------------------------------------
vue-cli

//vue不是有效的內外部命令vue command not find
cnpm install -g vue-cli

//建立vue-demo項目
---vue init webpack-simple vue-demo
------------------------------------------
npm install
------------------------------------------

//修改項目爲8085端口啓動 package.json
--- "dev" :" --port 8085"
-------------------------------------------
腳手架: 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配合
//router下載
cnpm insatall vue-router --save
------------------------------------------

------------------------------------------

/////----------這裏有一個很嚴重的問題，沒法引用外部的css文件

//使用animate.css 還須要在webpack.config.js裏申明css使用
style-loader css-loader
//下載
cnpm install css-loader style-loader --save-dev

style!css
------------------------------------------
局部組件使用css
<style scoped>
li{border: 1px solid red;}
</style>

-----------這裏仍是有問題，一直說沒有發現引用的css模塊..

------------------------------------------
項目:
------------------------------------------

 

 

 

 ---------------------------------------------------------------------------------------------------------------------

video 5

vue2.0:
bower info vue

http://vuejs.org/
到了2.0之後，有哪些變化?

1. 在每一個組件模板，不在支持片斷代碼
組件中模板:
以前:
<template>
<h3>我是組件</h3><strong>我是加粗標籤</strong>
</template>
如今: 必須有根元素，包裹住全部的代碼
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標籤</strong>
</div>
</template>
2. 關於組件定義
Vue.extend 這種方式，在2.0裏面有，可是有一些改動，這種寫法，即便能用，咱也不用——廢棄

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

2.0推出一個組件，簡潔定義方式：
var Home={
template:'' -> Vue.extend()
};
3. 生命週期
以前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
如今:
beforeCreate 組件實例剛剛被建立,屬性都沒有
created 實例已經建立完成，屬性已經綁定
beforeMount 模板編譯以前
mounted 模板編譯以後，代替以前ready *
beforeUpdate 組件更新以前
updated 組件更新完畢 *
beforeDestroy 組件銷燬前
destroyed 組件銷燬後
3. 循環
2.0裏面默認就能夠添加劇複數據

arr.forEach(function(item,index){

});

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

以前:
v-for="(index,val) in array"
如今:
v-for="(val,index) in array"

4. track-by="id"
變成
<li v-for="(val,index) in list" :key="index">
5. 自定義鍵盤指令
以前：Vue.directive('on').keyCodes.f1=17;
//這個好像也改了
如今: Vue.config.keyCodes.ctrl=17

6. 過濾器
以前:
系統就自帶不少過濾
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些簡單功能，本身經過js實現

到了2.0， 內置過濾器，所有刪除了

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

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

以前: {{msg | toDou '12' '5'}}
如今: {{msg | toDou('12','5')}}
------------------------------------------------------
組件通訊:
vm.$emit()
vm.$on();

父組件和子組件:

子組件想要拿到父組件數據:
經過 props

以前，子組件能夠更改父組件信息，能夠是同步 sync
如今，不容許直接給父級的數據，作賦值操做

問題，就想更改：
a). 父組件每次傳一個對象給子組件, 對象之間引用 √
b). 只是不報錯, mounted中轉
------------------------------------------------------
能夠單一事件管理組件通訊: vuex
var Event=new Vue();

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

Event.$on(事件名稱,function(data){
//data
}.bind(this));
------------------------------------------------------
debounce 廢棄
-> lodash
_.debounce(fn,時間)
------------------------------------------------------

 

 

 

 

---------------------------------------------------------------------------------------------------------------------

video 4

手動配置本身:
webpack+vue-loader

webpack加載模塊
-------------------------------------
如何運行此項目？
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 結尾，以後稱呼組件
----------------------------------------
路由:
vue-router

-> 如何查看版本:
bower info vue-router

路由使用版本: 0.7.13
配合vue-loader使用:
1. 下載vue-router模塊
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'

3. Vue.use(VueRouter);

4. 配置路由
var router=new VueRouter();
router.map({
路由規則
})
5. 開啓
router.start(App,'#app');

注意:
以前: index.html -> <app></app>
如今: index.html -> <div id="app"></div>

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

home news
---------------------------------------------
路由嵌套:
和以前如出一轍
--------------------------------------------
上線:
npm run build
-> webpack -p
--------------------------------------------
腳手架:
vue-cli——vue腳手架
幫你提供好基本項目結構

自己集成不少項目模板:
simple 我的以爲一點用都沒有
webpack 可使用(大型項目)
Eslint 檢查代碼規範，
單元測試
webpack-simple 我的推薦使用, 沒有代碼檢查 √

browserify -> 本身看
browserify-simple

--------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安裝 vue命令環境
驗證安裝ok?
vue --version
2. 生成項目模板
vue init <模板名> 本地文件夾名稱
3. 進入到生成目錄裏面
cd xxx
npm install
4. npm run dev
--------------------------------------------

 

 

 

 

 

 

 

---------------------------------------------------------------------------------------------------------------------

video 3

git page：
任何倉庫 master分支，均可以發佈(git page)
-------------------------------------
雙向過濾器:
Vue.filter(name,{
read:
write:
});
-------------------------------------
1.0
2.0
-------------------------------------
引入 vue.js
-------------------------------------
bower-> （前端）包管理器
npm install bower -g
驗證: bower --version

bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息

<script src="bower_components/vue/dist/vue.js"></script>
-------------------------------------
vue-> 過渡(動畫)
本質走的css3: transtion ,animation

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

動畫:
.fade-transition{

}
進入：
.fade-enter{
opacity: 0;
}
離開：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
----------------------------------------
vue組件:
組件: 一個大對象
定義一個組件:
1. 全局組件
var Aaa=Vue.extend({
template:'<h3>我是標題3</h3>'
});

Vue.component('aaa',Aaa);

*組件裏面放數據:
data必須是函數的形式，函數必須返回一個對象(json)
2. 局部組件
放到某個組件內部
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>標題2</h2>'
}
}
});
-----------------------------------
配合模板:
1. template:'<h2 @click="change">標題2->{{msg}}</h2>'

2. 單獨放到某個地方
a). <script type="x-template" id="aaa">
<h2 @click="change">標題2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>標題1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
-----------------------------------
動態組件:
<component :is="組件名稱"></component>
--------------------------------------------
vue-devtools -> 調試工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
--------------------------------------------
vue默認狀況下，子組件也無法訪問父組件數據

--------------------------------------------
組件數據傳遞: √
1. 子組件就想獲取父組件data
在調用子組件：
<bbb :m="數據"></bbb>

子組件以內:
props:['m','myMsg']

props:{
'm':String,
'myMsg':Number
}
2. 父級獲取子級數據
*子組件把本身的數據，發送到父級

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

v-on: @
--------------------------------------------
vm.$dispatch(事件名,數據) 子級向父級發送數據
vm.$broadcast(事件名,數據) 父級向子級廣播數據
配合: event:{}

在vue2.0裏面已經，報廢了
--------------------------------------------
slot:
位置、槽口
做用: 佔個位置

相似ng裏面 transclude （指令）
--------------------------------------------
vue-> SPA應用，單頁面應用
vue-resouce 交互
vue-router 路由

根據不一樣url地址，出現不一樣效果

咱上課: 0.7.13

主頁 home
新聞頁 news

html:
<a v-link="{path:'/home'}">主頁</a> 跳轉連接

展現內容:
<router-view></router-view>
js:
//1. 準備一個根組件
var App=Vue.extend();

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

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

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

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

//5. 啓動路由
router.start(App,'#box');

跳轉:
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}} -> 當前參數

{{$route.path}} -> 當前路徑

{{$route.query | json}} -> 數據
--------------------------------------------
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>
-------------------------------------
簡單的目錄結構:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推薦命名法
|-package.json 工程文件(項目依賴、名稱、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件

ES6: 模塊化開發
導出模塊：
export default {}
引入模塊:
import 模塊名 from 地址
--------------------------------------------
webpak準備工做:
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

最最核心：

 ---------------------------------------------------------------------------------------------------------------------

video 2

vue製做weibo
交互

vue-> 1.0
vue-resource ajax php
服務器環境(node)

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

this.$http({
url:地址
data:給後臺提交數據,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
----------------------------------
vue事件:
@click=""
數據:

添加一條留言：

獲取某一頁數據:
getPageData(1);
----------------------------------
vue生命週期:
鉤子函數:

created -> 實例已經建立 √
beforeCompile -> 編譯以前
compiled -> 編譯以後
ready -> 插入到文檔中 √

beforeDestroy -> 銷燬以前
destroyed -> 銷燬以後
----------------------------------
用戶會看到花括號標記:

v-cloak 防止閃爍, 比較大段落
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
ng: $scope.$watch

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

* computed裏面能夠放置一些業務邏輯代碼，必定記得return
---------------------------------
vue實例簡單方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛在vue程序

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

vm.$log(); -> 查看如今數據的狀態
---------------------------------
循環：
v-for="value in data"

會有重複數據？
track-by='索引' 提升循環性能

track-by='$index/uid'
---------------------------------
過濾器:
vue提供過濾器:
capitalize uppercase currency....

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

filterBy 過濾數據
filterBy ‘誰’

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

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

});

時間轉化器
過濾html標記

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

數據 -> 視圖
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 擴展html語法

自定義指令:
屬性:

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

<div v-red="參數"></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;
------------------------------------------------
監聽數據變化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //淺度
vm.$watch(name,fnCb,{deep:true}); //深度監視
------------------------------------------------
vue組件:
組件間各類通訊
slot
vue-loader webpack .vue
vue-router

 

---------------------------------------------------------------------------------------------------------------------

video 1

vue:
讀音: v-u-e
view

vue究竟是什麼?
一個mvvm框架(庫)、和angular相似
比較容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官網:http://cn.vuejs.org/
手冊： http://cn.vuejs.org/api/

vue和angular區別?
vue——簡單、易學
指令以 v-xxx
一片html代碼配合上json，在new出來vue實例
我的維護項目

適合: 移動端項目,小巧

vue的發展勢頭很猛，github上start數量已經超越angular
angular——上手難
指令以 ng-xxx
全部屬性和方法都掛到$scope身上
angular由google維護

合適: pc端項目

共同點: 不兼容低版本IE
-------------------------------------------
vue基本雛形:
angular展現一條基本數據:
var app=angular.module('app',[]);

app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})

html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>

var c=new Vue({
el:'#box', //選擇器 class tagName
data:{
msg:'welcome vue'
}
});
經常使用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

$scope.show=function(){}
指令: 擴展html標籤功能,屬性

v-model 通常表單元素(input) 雙向數據綁定

循環:
v-for="name in arr"
{{$index}}

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

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

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

new Vue({
el:'#box',
data:{ //數據
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同樣
只須要給標籤 賦予class，角色
依賴jquery

確認刪除？和確認刪除所有麼?
-----------------------------------------
事件:
v-on:click/mouseover......

簡寫的:
@click="" 推薦

事件對象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推薦
默認行爲(默認事件):
阻止默認行爲:
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=""> 效果能夠出來，不會發404請求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]" red是數據
:class="[red,b,c,d]"

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

:class="json"

data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 複合樣式，採用駝峯命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 數據更新模板變化
{{*msg}} 數據只綁定一次

{{{msg}}} HTML轉意輸出
-----------------------------------------
過濾器:-> 過濾模板數據
系統提供一些過濾器:

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

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

currency 錢

{{msg| filterA 參數}}

....
-----------------------------------------
交互:
$http （ajax）

若是vue想作交互

引入: vue-resouce

get:
獲取一個普通文本數據:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
給服務發送數據:√
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.360.cn/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名字，默認名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

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

做業: 1. 簡易留言-> 確認刪除? 確認刪除所有 2. 用vue get 寫個例子 weibo