vue 基础语法（二）

已于 2022-08-25 17:08:07 修改
阅读量236 收藏
点赞数
分类专栏： vue javascript 文章标签： 学习
于 2022-08-25 17:07:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37299479/article/details/126518183
版权

12-(掌握)插值操作-mustache语法

<body>
  <div id="app">
    <h3>{{msg}}</h3>
    <h3>{{msg}}，李银河</h3>
    <!-- mustache 里面不仅仅可以写变量，还可以写简单的表达式 -->
    <h3>{{firstName+"·"+lastName}}</h3>
    <h3>{{firstName}} {{lastName}}</h3>
    <h4>{{counter*2}}</h4>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * 插值操作
     * 1、{{}}  mustache  双大括号语法  数据是响应的
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"你好呀",
        firstName:"乌拉那拉",
        lastName:"宜修",
        counter:100
      }
    })

  </script>
</body>

 13-(掌握)插值操作-其他指令使用

<body>
  
  <div id="app" v-cloak>
    <h3>{{msg}}</h3>
    <h3 v-once>{{msg}}</h3>
    <div v-html = "url"></div>
    <h2 v-text = "msg"></h2>
    <h2 v-pre >{{msg}}</h2>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * 插值操作 其他指令
     * 1、v-once  
     * 2、v-html
     * 3、v-text  一般不适用，因为它不够灵活
     * 4、v-pre  原封不动的展示内容 用的也很少
     * 5、v-cloak  cloak:斗篷   没啥意义，仅做了解
     * 
     * 在vue解析之前，div有v-cloak 属性
     * 在vue解析之后，div中没有v-cloak 属性 
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"你好呀",
        url:"<a href = 'http://www.baidu.com'>百度一下</a>",
      }
    })

  </script>
</body>

14-(掌握)v-bind的基本使用

body>
  
  <div id="app" v-cloak>
    <h3>{{msg}}</h3>
    <img v-bind:src="imgurl" alt="">
    <a v-bind:href="aHref">百度一下</a>
    <!-- 语法糖写法 -->
    <a :href="aHref">百度一下</a>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * v-bind  动态绑定属性  
     * 给哪个属性绑定值，就在那个属性前面加 v-bind:
     * 语法糖： v-bind:href => :href
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"你好呀",
        imgurl:"https://v2.cn.vuejs.org/images/lifecycle.png",
        aHref:"http://www.baidu.com"
      }
    })

  </script>
</body>

15-(掌握)v-bind动态绑定class(对象语法)【注意案例里面的简单写法】

<body>
  
  <div id="app" v-cloak>
    <!-- 对象语法格式 -->
    <!-- <div v-bind:class = "{'类名1':boolean,'类名2':boolean}"></div> -->
    <!-- 这种写法没有任何意义 -->
    <!-- <div :class = "active">测试</div> -->
    <div :class = "{active:isActive,line:isLine}">测试</div>
    <!-- 多个class,vue内部会将他们合并 ,此时，class为 title active line-->
    <div class = "title" :class = "{active:isActive,line:isLine}">测试</div>
    <!-- 如果类名太长，可以写在computed里面或者methods里面 -->
    <div class = "title" :class = "getClass()">测试</div>
    <!-- 按钮点击一次变色，再点击还原原来的颜色 -->
    <button :class = "{changeColor:isChangeColor}" @click = "clickFn">按钮</button>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * v-bind  动态绑定class (对象语法)
     * 1、 v-bind:class = "{'类名1':boolean,'类名2':boolean}"
     * 2、如果类名太长，可以写在computed里面或者methods里面
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"hello world",
        active:"active",
        isActive:true,
        isLine:true,
        isChangeColor:false,
        counter:0
      },
    
      methods:{
        getClass(){
          return {active:this.isActive,line:this.isLine}
        },
        clickFn(){
          // 注意这里的一个简单写法
          // this.counter++;
          // if(this.counter%2==0){
          //   this.isChangeColor = false
          // }else{
          //   this.isChangeColor = true
          // }
          this.isChangeColor = !this.isChangeColor
        }
      }
    })

  </script>
</body>

16-(了解)v-bind动态绑定class(数组语法)  【仅做了解，用的很少】

<body>
  
  <div id="app" v-cloak>
    <!-- 数组语法格式 -->
    <!-- 数组内部的类名作为字符串解析 -->
    <div class="title" :class = "['active','line']">{{msg}}</div>
    <!--  数组内部的类名作为变量解析-->
    <div class="title" :class = "[active,line]">{{msg}}</div>
    <!-- 写在methods中 -->
    <div class="title" :class = "getClasses()">{{msg}}</div>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * v-bind  动态绑定class (数组语法)
     * 1、多个类名可以写在computed或者methods里面
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"hello world",
        active:"aaa",
        line:"bbb"
      },
    
      methods:{
        getClasses(){
          return [this.active,this.line]
        }
      }
    })

  </script>
</body>

 17-(完成)v-bind和v-for结合的作业布置

<body>
  
  <div id="app" v-cloak>
    <ul>
      <li v-for = "(item,index) of movies" :class = "{active:currentIndex == index}"  @click = "clickFn(index)">{{item}}</li>
    </ul>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * v-bind 和 v-for 小作业：
     * 实现列表，默认第一个高亮，然后点击哪个哪个高亮
    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"hello world",
        movies:["甄嬛传","芈月传","如懿传"],
        currentIndex:0
      },
    
      methods:{
        clickFn(index){
          this.currentIndex = index
        }
      }
    })

  </script>
</body>

18-(掌握)v-bind动态绑定style(对象语法)

<body>
  
  <div id="app" v-cloak>
    <!-- 对象语法格式 -->
    <!-- <div :style = {key(属性名):value(属性值)}>{{msg}}</div> -->
    <!-- key的引号可以省略，value如果加了引号当做字符串解析，如果不加引号当做变量解析 -->
    <div :style = "{fontSize:fontSize}">{{msg}}</div>
    <div :style = "{'font-size':fontSize}">{{msg}}</div>
    <div :style = "{'font-size':finalSize+'px'}">{{msg}}</div>
    <div :style = "{'font-size':fontSize,color:finalColor}">{{msg}}</div>
    <div :style = "getStyles()">{{msg}}</div>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * v-bind 动态绑定style(对象语法)
     * 在组件化开发中用的多一些
     * 对象语法用的比较多
     * 属性太多可以抽离到methods或者computed里面
     *    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        msg:"hello world",
        fontSize:"28px",
        finalSize:52,
        finalColor:"red"
      },
    
      methods:{
        getStyles(){
          return {'font-size':this.fontSize,color:this.finalColor}
        }
      }
    })

  </script>
</body>

19-(了解)v-bind动态绑定style(数组语法)

 

 20-(掌握)计算属性的基本使用 【计算属性是当做属性使用的，使用的时候不需要加（）】

<body>
  
  <div id="app">
    <div>{{firstname}} {{lastname}}</div>
    <div>{{firstname+" "+lastname}}</div>
    <div>{{getFullName()}}</div>
    <div>{{fullName}}</div>
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    /**
     * 计算属性：当我们要对某种数据进行变化的时候再来进行显示的话，可以使用computed
     * 计算属性是当做属性使用的，使用的时候不需要加（）
     *    */ 
   
    const app =  new Vue({
      el:"#app",
      data:{
        firstname:"hello",
        lastname:"world"
      },
      computed:{
        // 计算属性一般不加动词
        fullName(){
          return this.firstname+" "+this.lastname;
        }
      },
      methods:{
        getFullName(){
          return this.firstname+" "+this.lastname;
        }
      }
    })

  </script>
</body>

21-(掌握)计算属性的复杂操作

<body>
  
  <div id="app">
    <div>{{firstname}} {{lastname}}</div>
    <div>{{firstname+" "+lastname}}</div>
    总价格：{{totalPirce}}
  </div>
  
  <script src = "./js/vue.js"></script>
  <script>
    
    const app =  new Vue({
      el:"#app",
      data:{
        firstname:"hello",
        lastname:"world",
        books:[
          {
            id:"001",
            name:"unix编程艺术",
            price:1
          },
          {
            id:"002",
            name:"代码大全",
            price:2
          },
          {
            id:"003",
            name:"深入理解计算机组成原理",
            price:3
          },
          {
            id:"004",
            name:"现代操作系统",
            price:4
          },
        ]
      },
      computed:{
        totalPirce(){
          let totalCount = 0
          // 第一种写法
          // this.books.map(item=>{
          //   totalCount=Number(totalCount)+Number(item.price);
          // });
          // 第二种 原始写法
          // for(let i = 0;i<this.books.length;i++){
          //   totalCount=Number(totalCount)+Number(this.books[i].price);
          // }
          // es6 for循环 in 
          // for(let i in this.books){
          //   totalCount=Number(totalCount)+Number(this.books[i].price);
          // }
          // es6 for循环 of 
          for(let book of this.books){
            totalCount=Number(totalCount)+Number(book.price);
          }
          return totalCount
        }
      }
    })

  </script>
</body>

22-(了解)课堂回顾

1、邂逅vue.js:

认识vue, vue的读音，为啥学vue,  什么是渐进式，vue特点， 

2、安装vue(3中方式）

3、vue初体验：三个案例:

  • mustache 语法， 体验vue响应式，
  • vue列表展示，v-for 
  • vue计数器小案例  ，事件监听，@click

4、vue中的mvvm

5、创建vue  option 可以放那些东西【el, data, methods, lifestyle】

6、插值语法（mustache，v-html,, v-text, v-once, v-pre, v-cloak）

7、v-bind 绑定基本属性

8、v-bind 动态绑定class【对象语法和数组语法】 列表小作业

9、v-bind 动态绑定style【对象语法和数组语法】

10、computed 讲解两个案例

半个开心果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
从Vue基础语法入手
08-10
从Vue基础语法入手，逐层递进，项目贴近企业流程，完全按照企业级别代码质量和工程开发流程进行，让你理解这套技术在企业中被使用的真实流程。更好的掌握Vue各个基础知识点。
v-for循环el-button默认选中第一个button按钮,执行第一个按钮的事件
weixin_44740072的博客
06-07 1324
需求: v-for遍历一组按钮，要做到一进入页面高亮就在第一个按钮上面，且执行第一个按钮的方法。data中定义upBtn。
Vue滚动到指定位置的多种方式
热门推荐
qsya的博客
07-13 4万+
需求： 当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。 方法一：锚点 锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。 也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
蓝胖子的博客
11-07 3071
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
vue 滚动定位、锚点跳转 到指定元素位置scrollIntoView
未末的博客
01-11 1909
html <div v-for="(item,index) in xx" :key="index" :id="'audioTime1'+ Object.values(item)[1]"> </div> 滚动方法 // 滚动 goAnchor(selector) { // console.log(selector) // console.log(this.$el) //id的形式 this.$el.querySelector
vue 列表自动滚动到制定位置
王博的博客
05-28 3132
背景：业务开发中遇到一个需求，是要求跳转到新页面，并默认选中内容，如果内容在列表的位置靠后，就需要滚动到可见范围内。 实现： 1. 循环实现列表，为每个item添加id,**:id="'item' + index"**,方便后续查找对应项 <div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item"> <span>item: {{ item.name }}&lt.
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
前端框架Vue基础语法笔记
01-20
前端框架Vue基础语法笔记
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue 两步实现点击导航栏，滚动页面到指定位置的功能
前端小白的学习分享小世界
03-24 7629
实现在页面不同位置点击左侧导航栏，滚动页面到对应板块（指定位置）的功能，并可以自定义滚动操作的速度和距离。
v-print v-for打印时只展示for循环的第一个元素解决方案
weixin_38257149的博客
08-05 1295
v-print v-for 打印时只展示for循环的第一个元素 解决方案：将循环放在rmz_PrintID里面就OK了。
Vue实现v-for生成标签后默认展示第一个
qq_24243695的博客
01-29 4723
<template> <div> <ul> <li v-for="(item, index) in list1" @mouseenter="handleMouseEnter" :id="index"></li> </ul> <div> <div v-for="(item, index...
Vue中 v-for 生成样式并默认选中第一个样式
Ta曰丿、她活的博客
02-12 8666
【1】代码 <div class="btm-segmented-control"> <div class="btm-control-itemx" v-for="(item, index) in resultRange" :key="index" :class="item.range_code == rangeCode ? 'btm-activex':''"...
vue v-for 循环复选框-默认勾选第一个的实现方法
wax9092的博客
11-28 2万+
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子：<span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label...
vue设置v-for遍历，默认选中第一个样式，点击切换时，样式选中一起发生变化
笑到世界都狼狈的博客
08-30 5058
1.标签中添加:class属性和click事件： <div v-for="(item,index) in serverInfoList" :key="index" :class="active==index ? 'activeClass' : ' ' "> <span>{{ item.devId }}</span> <span @click="rowClick(index,$event)">{{ item.devName }}</s
html动态设置font-size
LEGLO_的博客
09-02 1860
<script> //font-size,窗口自适应 (function (doc, win) { var dpr, rem, scale; var docEl = document.documentElement; var metaEl = document.querySelector('meta[name="viewport"]'); var res...
FME学习之旅---day27
最新发布
summer_corner的博客
05-17 199
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1102
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
vue3基础语法学习文档
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板语言，允许开发者使用 HTML 标签来声明式地渲染视图。 2. 指令：Vue.js 使用特殊的指令来扩展 HTML 语法，指令以 v- 开头，例如 v-if、v-for 等。 3. 计算属性：Vue.js 允许开发者定义计算属性，这些属性可以根据其他属性的值动态计算而来。 4. 事件处理：Vue.js 允许开发者使用特殊的指令来处理事件，例如 v-on 指令用于绑定事件监听器。 5. 组件：Vue.js 允许开发者将界面拆分成独立的、可复用的组件，并使用这些组件来构建复杂的界面。 这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值