Vue.JS 基础语法+案例

已于 2024-05-31 00:51:40 修改
阅读量424 收藏 7
点赞数 15
分类专栏： web开发 文章标签： vue.js 前端 javascript
于 2024-03-08 17:58:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57067025/article/details/136530976
版权

一、创建Vue实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
<script type="text/javascript"></script>
</head>
<body>

    <div id="app">     //1.创建容器
   <h1> {{ msg }} </h1>   //插值引入
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>  //2.引入包

    <script>
        //3.创建实体
        const app = new Vue({ 
            el: '#app', 
            data:{
              msg: 'hello'
            }
        })
    </script>
</body>
</html>

二、Vue的常用指令

指令总结

v-html //以html代码的形式解析传入data

v-show //以控制display：none来控制显示隐藏

v-if   //基于条件判断以创建元素节点来控制显示隐藏

v-else v-else-if //条件判断

v-on   //添加监听+提供处理逻辑  可替换为@ 

v-bind //动态设置标签属性      简写：

v-for  //循环，多次渲染整个元素

v-model //数据和视图双向数据绑定

v-bind //class 样式控制

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
    <div id="app">
    <div class="box">
        <h3>小黑的书架</h3>
       <li v-for="(item,index) in list" :key="item.id">
            <span>{{ item.name }}  </span> 
           <button v-on:click="fn(item.id)">删除</button>
       </li>    
    </div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
     
         <script>   
             const app = new Vue({
                 el: '#app',  
                 data:{
                   list:[{id:1 ,name:'《红楼梦》曹雪芹'},
                         {id:2 ,name:'《西游记》吴承恩'},
                         {id:3 ,name:'《水浒》施耐庵'},
                         {id:4 ,name:'《三国演义》罗贯中'}]
                 },
                 methods: {
                    fn(number){
                        this.list = this.list.filter(item => item.id !== number) //过滤后返回一个新数值
                        console.log(this.list.filter(item => item.id !== number))
                    }
                 }
             })
         </script>

</body>
</html>

案例：

 只是简单的书写功能要求，没有样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
    <div id="app">
    <div class="box">
        <h3>小黑记事本</h3>
        <input v-model="todoname" placeholder="输入任务" class="new-todo" />
        <button @click="add">添加</button>
        <ul>
       <li v-for="(item,index) in list" :key="item.id">
           <span @mouseover="showTip=true" @mouseleave="showTip=false">  //鼠标悬停出现按钮未优化
           <span class="index" >{{ index+1 }} </span>
           <span> {{ item.name }}   </span>
           <button v-show="showTip" @click="destory(item.id)">消除</button>
           </span>
        
        </li>
       </ul>
    </div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
     
         <script>
     
             const app = new Vue({
                 el: '#app',  
                 data:{
                    todoname:' ',
                    showTip: false,
                    list:[{id:1 ,name:'跑步'},
                         {id:2 ,name:'跳水'},
                         {id:3 ,name:'跳绳'},
                         {id:4 ,name:'游泳'}]
                 },
                 methods: {
                    destory(number){
                        this.list = this.list.filter(item => item.id !== number) //过滤后返回一个新数值
                        console.log(this.list.filter(item => item.id !== number))
                    },
                    add(){
                        console.log(this.todoname)
                        if (this.todoname.trim() === ''){
                            alert('输入')
                            return
                        }
                        this.list.unshift(
                            {
                                id: +new Date(),
                                name: this.todoname
                            })
                        this.todoname=''
                    }
                 }
             })
         </script>

</body>
</html>

计算属性

基于现有的数据，计算出来的新属性。依赖数据变化，自动重新计算。

优点：具有缓存特性，除非改变依赖，性能高。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gift</title>
<script type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>name</th>
                <th>count</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id">
                <th>{{item.name}}</th>
                <th>{{item.num}}</th>
            </tr>
        </table>
        <p>一共{{ totalcount }}个礼物</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data:{
                list:[{id:1,name:'basketball', num:1},
                      {id:2,name:'toll',num:5},
                      {id:3,name:'pen',num:6}]
            },
            computed:{
                totalcount(){
                   let total=this.list.reduce((sum,item)=>sum+item.num,0) //累加计算函数0为sum的初始值
                    return total
                }
            }
        })
    </script>
</body>
</html>

watch侦听器

  watch:{
                words(newvalue,oldvalue){
                    console.log('change',newvalue,oldvalue)
        }

 watch:{
                newgift(newvalue,oldvalue){
                  //  console.log('change',newvalue,oldvalue)
                  clearTimeout(this.timer)
                this.timer =  setTimeout(async() => {
                     this.value=oldvalue     
                  },1000)
                }      //防抖延迟

综合案例购物车

主要内容包含：1.v-for 列表展示

                         2.：class=”{active：item.isChecked}" 动态化展示

                         3. 全选反选绑定

                         4.实时监测本地化 【watch】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main" v-if="fruitList.length > 0">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">选中</div>
              <div class="th th-pic">图片</div>
              <div class="th">单价</div>
              <div class="th num-th">个数</div>
              <div class="th">小计</div>
              <div class="th">操作</div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="tbody">
            <div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active: item.isChecked}">
              <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
              <div class="td"><img :src="item.icon" alt="" /></div>
              <div class="td" >{{ item.price }}</div>
              <div class="td">
                <div class="my-input-number">
                  <button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button>
                  <span class="my-input__inner" >{{ item.num }}</span>
                  <button class="increase" @click="add(item.id)"> + </button>
                </div>
              </div> 
              <div class="td">{{item.num *item.price}}</div>
              <div class="td" @click="del(item.id)"><button>删除</button></div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" v-model="atall" />
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalprice }}</span></span>
            <!-- 结算按钮 -->
            <button class="pay">结算( {{ totalcount }} )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" v-else>🛒空空如也</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const firstlist= [
            {
              id: 1,
              icon: './img/火龙果.png',
              isChecked: true,
              num: 2,
              price: 6,
            },
          ]
      const app = new Vue({
        el: '#app',
        data: {
          // 水果列表
          fruitList:JSON.parse(localStorage.getItem('list')) || firstlist,
        },
        computed:{
           
            atall:{
              get(){
              return this.fruitList.every(item => item.isChecked)
            },
              set(value){
                this.fruitList.forEach(item => item.isChecked = value)
                
              },
            },
            totalcount(){
                return this.fruitList.reduce((sum,item)=> {
                  if(item.isChecked )
                  {
                    return sum + item.num
                  }
                  else{
                    return sum
                  }
                },0)
            },
            totalprice()
            {
              return this.fruitList.reduce((sum,item)=>{
                if(item.isChecked){
                  return sum + (item.num * item.price)
                }
                else{
                  return sum
                }
              },0)

            }
        },
        methods:{

          del(number){
            this.fruitList=this.fruitList.filter(item => item.id !== number)
          },
          sub(id){
            const fruit = this.fruitList.find(item => item.id === id )
            fruit.num --
          },
          add(id){
            const fruit=this.fruitList.find(item => item.id ===id )
            fruit.num ++
          }
        },
        watch:{
          fruitList:{
            deep:true,
            handler (newvalue){
              localStorage.setItem('list',JSON.stringify(newvalue))
            }
          }
        },
      })
    
    </script>
  </body>
</html>

ps：案例都来源黑马vue的学习，记录学习和编码的过程。

生命周期：created，mounted，update，destroy

案例数据展示

<body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" v-model.trim="name" />
            <input type="text" class="form-control" placeholder="消费价格" v-model.number="price"/>
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{item.name}}</td>
                <td :class="{red: item.price > 500}">{{item.price.toFixed(2)}}</td>
                <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
              </tr>
            
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{atall}}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      /**
       * 
       * 功能需求：
       * 1. 基本渲染
       * 2. 添加功能
       * 3. 删除功能
       * 4. 饼图渲染
       */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
          name:'',
          price:''
        },
        computed:{
          atall() {
             return this.list.reduce((sum,item) =>sum+item.price ,0)
          }
        },
        created(){
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          //   params: {
          //     creator: '小黑'
          //   }
          // })
          // this.list=res.data.data
          this.getlist()
          console.log(this.list)
        },
        mounted(){ 
          this.myChart = echarts.init(document.querySelector('#main'))
          this.myChart.setOption({
            // 大标题
            title: {
              text: '消费账单列表',
              left: 'center'
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            // 数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%', // 半径
                data: [
                  // { value: 1048, name: '球鞋' },
                  // { value: 735, name: '防晒霜' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },

        methods:{
        async  getlist(){
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: 'heizi'
            }
          })
          this.list=res.data.data

          this.myChart.setOption({
            series:[{
            data:this.list.map(item =>({value : item.price,name : item.name}))
            }]
          })
        
          },
          async add(){
            if(!this.name){
              alert('pleace write')
            }
                 const res =await axios.post('https://applet-base-api-t.itheima.net/bill',{
                   creator:'heizi',
                   name:this.name,
                   price:this.price,
                  })

                  this.getlist()
                  this.name=''
                  this.price=''
          },
          async del(id){
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            this.getlist()
          },
        }
        
      })
    </script>
  </body>

海里的月亮
关注
  • 15
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法小案例
前端爆米花
03-13 1625
本节课带着大家做个vue小案例，包含很多vue常用语法，简单实用 完成效果如下图，当在input框输入值之后，点击submit按钮，即可添加一个 li标签 <div id="app"> <!-- v-model 表示双向绑定--> <input type="text" v-model="ivalue"> <!-- @click 表示点...
Vue.js-基础语法
hxy1625309592的博客
04-24 201
1.1 v-on指令 基本特点 作用：绑定事件监听器 缩写：@ 预期：Function | Inline Statement | Object 参数：event 1.1.1 v-on的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的基本使用(监听事件)</title> </head> <body&
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
探索IT世界
05-15 643
Vue.js是一款由尤雨溪（Evan You）开发的JavaScript框架，于2014年首次发布。它是一款轻量级的MVVM（Model-View-ViewModel）框架，专注于视图层的渲染和交互。Vue.js的核心特点包括响应式数据绑定、组件化开发、虚拟DOM等。Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
Vue.js知识归纳与总结
jh15005767557的博客
12-23 1790
Vue.js 是一款流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序 (SPA)。Vue.js 提供了数据绑定、组件化、路由管理、状态管理等一系列功能，使得开发人员可以使用简单的 API 快速构建高效、可维护、易扩展的 Web 应用程序。通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。我学习了许多实用的开发技巧和最佳实践。
史上最全的vue.js源码解析最终篇（四）
qq_43237014的博客
08-29 1262
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。 一、4000~6200代码有哪些内容？： 1.invokeCreateHooks：原生事件绑定的入口 2.initAssetRegisters：创建组件、指令、过滤器 3.initGlobalAPI:初始化全局api 4.renderClass,mergeClassDat.
Vue（js框架）项目代码.zip
08-06
Vue（js框架）项目代码.zip
vue.js学习经典实例（本人总结）
12-08
基于vue.js开发，移动前端的例子，聊天窗口，消息列表，tab切换。
Vue.js快速入门+项目实战（源码）
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
史上最全的vue.js源码解析（四）
qq_43237014的博客
08-22 1427
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。 一、4000~6200代码有哪些内容？： 1.initState：初始化实例状态（initProps，initData，initComputed，initMethods，initWatch，initMixin等） 2.initAssetRegisters：创建组件、指令、过滤
Vue.js开发教程、案例与相关项目
最新发布
06-09
### Vue.js 开发教程、案例与相关项目 #### 一、Vue.js 开发教程 **1. Vue.js 入门** - **定义**: Vue.js 是一个用于构建用户界面的渐进式框架。它通过简洁的 API 实现了响应式的数据绑定和可组合的视图组件。...
vue.js+boostrap项目实践(案例详解)
10-21
这个例子旨在帮助读者理解 Vue.js 在实际项目中的应用，并为后续更复杂的 Vue.js + Bootstrap 结合奠定基础。 在项目实践中，需要具备以下知识： 1. Vue.js 基础：了解 Vue.js 的核心概念，如数据绑定（`v-bind` 和...
轻量级MVVM框架Vue.js快速上手视频教程下载
07-24
学完本系列课程后，学员将会达到学习目标：只要具有JavaScript基础的学员都能灵活运用Vue.js技术设计前端程序。 实践阶段由浅入深分为四个案例：动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue...
vue.js 2 web development projects (pdf书+代码)
05-03
Vue.js 2 Web Development Projects 是一本专为前端开发者设计的指南，旨在通过实践项目帮助读者深入理解...无论是初学者还是有经验的开发者，这本书都能提供有价值的见解和实践案例，帮助他们更好地掌握Vue.js 2框架。
vue.js.basics_vue.js_vuejs_
10-04
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、组件化开发以及高性能的特点，在现代Web开发中受到广泛欢迎。"Vue.js 2 Basics"这本书旨在帮助初学者掌握Vue.js 2的基础知识，从而能够构建交互式的单页...
Vue.js经典开源项目汇总（h5梦工厂）
飞鸿的博客
07-23 2876
Vue.js经典开源项目汇总 http://www.html5dw.com/post/5570  
Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能
java阳旭的博客
05-25 5068
前端页面通常由前端开发人员编写好，作为后端开发，只要能定位到自己需要写代码的地方，实现相应的需求即可。 完整项目我已经上传到了码云上，供大家学习参考。 vuejsdemo 定位 HTML 1、找到 Vue.js 需要接管的区域 <div class="wrapper" id="app"> <!-- 省略的代码 --> </div> 2、通过 findAll 方法查询出所有用户后，需要展示到页面中，找到页面中展示所有用户地方。通常情况下应该使用 for 循环遍历，
适合初学者练手的vue小项目（附github源码）
祈澈菇凉
01-22 9万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的...
Vue.js从入门到项目实战——实例源码（第四章）
程序员本员
10-28 1438
4.8 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
用vscode实现vue.js项目的一个完整过程
热门推荐
weikwer
07-30 11万+
1,新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端：查看 –&amp;amp;gt; 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli，在终端输入： npm install -g vue-cli 全局安装vue-cli 然后新建项目 vue init webpack projectName project...
javascript+vue.js web开发案例教程
11-09
JavaScript是一种流行的编程语言，被广泛用于网页开发。Vue.js是一个基于JavaScript的前端开发框架，它提供了一套简洁、灵活的工具，使得开发者可以更轻松地构建交互式的Web应用程序。 Vue.js具有以下特点： 1. 渐进式：Vue.js采用渐进式的设计，可以逐步引入到现有的项目中，也可以通过逐步学习来适应各种开发需求。 2. 轻量级：Vue.js的核心库只有约21KB，加载速度快，非常适合于移动端开发。 3. 组件化：Vue.js支持组件化的开发方式，开发者可以根据需要构建复用性高、可维护性好的组件，提高开发效率。 4. 响应式：Vue.js采用了响应式的设计，当数据发生变化时，对应的页面会自动更新，大大减少了处理DOM操作的工作。 5. 单文件组件：Vue.js支持单文件组件的开发方式，将HTML、CSS、JS代码封装在同一个文件中，提高了代码的可读性和可维护性。 一个使用Vue.js的Web开发案例教程可能包含以下内容： 1. 环境搭建：介绍如何安装配置开发Vue.js的环境，如Node.js和Vue CLI。 2. 基础语法：引导学习者了解Vue.js的基本语法和常用指令，如数据绑定、事件处理、条件渲染等。 3. 组件开发：讲解如何使用Vue.js构建组件，如何进行组件通信、数据传递等。 4. 路由管理：介绍Vue Router，帮助学习者构建单页应用程序，实现页面之间的切换和导航。 5. 状态管理：介绍Vuex，帮助学习者管理应用程序的状态，实现数据的集中管理和共享。 6. 前后端交互：介绍如何使用Axios等工具，与后端服务器进行数据交互。 7. 实战项目：引导学习者完成一个完整的Vue.js项目，如博客系统、电子商务网站等。 通过这样的案例教程，学习者可以逐步了解和掌握Vue.js的开发思想和技术，提高自己的Web开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值