vue的语法讲解(上篇)--全网最详细的解答

简介: 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>

现在来看效果吧!!

今天的分享就到这啦!!

目录
打赏
0
0
0
0
3
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
161 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
114 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
85 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等