vue2.0学习笔记一

1.单页面应用程序（single page application）简称SPA.

•  网站交互式方式经典的多页面 

1. 例如：京东商城，唯品会  
2. 前后端揉合在一起，开发和维护效率低，
3. 用户体验一般，点击刷新跳转，等待时间长，
4. 每个页面都需要重新加载渲染，速度慢，
5. 有利于SEO搜索引擎搜索（蜘蛛会爬链接）

• 现代式的单页面

1. 例如：网易云音乐，coding
2. 开发方式好，前后端分离，开发效率高，可维护好（服务器不关心页面，只关系数据，客户端不关心数据及数据操             作，只关心通过接口拿数据和服务器交互，处理页面）
3. 用户体验好，像原生的客户端软件一样使用，
4. 只需要加载渲染局部视图即可，不需要整页刷新，
5.  单页面应用开发技术复杂，所以诞生了一堆的开发框架（ng,react,vue），
6.  应用技术.目前单页面技术已经很成熟了，但是都无法兼顾低版本浏览器,
7.  现在除了一些电商网站（需要盈利），其实已经很少有系统需要去兼容低版本的浏览器，大部分都ie9以上，
8.  单页面由于数据都是异步加载过来的，所以不会被搜索引擎搜索到，不利于SEO，
9.   vue不兼容ie8，适合做一些手机web网页 ，管理系统

•  多页面：以服务器端为主导，前后端混合（php案例，.php文件）
• 单页面：前后端分离，各司其职（服务端之处理数据，前端之处理页面，两者通过接口来交互）

1.2. 前后端分离开发模式

• 项目立项 
• 项目需求分析
•  服务端的工作

                1.需求分析

                 2.设计数据库

                 3.接口设计（有时需要前端参与）

                 4.接口开发  

• 前端的工作

                   1.需求分析

                    2.写页面

                    3.页面完成后完成功能

                     4.通过接口和服务端进行交互 

     

          ***前后端分离 ：多页面

          ***前后端分离：单页面

         vue.小例子1  

< div id= "app" >

< label for= "price" >商品价格 </ label >

< input type= "number" v-model= "price" />< br />

< label >商品数量 </ label >

< button v-on:click= "reduce()" >- </ button >

< span >{{num}} </ span >

< button v-on:click= "addNum()" >+ </ button >

< div >总价： < strong >{{price * num}} </ strong </ div >

< hr/ >

< div >

< label >计算器： </ label >

< input type= "number" v-model= "firstNum" />

< label >

< select v-model= "calFu" >

< option value= "+" >+ </ option >

< option value= "-" >- </ option >

< option value= "*" >* </ option >

< option value= "/" >/ </ option >

</ select >

</ label >

< input type= "number" v-model= "secondNum" />

< button v-on:click= "calNum()" >= </ button >

< input type= "number" v-model= "endNum" />

</ div >

</ div >

< script >

new Vue({

el: "#app",

data:{

price: 0,

num: 5,

calFu: '-',

firstNum: 5,

secondNum: 5,

endNum: 0,

},

methods:{

//此处不能是箭头函数，要是箭头函数this，就指向了windows

addNum: function(){

this. num++

},

reduce(){ //此结构只是纯粹的一种简写reduce:function(){}

console. log( this. num)

if( this. num<= 0){

this. num = 0;

} else{

this. num--;

}

} ,

calNum: function(){

if( this. calFu== "+"){

this. endNum = parseInt( this. firstNum)+ parseInt( this. secondNum);

} else if( this. calFu== "-"){

this. endNum = parseInt( this. firstNum)- parseInt( this. secondNum);

} else if( this. calFu== "*"){

this. endNum = parseInt( this. firstNum)* parseInt( this. secondNum);

} else if( this. calFu== "/"){

if( this. secondNum!= 0){

this. endNum = parseInt( this. firstNum) / parseInt( this. secondNum);

} else{

alert( "分母不能为0")

}

}

}

}

})

< / script >

例子2

< style >

.done{

text-decoration: line-through;

color: #ccc;

}

< / style >

< body >

< div id= "app" >

< div >

< p v-for= "item in todoList" >

< input type= "checkbox" v-model= "item.done" />

< label v-bind:class= "{done:item.done}" >{{item.title}} </ label >

</ p >

<!--

v-bind 可以动态绑定元素属性v-bind:class="{done:item.done}"

class 给一个对象：对于的key就是类名，对象的value就是布尔值

当布尔值为true时，样式

-->

</ div >

< div >

< input type= "text" v-model= "textValue" @ keydown. enter = "addList()" />

< button @ click= "addList()" >add </ button >

</ div >

</ div >

< script >

const todoList = [ //视图中不能直接循环此处的todoList

{

id: '1',

title: '聚餐',

done: true

},

{

id: '2',

title: '爬山',

done: false

},

{

id: '1',

title: '购物',

done: false

},

]

new Vue({

el: "#app",

data:{

todoList:todoList,

textValue: ''

},

methods:{

addList(){

const textValue = this. textValue. trim(); //此处只能去掉首位的空格

if(! textValue. length){ //当输入的是多个空格时需要对输入内容进行判断

return ;

}

this. todoList. push({

id: this. todoList[ this. todoList. length- 1]. id+ 1, //记住操作data中的数据时this别掉了

title:textValue,

done: false

})

}

}

})

< / script >

</ body >

       1.2. mvvm