從零開始學習Vue.js，學習筆記

時間 2019-11-10

原文原文鏈接

1、爲何學習vue.jsphp

methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
vue.js兼具angular.js和react的優勢，而且剔除了他們的缺點
官網：http://cn.vuejs.org/
手冊：http://cn.vuejs.org/v2/api/css

2、vue.js是什麼html

Vue是一個"MVVM框架（庫）"，和angular相似，相比angular小巧，比較容易上手
Vue是一個構建用戶界面點的漸進式框架，與其餘重量級框架不一樣的是，vue採用自底向上增量開發的設計
vue的核心庫"只關注視圖層"，而且"很是容易學習"，很是容易與其餘庫或者已有的項目整合，另外一方面，vue徹底有能力驅動採用單文件組件和vue生態系統支持的庫開發的複雜單頁面應用
vue的目標是經過儘量簡單的API實現"響應的數據綁定"和"組合的視圖組件"vue

3、MVC/MVP/MVVM的區別react

複雜的軟件必須有清晰合理的架構，不然沒法開發和維護
MVC、MVP和MVVM否是用來解決"界面呈現"和"邏輯代碼分離"而出現的模式
通俗的講：就是方便大多數人開發和維護出現的代碼分離模式
課外拓展：http://www.cnblogs.com/lori/p/3501764.htmljquery

4、MVCios

視圖（view）:用戶界面
控制器（controller）：業務邏輯
模型（Model）:數據處理git

5、MVPangularjs

MVP 是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數據，View負責顯示。做爲一種新的模式，MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通訊是經過Presenter (MVC中的Controller)來進行的，全部的交互都發生在Presenter內部，而在MVC中View會從直接Model中讀取數據而不是經過 Controller。github

6、MVVM

MVVM在概念上是真正將頁面與數據邏輯分離的模式，在開發方式上，它是真正將前臺代碼開發者（JS+HTML）與後臺代碼開發者分離的模式（asp,asp.net,php,jsp）
雙向綁定：view的變更，自動反映在viewModel,反之亦然

7、vue對比其餘框架

一、vue-angular

1）、vue在設計之初參考了不少angular的思想
2）、vue相比於angular來講更加的簡單
3)、vue至關於angular要變得小巧不少，運行速度比angular快
4）、vue和angular綁定均可以用{{}}
5）、vue指令用v-xxx，angular用ng-xxx
6）、vue中數據放在data對象裏面，angular數據綁定在$scope上面
7）、vue有組件化概念，angular中沒有

二、vue-react
　　他們都有：

1）、react和vue都是用虛擬DOM Virtual DOM
2)、React和Vue都提供了響應式（Reactive）和組件化（Componsable）的視圖組件
3）、React和vue都將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫
4）、React使用JSX渲染頁面，Vue使用簡單的模板
5）、Vue比react運行更快

8、初始vuejs

1）、下載vuejs的生產版本
下載地址：http://cn.vuejs.org/v2/guide/installation.html
2）、實例化一個Vue對象
var vm = new Vue({
// 選項
})
3)、在頁面中div#box
4)、修改配置選項
var vw = new Vue({
el:"#box",//選擇元素
data:{//定義數據
msg:"這裏是Vue",
name："vue"
}
})
5)、循環數據：傳入數組，對象，使用v-for來進行循環遍歷數據
list:[1,2,4]
<li v-for="item in list">{{item}}</li>
list1:[{
name:"張三",
age:30
},
{
name:"李四",
age:30
},{
name:"王五",
age:30
}]
<li v-for="item in list1">
{{item.name}}/{{item.age}}
</li>
6）、方法事件
全部的方法都配置於methods選項中
methods:{//放置方法，訪問data中的數據，能夠直接使用this訪問，執行經過v-on來訪問,也可使用簡寫的形式@click來執行方法
getName:function(){
alert(this.name)
},
run:function(){
alert("這是run方法");
}
}
<div v-on:click="getName()">執行getName方法</div>
<br />
<div @click="run()">執行run方法</div>
7）、雙向的數據綁定
<input type="text" v-model="name" />
{{name}}
8)、使用jquery實現todolist
a)引入bootstrap
b)綁定事件
添加數據使用append
刪除事件使用remove
9）、使用vue實現todolist
a)引入bootstrap.css,編輯界面
b)實例化vue.js
data:{
info:""//輸入框的值
list:[]//數據列表，循環數據使用v-for，由於須要涉及到刪除功能，因此須要遍歷的時候將索引值也傳遞進去(item,key) in list
}，
methods:{
addData:function(){//能夠傳值
this.list.push(this.info)
console.log(this.info)
},
deleteData:function(key){
this.list.splice(key,1)
}
}
<tr v-for="(item,key) in list">
<td>{{item}}</td>
<td><button type="button" class="btn btn-danger " @click="deleteData(key)">刪除</button></td>
</tr>

9、下午

1）文本綁定
v-text指令
<span v-text="name"></span> 至關於angularjs中的ng-bind
給data中添加：test:"<strong>你會解析嗎</strong>",
若是使用{{test}}則會直接顯示出全部的代碼，不會解析
若是使用<span v-text="test"></span> 則會直接顯示出全部的代碼，不會解析
咱們可使用v-html來解析代碼
<span v-html="test"></span>
2）綁定屬性
data中添加一個id:"這是一個id"
<div v-bind:id="id">添加屬性</div>
這裏須要注意不要加{{}} 跟angular中的ng-src等屬性同樣
簡寫形式
<div :id="id">添加屬性</div>

url:"https://www.baidu.com/img/bd_logo1.png"
<img :src="url"/>
3）事件
複習上午學習的todolist
事件對象,注意將$event傳入方法中
<button data-id="1638" data-user="wxx" @click="requestData($event)">事件對象</button>
requestData:function(event){
console.log(event)
}
數據在srcElement中的dataset中
4）表達式

data:{number:200}
{{number+200}}
data:{ok:true}
{{ok:"是"："否"}}
data:{msg:"倒序輸出該字段"}
{{msg.split("").reverse().join("")}}

5)、計算屬性--輸入提示---autocomplete(表單屬性)

computed:{
c:function(){
return this.a + 6;
},
reverseMsg:function(){
return this.message.split("").reverse().join("");
}
}
c={{c}}
<br />
msg={{reverseMsg}}

注意，當message改變以後，會從新計算而且改變視圖，寫一個按鈕來執行改變message爲"改變了message"

案例
data中
search:"",
searchList:["appale","pear","banner","orange"],
cumputed

添加計算屬性

listSearch:function(){
var arr = [];
var that = this;
this.searchList.forEach(function(val){
if(val.indexOf(that.search)!=-1){
arr.push(val);
}
})
return arr;
}

更改循環條件爲
<p v-for="item in listSearch">{{item}}</p>

6）監聽數據變化 watch
// vm.$watch(vm) vm.msg 拿到 vue上面data綁定的數據
/*注意監聽文本框改變的時候這裏直接寫data上面綁定的值*/

<input type="text" v-model='msg'>
data:{
msg:'我是一個數據'
}

vm.$watch('msg',function(newValue,oldValue){

console.log(newValue+'-------'+oldValue);

})

第二種寫法

data:{
msg:'我是一個數據'
},
watch:{

msg:function(newValue,oldValue){

console.log(newValue+'-------'+oldValue);
}
}

7）計算屬性和方法的對比
案例：翻轉字符串----屢次調用
//計算屬性只有在它的相關依賴發生改變時纔會從新取值。這就意味着只要 message 沒有發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。
//總結:計算屬性比方法的效率更高
8）計算屬性和watch對比
Vue.js 提供了一個方法 $watch ，它用於觀察 Vue 實例上的數據變更。當一些數據須要根據其它數據變化時， $watch 很誘人 —— 特別是若是你來自 AngularJS 。不過，一般更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。思考下面例子：

<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{fullName}}
watch: {
firstName:function(val){
this.fullName=val+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+val;
}
}

9）計算屬性實現

computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
10）class語法
.static{
width: 200px;
height: 200px;
}
.class-a{
width: 200px;
height: 200px;
background: orange;
}
.class-b{
background: blue;
}
<div class="static" :class="{ 'class-a': isA, 'class-b': isB }">
v-bind-class111
</div>
<br>
<div :class="classObject">classObject</div>
// 能夠傳給 v-bind:class 一個對象，以動態地切換class。注意 v-bind:class 指令能夠與普通的 class 特性共存。
var vm = new Vue({
el: '#demo', //div .class
data: {
isA: true,
isB: false,
classObject: {
active: true,
'class-a': true
}

}
})
11)style語法
//v-bind:style的對象語法十分直觀——看着很是像 CSS，其實它是一個JavaScript對象。CSS屬性名能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 對象語法</div>
data: {
activeColor: 'red',
fontSize: 30
}

12）style數組

<div v-bind:style="[styleObjectA, styleObjectB]">Style 數組語法</div>
data: {
styleObjectA: {
color: 'red'
},
styleObjectB: {
fontSize: '30px'
}
}
13）v-if---dom操做
v-else
v-show--顯示隱藏
<h1 v-if="ok">這是一個h1</h1>
<h1 v-show="ok">這是一個h1</h1>
<div v-if="Math.random()>0.5">
大於0.5
</div>
<div v-else>
小於0.5
</div>
data: {
ok:true
}

1四、循環的使用
　　多層循環
　　可使用in 也可使用of
1五、過濾器

Vue.filter('reverseMsg',function(value){
return value.split('').reverse().join('');
});
Vue.filter('toDou',function(value,n1,n2){
console.log(value+'--'+n1+'--'+n2);
if(n1>n2){
return 123;
}else{
return 456;
}
})
data:{
msg:'我是代碼搬磚工',
num:'123'
}
{{msg}}
{{msg | reverseMsg}}
{{num}}
{{num | toDou(12,14)}}
16）、ajax請求
axios：http://blog.csdn.net/liaoxiaojuan233/article/details/54176798
fetch：https://segmentfault.com/a/1190000003810652
// 1. 應用fetch或axios 獲取數據
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(url)
.then(function (response) {
console.log(response.data.result);

_that.list=response.data.result;
})
.catch(function (error) {
console.log(error);
});
//2. https://github.com/pagekit/vue-resource
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
//第二個參數若是返回數據爲callback時能夠不設置
this.$http.jsonp(api,{
jsonp:'cb'//若是接口爲不爲callback,爲cb時，修改此參數，例如https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php
}).then(function(data){
console.log(data.body);
that.list=data.body.s;
},function(){
})