精华内容
下载资源
问答
  • vue基础经典案例.zip

    2019-10-21 11:11:32
    黑马程序员vue阶段企业实战开发项目,从基础到入门vue必做项目
  • 让标签的文字 取自 vue 对象 data 里的msg 写个方法放到vue 对象 methods 里, 让第一个字符 拼接到 后边 button 绑定上边的方法 把上边的方法用 setInterval 方法进行迭代 ,并把返回值保存在data 里(status) 取...

    跑马灯 就是文字 不停的 循环显示, 显示效果如下:

    在这里插入图片描述
    思路如下:

    1. 创建 两个button ,一个显示文字的标签
    2. 让标签的文字 取自 vue 对象 data 里的msg
    3. 写个方法放到vue 对象 methods 里, 让第一个字符 拼接到 后边
    4. button 绑定上边的方法
    5. 把上边的方法用 setInterval 方法进行迭代 ,并把返回值保存在data 里(status)
    6. 取到data 里 setInterval 的值 , 写个关闭方法。
    7. 解决 不停点击 ,也生效的问题,
      默认status 为null, 写个判断 当为null 的时候继续, 不为null 直接阻断
      ,如果关闭 也设置status 为null

    直接上代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        </style>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
        </script>
    </head>
    <body>
    <div id="pp">
    
        <input type="button" value= "Start" v-on:click="show" >
        <input type="button" value="Close" v-on:click="close">
        <h1>{{msg}}</h1>
    
    </div>
    <div>
        <script>
            var vue=new  Vue(
                {
                    el:'#pp',
                    data:{
                        msg: '开始浪起来,浪一个浪~~',
                        status:null,
    
                    },
                    methods:{
    
    
                        show: function (){
                        if (this.status  != null){return;}
                         this.status=  setInterval(()=>{
    
                           var start_string=this.msg.substring(0,1);
                           var end_string=this.msg.substring(1);
                           this.msg=end_string+start_string;
                           console.log(this.msg)
    
                            },500)
    
                        },
                        close: function(){
    
                        clearInterval(this.status);
                        this.status=null
    
    
                        }
                    }
                }
            )
        </script>
    
    </div>
    </body>
    </html>
    
    
    展开全文
  • vue的todolistDemo经典案例

    千次阅读 2019-09-05 16:21:14
    1、用vue脚手架工具生成myproject项目 2、用webstorm软件来open打开 3、这里的/src目录下有App.vue和main.js 这里app是入口,app加载的helloworld.vue组件 4、现在我们直接从App.vue做文档 粘贴一下实现代码 ...

    1、用vue脚手架工具生成myproject项目

    2、用webstorm软件来open打开

    3、这里的/src目录下有App.vue和main.js

    这里app是入口,app加载的helloworld.vue组件

    4、现在我们直接从App.vue做文档

    粘贴一下实现代码

    App.vue

    <template>
      <div id="app">
        <h1>{{title}}</h1>
        <input v-model="newItem" v-on:keyup.enter="addNewItem"/>
        <ul>
          <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
            {{item.label}}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    
      import store from './store'
    
      export default {
        data() {
          return {
            title: 'todo list',
            items:store.fetch(),
            newItem: '',
          }
        },
    
    
    
    
    
        methods: {
          toggleFinish: function (item) {
            item.isFinished = !item.isFinished
          },
          addNewItem: function () {
            //添加數組
            this.items.push({
              label: this.newItem, isFinished: false
            }),
              this.newItem = ''
          }
        },
        watch:{
          //监听items
          items:{
            handler:function (items) {
              store.save(items)
            },
            deep:true
          }
        },
    
      }
    </script>
    
    <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
    
      .finished {
        text-decoration: underline;
      }
    </style>
    

    说明一下,具体就是有一个点击事件来转换class,实现下划线的样式改变用到的指令是

    v-on:click="toggleFinish(item)

    第二个就是通过watch监听items数组来实现localstorage的存取,实现了f5重新刷新页面是,list数组仍然存在

    这里的两个方法是fetch和save

    代码如下:

    store.js

    const STORAGE_KEY = 'todos-vuejs'
    //这里的常量可以随意定义,其实就是localstorage的key,val是一个[]数组
    export default {
      fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
        //第一次页面加载数组里面是空返回[],注意一定是windos,不是Windos,ws也不报错,一定要小心
      },
      save(items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
      }
    
    }
    

    然后在App.vue中improt store.js

    import store from './store'
    

    然后就可以直接调用了

    store.fetch(), ws有提醒哟

    5、最后总结一哈

    这里我们使用到几个vue的常用指令和localstoeage的使用以及es6的简单调用组件,dotolist这个经典案例是vue官网的一个简单明了的案例,下一篇更加详细的说组件的使用以及组件的参数传递调用,刚接触的时候类比于iframe子父页面的传参交互,/狗头

    展开全文
  • vue系列之flex经典案例

    2019-10-07 02:42:30
    案例分析: 1、中间文字居中 2、文字俩边有横线 横线无法固定宽度,因为在大屏手机上,容易出现Bug,宽度不够,俩边会出现大量空隙 解决办法,使用flex布局(网站链接) 代码: <div class="title"> <...

     

    案例分析:

    1、中间文字居中

    2、文字俩边有横线

    横线无法固定宽度,因为在大屏手机上,容易出现Bug,宽度不够,俩边会出现大量空隙

    解决办法,使用flex布局(网站链接

    代码:

    <div class="title">
    <div class="line"></div>
    <div class="text">优惠信息</div>
    <div class="line"></div>
    </div>

    .title
    display: flex
    width: 80%
    margin: 30px auto 24px auto
    .line
    flex: 1
    position: relative
    top: -6px
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    .text
    padding: 0 12px
    font-size: 14px

    不用担心flex布局的兼容性,因为vue-loader在编译vue文件的时候使用了Postcss的工具,它会给有兼容性问题的属性添加兼容性代码,它是根据can i use (http://caniuse.com/)官网去写代码

       写在<style></style>内才会生效。在html中添加style属性是不会添加兼容性代码的

    转载于:https://www.cnblogs.com/zhaobao1830/p/6429390.html

    展开全文
  • 我们都知道学习vue经典最有代表性的demo就是购物车。今天终于静下心来和大家分享一下自己写的一个购物车的案例。 1.实现效果图如下所示 页面很简单,所有的功能列和展示都是放在一个简单的tabl...

      前段时间听说一段这样这样的话,如何你要快速在一个行业里习得工作的本领,那你的先掌握该领域最核心的20%的技能,根据二八定理,掌握这20%的技能知识你将可以解决该领域80%的问题。

    我们都知道学习vue最经典最有代表性的demo就是购物车。今天终于静下心来和大家分享一下自己写的一个购物车的案例。

    1.实现效果图如下所示

    页面很简单,所有的功能列和展示都是放在一个简单的table里面

    2.功能需求

    a.商品数量列里面点击加减实现商品数量的加减,或者在输入框中直接输入的时候,金额和总金额也发生改变,

    b.点击复选框选项实现单选 点击全选实现全选,点击取消全选实现取消全选,总金额也发生改变

    c.点击删除实现删除功能,总金额也发生改变

    3.整理代码如下

    <template>
      <div id="app">
        <router-view></router-view>
        <table border="1" width="100%" cellspacing="0" height="200px">
          <tr>
            <th ></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>金额</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in cartlist" :key="item.id">
            <td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td>
            <td>{{item.title}}</td>
            <td>{{item.price| rounding}}</td>
            <td><button @click="changeNumber(item,false)">-</button><input type="text" :value="item.number" @change="change1($event,item)"><button @click="changeNumber(item,true)">+</button></td>
            <td>{{item.price*item.number|rounding}}</td>
            <td><el-button @click="deleteList(index)">删除</el-button></td>
          </tr>
           <tr>
            <td><button @click="chooseAll(cartlist,true)">全选</button></td>
            <td><button @click="chooseAll(cartlist,false)">取消全选</button></td>
            <td>总金额</td>
            <td></td>
            <td>{{total|rounding}}</td>
            <td><el-button @click="goPage">跳转1</el-button> <router-link to="/test"><el-button>跳转2</el-button></router-link></td>
            
          </tr>
        </table>
    
    
      
      </div>
    </template>
    <script>
    
    export default {
      name: 'App',
     data(){
        return{
            cartlist:[],
            flag:false,
            total:0,
            isShow:false
          
        }
        },
        components:{
          
        },
        mounted(){
            this.getGoodsList()
        },
      compute:{
        total(){
          
        }
      },
      filters: {
        rounding (value) {
        return parseInt(value).toFixed(2)
        }
      },
      methods:{
          getGoodsList(){
              this.$http.post("/posts4").then(res => {
              console.log(res.data.posts);
              let cartlist1 =res.data.posts
              this.cartlist= cartlist1
              })
          },
          change1(e,item){
            item.number=e.target.value
          },
          changeNumber(data,flag){
              if(flag==true){
               data.number+=1;
                this.computemoney()
              }else{
                data.number-=1
                 this.computemoney()
                if(data.number<1){
                  data.number=1
                }
              }
          },
          dainji(item){
            if(typeof item.checked=='undefined'){
            this.$set(item,'checked',true)
            this.computemoney()
           console.log(item)
          }else{
             console.log(item)
            item.checked=!item.checked
             this.computemoney()
          }
          },
          chooseAll(data,flag){
            data.forEach(item => {
              if(flag){
                if(typeof item.checked=='undefined'){
                  this.$set(item,'checked',true)
                   this.computemoney()
                  }else{
                    if(item.checked==true){
                      return false
                    }else{
                      item.checked=true
                       this.computemoney()
                    }
                  }
                }else{
                if(typeof item.checked=='undefined'){
                    this.$set(item,'checked',false)
                 }else{
                  if(item.checked==true){
                    item.checked=false
                     this.computemoney()
                  }else{
                    return false
                  }
                }
                }
              });
          },
        computemoney(){
          this.total=0
          this.cartlist.forEach((item)=>{
            if(item.checked==true){
              this.total+=item.price*item.number
            }
            
          })
    
        },
        deleteList(number){
          console.log(number)
          // this.isShow=true
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(number)
              this.cartlist.splice(number,1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.computemoney()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        goPage(){
           this.$router.push({name:'Dialog'})
        }
    }
    }
    
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

     

    4.各个相应功能的实现源码

    a.实现+ - 金额

    页面

    <td><button @click="changeNumber(item,false)">-</button>
    <input type="text" :value="item.number" @change="change1($event,item)">
    <button @click="changeNumber(item,true)">+</button></td>
    方法
    change1(e,item){
    item.number=e.target.value
    },
    changeNumber(data,flag){
    if(flag==true){
    data.number+=1;
    this.computemoney()
    }else{
    data.number-=1
    this.computemoney()
    if(data.number<1){
    data.number=1
    }
    }
    },
    解析:由于加减两个按钮实现的都是一个业务逻辑,将item.number+或者减就可以,故而使用同一个方法通过设置flag的值分别是true or false 来在内部做判断实现数量的加减
    重点不是这一块,重点是如何实现直接修改输入框值的改变从何改变item.number从而也能实现金额的改变,这一块主要是input里面的change方法通过e.target.value获取输入框的值,item.number=e.target.value最后赋给数量
     
    b.实现单选、全选和取消全选
    页面
    <td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td>
    <td><button @click="chooseAll(cartlist,true)">全选</button></td>
    <td><button @click="chooseAll(cartlist,false)">取消全选</button></td>
    方法
    dainji(item){
            if(typeof item.checked=='undefined'){
            this.$set(item,'checked',true)
            this.computemoney()
           console.log(item)
          }else{
             console.log(item)
            item.checked=!item.checked
             this.computemoney()
          }
          },
          chooseAll(data,flag){
            data.forEach(item => {
              if(flag){
                if(typeof item.checked=='undefined'){
                  this.$set(item,'checked',true)
                   this.computemoney()
                  }else{
                    if(item.checked==true){
                      return false
                    }else{
                      item.checked=true
                       this.computemoney()
                    }
                  }
                }else{
                if(typeof item.checked=='undefined'){
                    this.$set(item,'checked',false)
                 }else{
                  if(item.checked==true){
                    item.checked=false
                     this.computemoney()
                  }else{
                    return false
                  }
                }
                }
              });
          },
        computemoney(){
          this.total=0
          this.cartlist.forEach((item)=>{
            if(item.checked==true){
              this.total+=item.price*item.number
            }
            
          })
    
        },

    解析思路:

    第一步:实现复选框单选 通过动态绑定:checked="item.checked" 实现点击被选的同时将这个被选的属性标志同时set进item对象里面,由于后台数据里面是没有是否被选中的属性的,所以当一次点击某一个复选框的时候是需要自己添加进去this.$set(item,'checked',true),这样一个操作不仅使得复选框被选,同时还往item这个对象里面插了一个属性和对应值。那么问题来了我每次点击的时候都需要插入吗,于是在设置这个值之前需要判断一下该item里面是否有这个属性,if(typeof item.checked=='undefined'){}这就是判断的代码,当我们在触发复选框的时候如果我们之前点击过往里面插过(设置过checked)我们只需要将该属性取反即可,否则就set,

     if(typeof item.checked=='undefined'){
            this.$set(item,'checked',true)
            this.computemoney()
           console.log(item)
          }else{
             console.log(item)
            item.checked=!item.checked
             this.computemoney()
          }
          },
    相信你现在可以看懂这一步的逻辑了吧!你们肯定会想我为什么要这么做呢?先不急,咋们到现在只是说了单选,还有一个全选
    第二步:实现了刚刚的功能这一步其实不难,同样我们在点击全选的时候我们要做的事情就是让每一个item.checked=true,那么我们需要做两个判断,第一层判断是否函数checked这个属性,
    第二个判断当前checked属性是否为true如果没有则将列表里遍历到的该item添加该属性,否则就直接修改
    if(typeof item.checked=='undefined'){
                  this.$set(item,'checked',true)
                   this.computemoney()
                  }else{
                    if(item.checked==true){
                      return false
                    }else{
                      item.checked=true
                       this.computemoney()
                    }
                  }
    接着就是取消全选了,业务逻辑完全一样就是需要将每一个checked设置为false即可,故而同样的处理,设置一个flag,true的时候全选,false取消全选
    chooseAll(data,flag){
            data.forEach(item => {
              if(flag){
                if(typeof item.checked=='undefined'){
                  this.$set(item,'checked',true)
                   this.computemoney()
                  }else{
                    if(item.checked==true){
                      return false
                    }else{
                      item.checked=true
                       this.computemoney()
                    }
                  }
                }else{
                if(typeof item.checked=='undefined'){
                    this.$set(item,'checked',false)
                 }else{
                  if(item.checked==true){
                    item.checked=false
                     this.computemoney()
                  }else{
                    return false
                  }
                }
                }
              });
          },
    到现在我们实现了页面的全选和取消全选功能,接着就是计算总金额了
    第三步:实现总金额 思路很简单遍历列表选择出被选中的计算并叠加
     computemoney(){
          this.total=0
          this.cartlist.forEach((item)=>{
            if(item.checked==true){
              this.total+=item.price*item.number
            }
            
          })
    
        },
    第四步 在所有被选中的item里进行
    item.price*item.number,在被选中,且数量增加的地方也调用这个方法,这个地方写的不是很好,相信你们能够有更好的实现方法。我这里就是在需要调用该方法的地方都调用了一下。


    最后一步:实现删除功能 这个很简单麻将index传进方法里面
    deleteList(number){
          console.log(number)
          // this.isShow=true
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(number)
              this.cartlist.splice(number,1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.computemoney()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        }
    this.cartlist.splice(number,1) 这是实现删除的关键核心代码。



    项目到这就已经完成啦啦啦啦,不知道屏幕前的你们是否理解了呢?如果你有更好的实现方式欢迎你们和我一起交流咋们一起成长吧!
    希望本文对你们有所帮助,点个赞再走吧,希望得到鼓励呢!

     

     
     
     

     

    转载于:https://www.cnblogs.com/bbldhf/p/11221206.html

    展开全文
  • Web前端开发经典案例vue框架开发电商项目百草味案例(一) 互联网编程行...
  • Web前端开发经典案例vue框架开发电商项目百草味案例(二) 互联网编程行...
  • 经典布局:header、aside、main。左侧固定,右侧自适应,这里我用的是flex布局 主要是考察css和vue路由 html, body { height: 100%; } * { margin: 0; padding: 0; } #app { height: 100%; overflow: hidden;...
  • vue.js经典购物车案例

    2019-12-03 20:07:39
    使用vue.js前面所学知识实现下面购物车功能 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • 此课程为第一课,学完第一课可以继续学习第二节课的内容 对要完成的案例的分析 通过脚手架创建Vue框架项目以及模块的划分 搭建python语言的Django框架的项目为前端传递所需要的数据 创建好首页,商品模块,购物车...
  • ToDoList功能 增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组, 完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除 删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice ...
  • 此课程为vue开发百草味项目的第二课,请先学习完第一课再学习第二课 把登录成功的用户信息记录到缓存中通过缓存来判断用户是否登录过 用户登录成功之后把选中的商品加入到购物车中vuex进行数据处理 在vuex仓库中对...
  • 点透经典案例vue

    2019-04-11 15:35:59
    npm i fastclick --save <template> <div id="app"> <a href="http://www.baidu.com">百度</a>...div class="box" ref="box" v-show="flag" @touchstart="toggle">.../div&...
  • Vue2.x经典后台管理系统案例讲解

    千人学习 2019-09-29 10:21:31
    【超实用课程内容】 通过对一个经典后台管理页面的创建和增删查改内容的讲解,把vuejs框架的关键知识点都穿插讲到。 包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件...
  • 4、jQuery、javascript、Vue的区别5、Vue框架构造三、Vue的使用1、Vue环境搭建2、插值表达式3、指令(Directives)1、什么是指令2、指令API1、v-cloak 解决插值闪动2、v-text 填充纯文本3、v-html :填充HTML片段4、...
  • Vue 中路由在使用的时候 嵌套 使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用。 Vue路由嵌套 先来准备一个普通的路由案例: <!DOCTYPE html> <html lang="en"> <head> <...
  • Vue学习笔记之父子组件通信以及经典案例

    千次阅读 多人点赞 2020-05-31 21:48:10
    如果需要访问跟组件里面的方法或数据,则可以用$root进行访问: 经典案例: 功能需求:通过组件,有两个数据输入,由子组件输入的数字,改变父组件的数字,反之亦然,并且两个数字成倍数相互影响。 1、在我们实现...
  • Vue2.x经典后台管理系统案例讲解 周古之,计算机专业毕业,十余年软件开发...
  • Vue+Echars+DataV数据可视化经典案例

    千次阅读 2020-09-30 15:40:23
    W3c school(Echars) 使用说明 说明 ------------------------------------------------------------------------------------------ 下面进入正题 我踩过的坑,和帮助我的地方我都写在这里: 进入vue 2.0 以后配置...
  • 经典Vue从入门到案例到源码分析教程(含资料) 张长志技术全才、擅长领域:区...
  • ToDoList功能 增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组, 完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除 删除清单: 点击删除按钮, 从清单数组删除对应的任务, spli ...
  • 本视频基于Vue2.5录制, 涵盖Vue开发所需技术: 模板、数据绑定、声明式渲染、计算属性、事件处理、过渡动画、指令、自定义Vue插件、组件化开发、组件间通信、Ajax前后台交互、Vue-Router 等. 对数据代理、模板解析、...
  • div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> var app = new Vue({ el: '#app', data: { message: '???', imgURL: '...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 240
精华内容 96
关键字:

vue经典案例

vue 订阅