vue2.0学习笔记一

最新推荐文章于 2022-05-10 09:12:57 发布

原创最新推荐文章于 2022-05-10 09:12:57 发布 · 287 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

19 篇文章

订阅专栏

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

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

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

现代式的单页面

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