AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue的语法讲解（上篇）--全网最详细的解答

2023-11-30 135
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue的语法讲解（上篇）--全网最详细的解答

一.插值⭐

       1.1 文本插值

<head>
    <meta charset="utf-8">
    <title>插值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="contect">
      {{msg}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            msg:"hello CSDN"
          }
        }
      })
    </script>
  </body>

       效果：

       

    1.2 html

         html文本需要使用 v-html来实现效果

<body>
    <!-- 定义边界 -->
    <div id="contect">
      文本:    {{msg}}  <br>
      html解析:<b v-html="msg2"></b>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            msg:"hello CSDN",
            msg2:"<span style='color: deeppink'> 我是佩奇</span>"
          }
        }
      })
    </script>
</body>

效果：

1.3 属性

               属性要借用 ：Class来实现属性的转换

<style type="text/css">
      .f30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="contect">
      文本:    {{msg}}  <br>
      html解析:<b v-html="msg2"></b> <br>
      属性：<b :class="msg3" v-html="msg2"></b> <br>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            msg:"hello CSDN",
            msg2:"<span style='color: deeppink'> 我是佩奇</span>",
            msg3:"f30"
          }
        }
      })
    </script>

效果：

1.4 表达式

       有计算，截取字段，以及三元运算符
<body>
    <!-- 定义边界 -->
    <div id="contect">
      文本:    {{msg}}  <br>
      html解析:<b v-html="msg2"></b> <br>
      属性：<b :class="msg3" v-html="msg2"></b> <br>
      表达式：{{num+1}} <br>
        截取：{{warn.substr(0,2)}}<br>
        <input v-model="ok"/>
        {{ok==1?"我是乔治":"我是佩奇"}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            msg:"hello CSDN",
            msg2:"<span style='color: deeppink'> 我是佩奇</span>",
            msg3:"f30",
            num:6,
            warn:"你好，我是乔治",
            ok:1
          }
        }
      })
    </script>

效果：

二.指令⭐

       2.1 v-if/v-else-if/v-else的使用

               相当于以前的 if...else..

<!-- 定义边界 -->
    <div id="contect">
      <p>v-if/v-else-if/v-else的使用</p>
      <input v-model="score"/><br>
      <b v-if="score < 60">落后了哦~🙂</b>
      <b v-else-if="score >=60 && score <70 ">加油！！💪</b>
      <b v-else-if="score >=70 && score <80">还差一点哦~</b>
      <b v-else-if="score >=80 && score <90">就只有一点点啦！💪</b>
      <b v-else="">成功啦！你真棒！</b><br >
    小于60 不及格（落后了哦~🙂）<br >
    60-70 及格（加油！！💪）<br >
    70-80 一般（还差一点哦~）<br >
    80-90 良好（就只有一点点啦！💪）<br >
    大于90 优秀（成功啦！你真棒！）<br >
</div>

       效果：

     2.2  v-if 与v-show的区别

      v-if 是"条件渲染"的指令，它会根据条件的真假来动态地添加或删除元素及其对应的组件

       v-show 是"条件显示"的指令，它会根据条件的真假来显示或隐藏元素。无论条件是真是假，元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。

       2.3 v-for的使用

<!-- 定义边界 -->
    <div id="contect">
    <p> v-for的使用</p>
    <i v-for="u in users ">{{u}}&nbsp;</i>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            users:[{
              name:"佩奇",id:1
            },{
              name:"乔治",id:2
            },{
              name:"珊迪",id:3
            }]
          }
        }
      })
    </script>

效果：                                                                                                                                        

2.4 下拉框的使用

<body>
    <!-- 定义边界 -->
    <div id="contect">
    <p> 下拉框的使用</p>
    <select>
      <option v-for=" u in users" :value="u.id">
        {{u.name}}
      </option>
    </select>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            users:[{
              name:"佩奇",id:1
            },{
              name:"乔治",id:2
            },{
              name:"珊迪",id:3
            }]
          }
        }
      })
    </script>
  </body>

效果：

2.5 复选框的使用 

<body>
    <!-- 定义边界 -->
    <div id="contect">
      <p>复选框的使用</p>
    <div v-for="u in users"  >
    <input type="checkbox" name="users" :value="u.id"/>{{u.name}}
    </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            users:[{
              name:"佩奇",id:1
            },{
              name:"乔治",id:2
            },{
              name:"珊迪",id:3
            }]
          }
        }
      })
    </script>
  </body>

效果：

2.6 动态参数 --双击与单击

               它们的不同就是下面圈出来的

       

效果：第一个按钮是单击，第二个是双击

三.过滤器

       3.1 局部过滤器

      局部过滤器是在组件内部定义的过滤器，只在该组件的模板中可用。

       以下代码中有三个局部过滤器的使用，基本上的作用是差不多的，我觉得可以用数学中的交集并集来理解，或者是用来截取其中一段文字来理解

<!-- 定义边界 -->
    <div id="contect">
    <p>局部过滤器基本应用</p>
    {{msg | filterA}}
    <p>局部过滤器串行使用</p>
    {{msg}}<br>
      {{msg | filterA}}<br>
     {{msg | filterA|filterB}}<br>
     <p>局部过滤器传参</p>
     {{msg | filterC(2,6)}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        filters:{
          'filterA':function(v){//v表示要过滤的内容
            return v.substring(0,6);
          },
          'filterB':function(v){
            return v.substring(2,4);
          },
          'filterC':function(v,begin,end){
            return v.substring(begin,end);
          }
        },
        data(){
          return{
            msg:"这是我的弟弟乔治"
          }
        }
      })
    </script>
效果：

3.2 全局过滤器

    全局过滤器是在 Vue 实例化之前定义的过滤器，它可以在所有组件的模板中使用。
       下面主要是一个时间的处理, 首先写一个时间的js---data.js
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
  //debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
function fmtDate(date, pattern) {
  var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};
接着将其引入我们的项目中
    <!-- 定义边界 -->
    <div id="contect">
     <p>全局过滤器</p>
     {{time}}<br />
     {{time|fmtDataFilter}}
    </div>
    <script type="text/javascript">
      Vue.filter('fmtDataFilter',function(value){
        return fmtDate(value);
      });
      new Vue({
        el:"#contect",
        data(){
          return{
            msg:"这是我的弟弟乔治",
            time:new Date()
          }
        }
      })
    </script>
效果：                                                                                                                                

四.计算属性和监听器（监听属性）⭐

计算属性是单方影响，而监听属性是双方影响

       4.1 计算属性

<body>
    <!-- 定义边界 -->
    <div id="contect">
      <!-- 单方影响 -->
      计算属性：
      单价：<input v-model="price"/>
      数量：<input v-model="num"/>
      小计：{{count}}<br />
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            price:99,
            num:1,
            m:1000,
            km:1
          };
        },
        computed:{//computed计算属性
          count:function(){
            return this.price * this.num
          }
        }
      })
    </script>
  </body>

       效果：

4.2 监听属性

<body>
    <!-- 定义边界 -->
    <div id="contect">
      <!-- 双方影响 -->
      监听属性：<br />
      千米：<input v-model="km" /><br />
      米：<input v-model="m"/>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            m:1000,
            km:1
          };
        }，
        watch:{//watch监听属性
          km:function(v){  //v是被监听的属性 km
            this.m=parseInt(v)*1000
          },
          m:function(v){  //v是被监听的属性 m
            this.km=parseInt(v)/1000
          }
        }
      })
    </script>
  </body>

效果：

五.购物车案例

运用上面的知识搭建一个简单的购物车界面，并实现单价数量以及总价的改变

下面是一个界面，用了三个<tr>

<div id="contect">
    <h2>购物车</h2>
    <table border="1">
      <thead>
        <tr>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>怡宝</td>
          <td>{{price1 }}</td>
          <td>
            <button @click="gooddel1">-</button>
        {{num1}}
            <button @click="goodadd1">+</button>
          </td>
          <td>{{count1}}</td>
        </tr>
    <tr>
      <td>百岁山</td>
      <td>{{price2 }}</td>
      <td>
        <button @click="gooddel2">-</button>
        {{ num2}}
        <button @click="goodadd2">+</button>
      </td>
      <td>{{count2}}</td>
    </tr>
    <tr>
      <td>农夫山泉</td>
      <td>{{price3 }}</td>
      <td>
        <button @click="gooddel3">-</button>
        {{ num3}}
        <button @click="goodadd3">+</button>
      </td>
      <td>{{count3}}</td>
    </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总价：</td>
          <td>{{total}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
接下来，写方法实现：
把价格和数量首先是定死的，为了演示，接着写加号的点击事件，和减号的点击事件，以及小计和总计的计算
 <script>
    new Vue({
      el: '#contect',
      data: {
      price1:30,
      price2:10,
      price3:20,
      num1:1,
      num2:1,
      num3:1
      },
      computed: {
       count1:function(){
       return this.price1 * this.num1;
     },
     count2:function(){
           return this.price2 * this.num2;
     },
     count3:function(){
           return this.price3 * this.num3;
     },
     total:function(){
       return this.count1 + this.count2 +this.count3;
     }
      },
      methods: {
        goodadd1: function() {
          return this.num1++;
        },
    goodadd2: function() {
      return this.num2++;
    },
    goodadd3: function() {
      return this.num3++;
    },
    gooddel1: function() {
      if(this.num1>1){
         return this.num1--;
      }
    },
    gooddel2: function() {
     if(this.num2>1){
       return this.num2--;
     }
    },
    gooddel3: function() {
    if(this.num3>1){
       return this.num3--;
    }
    },
      }
    });
  </script>

现在来看效果吧！！

今天的分享就到这啦！！

文章标签：
JavaScript
前端开发
关键词：
语法VUE.js
vue语法VUE.js
VUE.js语法
姿势不太差
目录
相关文章
34789737
|
2月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
283 2
哇塞女孩
|
26天前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
256 137
谢妹纸
|
5月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
727 0
我们是幸福一家人
|
5月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
334 82
rvblio6ca4cug
|
4月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
387 1
34789737
|
4月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
228 0
34789737
|
5月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
451 17
34789737
|
5月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
264 1
34789737
|
5月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
473 0
34789737
|
5月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
218 0

热门文章

最新文章

  • 1
    Vue 3
  • 2
    vue中的keep-alive问题（2）
  • 3
    Vue 3性能优化
  • 4
    Vue中对象或数组数据更新但视图不刷新问题的解决策略
  • 5
    将base64格式的图片画到canvas上（js和vue两种）
  • 6
    Jenkins + Github + Nginx 自动化部署 Vue 项目
  • 7
    应该从vue2 升级到vue3吗，到底该怎么升级呢？
  • 8
    解析Vue.js中的computed工作原理
  • 9
    用脚手架创建vue项目
  • 10
    Vue3 element-ui el-upload(上传组件) 上传图片后，隐藏上传按钮
  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
    727
  • 2
    用组件懒加载优化Vue应用性能
    334
  • 3
    Vue 表情包输入组件实现代码及详细开发流程解析
    264
  • 4
    Vue 自定义进度条组件封装及使用方法详解
    451
  • 5
    如何高效实现 vue 文件批量下载及相关操作技巧
    473
  • 6
    Vue 项目中如何自定义实用的进度条组件
    218
  • 7
    Vue框架中常见指令的应用概述。
    111
  • 8
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    426
  • 9
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    456
  • 10
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    281

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、