Vue入门——基础语法

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量359 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript html vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41108186/article/details/104656750
版权

原文链接

Vue入门——基础语法

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的优势

对于前端开发人员来说，大家使用过很多的Javascript框架。比如原生的JavaScript,Jquery,angularjs和rectjs等。那么Vue与这些框架相比，它的优势体现在哪里？

  1. Vue 只关注视图层， 采用自底向上增量开发的设计。Vue关注的是视图层，操作的对象是HTML元素。它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
  2. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各种项目.在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。
  3. Vue 学习起来非常简单.在 API 与设计两方面上 Vue.js非常简单，因此你可以快速地掌握它的全部特性并投入开发。Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

如上几行代码就是一个简单的vue程序，你会发现id为app的div里显示了message的值，看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

指令

Vue有很多v-开头的指令，其本质是自定义属性。比如v-cloak, v-text, v-bind, v-model, v-on等等，下面将逐个介绍。

v-cloak

在上面的程序中，如果你的网速太慢，会发现最一开始网页会显示{{message}}而非它的值，这涉及到Vue的生命周期，我们以后再聊。不过这样一个过程可能给用户带来不好的体验，因此你可以使用v-cloak指令防止页面加载时的闪烁。

<style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
        msg: 'Hello Vue'
      }
    });
</script>
</body>
</html>

v-text

  • v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中
  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上(因为谁也不知道某些傻叉用户会提交啥。。。)
  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
    <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

v-pre

  • 跳过编译过程显示原始信息
<span v-pre>{{ this will not be compiled }}</span>    
<!--  显示的是{{ this will not be compiled }}  -->
<span v-pre>{{msg}}</span>  
<!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-once

  • 只渲染一次，当数据改变时，插值的内容不会有响应式的改变
  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

v-on

  • v-on是用来绑定事件的指令，如：v-on:click
  • 该指令还有一个语法糖，上述指令可以缩写为：@click
<body>
    <div id="app">
        <div>{{num}}</div>
    <div>
        <button v-on:click="num++">点击1</button>
        <button @click="num++">点击2</button>
        <button @click='handle'>点击3</button>
        <button @click='handle()'>点击4</button>
    </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle: function(){
                    this.num ++;
                }
            },
        })
    </script>
</body>

上面代码中四个按钮都可以实现对num加一 的操作，但是按钮3和4值得注意一下，按钮3在调用方法时没有加括号而按钮4加了括号，两种方式都是可以的。原因在于如果我们的方法不需要参数，在调用时就无须括号。

实际上，如果方法内只需要一个event事件对象参数，我们在调用时也无须写括号，因为vue会帮助我们自动传入event对象，前提是方法的声明处只有一个参数。如果方法需要多个参数而我们没有传入，则默认传入event作为第一个参数，其他的会是undefined。

事件修饰符
  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
  • 修饰符是由点开头的指令后缀来表示的
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
  • 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>
自定义按键修饰符
  • 在Vue中可以通过config.keyCodes自定义按键修饰符别名
<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
	
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性
  • v-bind:href 可以缩写为 :href;
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">
绑定对象
  • 我们可以给v-bind:class 一个对象，以动态地切换class。
  • 注意：v-bind:class指令可以与普通的class特性共存
1、 v-bind 中支持绑定一个对象 
	如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
<!-- 
	HTML最终渲染为 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  对应的渲染到页面上的CSS类名	
		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 


		当 isColor 和 isSize 变化时，class列表将相应的更新，
		例如，将isSize改成false，
		class列表将变为 <ul class="box textColor"></ul>
-->

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>

<sript>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
    	activeColor:"red",
        activeSize:"25px",
    }
})
</sript>
<style>

    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
绑定class
2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据

这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
绑定对象和数组的区别
  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是data 中的数据
绑定style
<div v-bind:style="styleObject">绑定样式对象</div>'
 
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>

<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>


<script>
	new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

分支结构

v-if 使用场景
  • 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
  • 进行两个视图之间的切换
<div id="app">
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })
</script>

----------------------------------------------------------

    <div v-if="type === 'A'">
       A
    </div>
  <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
  <!-- v-else紧跟在v-if或v-else-if之后-->
    <div v-else>
       Not A/B/C
    </div>

<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
</script>
v-show 和 v-if的区别
  • v-show本质就是标签display设置为none，控制隐藏
    • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
  • v-if是动态的向DOM树内添加或者删除DOM元素
    • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构

v-for
  • 用于循环的数组里面的值可以是对象，也可以是普通元素
<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是我们自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>
  • 不推荐同时使用 v-if 和 v-for
  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
   <!--  循环结构-遍历对象
		v 代表   对象的value
		k  代表对象的 键 
		i  代表索引	
	---> 
     <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
    obj: {
        uname: 'zhangsan',
        age: 13,
        gender: 'female'
    }
  }
})
</script>

key 的作用

  • key来给每个节点做一个唯一标识
  • key的作用主要是为了高效的更新虚拟DOM
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

购物车案例

需求说明：

  • 表格显示购物车的商品内容
  • 可以增加或者减少物品的数量，并且可以删除
  • 显示购物车商品的总价

实现图：

mark

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
  <table class="table table-hover table-bordered">
    <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">书籍名称</th>
      <th scope="col">出版日期</th>
      <th scope="col">价格</th>
      <th scope="col">购买数量</th>
      <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(book,index) in books">
      <td>{{index+1}}</td>
      <td>{{book.name}}</td>
      <td>{{book.date}}</td>
      <td>{{book.price | showPrice}}</td>
      <td>
        <button class="btn btn-sm btn-secondary" @click="decrement(index)">-</button>
        {{book.count}}
        <button class="btn btn-sm btn-secondary" @click="increment(index)">+</button>
      </td>
      <td>
        <button class="btn btn-sm btn-danger" @click="removeItem(index)">删除</button>
      </td>
    </tr>
    </tbody>
  </table>
  <span>总价格:{{totalPrice | showPrice}}</span>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books: [
        {
          name: '《算法导论》',
          date: '2016-9',
          price: 85,
          count: '1'
        },
        {
          name: '《UNIX编程艺术》',
          date: '2016-2',
          price: 99,
          count: '1'
        },
        {
          name: '《编程珠玑》',
          date: '2008-10',
          price: 108,
          count: '1'
        },
        {
          name: '《代码大全》',
          date: '2006-3',
          price: 79,
          count: '1'
        }
      ],
    },
    filters: {
      showPrice(value){
        return '￥' + value.toFixed(2);
      }
    },
    computed: {
      totalPrice(){
        let total = 0;
        for (let item of this.books){
          total += item.price * item.count;
        }
        return total;
      }
    },
    methods: {
      increment(index){
        this.books[index].count++;
      },
      decrement(index){
        if (this.books[index].count > 0){
          this.books[index].count--;
        }
      },
      removeItem(index){
        this.books.splice(index,1);
      }
    }
  });
</script>
</body>
</html>
小曹同学i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门笔记（一）——基础语法
穆子航的博客
08-01 188
一、Vue使用 官网：https://cn.vuejs.org 进入官网之后，打开 学习 -> 教程 ，点击左侧的 安装 开发版本：开发的时候使用，有很多警告（开发者下载） 生产版本：正式生产环境时候使用，删除警告的部分 这里使用<script>标签引入，Vue会被注册成一个全局变量 二、挂载点，模板与实例 挂载点 是vue的一个基本点，需要在el属性中写明，所有的操作，...
Vue入门级语法
帅大叔的博客
04-25 532
Vue入门级语法 使用方式 新手学习，只需要以引入<script>的方式即可。 在.html 中的head中加上<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可 学编程怎么能少了hello world <html> <head> ...
&和&&、| 和 || 的区别
Mr.Starl
12-04 2277
&amp;和&amp;&amp; 相同之处： &amp;和&amp;&amp;都表示：符号两端必须同时为真，最后的结果为真；其中一端为假，则最后的结果为假 不同之处： 用&amp;时，左端为假，还需要继续判断右端真假； 用&amp;&amp;时，左端为假，则不需要判断右端真假，即右端不需要进行运算 | 和 || 相同之处： | 和 || 都表示：符号两端中有一端为真时，最后的结果为...
Vue.js 基本语法
weixin_30488313的博客
11-23 122
插值 Html 使用 v-html 指令用于输出 html 代码： <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1...
vue 过滤器 管道符 {{ | }}
web_ding的博客
04-24 8489
过滤器 又称管道符 : | ←就是这个竖线! 叫管道符 将一串数据A拿去处理,处理完之后继续拿来用,且不会影响原来的数据A,也不会改变 是一个方法?通过参数的方式接受处理的数据,通过返回值的方式 告诉Vue显示什么 过滤器 — Vue.js <template>}{{item.addtime | afterTime }}</template> <script> 写在export default里面的data同级后面 filters:{ afterTime(
Vue 中 == 和 ===、&& 、|| 等操作符的用法
热门推荐
故屿γ
07-04 1万+
!= == === 否则会被当成字符串 true 和字符串 657。 总结 Note: 欢迎点赞，留言，转载请在文章页面明显位置给出原文链接 知者，感谢您在茫茫人海中阅读了我的文章 没有个性 哪来的签名！ 详情请关注点我 持续更新中......
Vue超详细（已完结）
weixin_45655585的博客
03-02 1303
自己观看bilibili（尚硅谷vue教程）总结的笔记
vue 3.0学习笔记(从入门到精通)
10-07
Vue 3.0是Vue.js框架的最新版本，它带来了许多...总之，Vue 3.0学习涵盖了许多方面，从基础的模板语法到高级的响应式机制，以及组件开发和路由管理。通过深入理解这些知识点，你将能够熟练地运用Vue 3.0进行前端开发。
vue光速入门（一）
01-08
在描述中提到的"hello world"示例，就是Vue入门的经典例子，它展示了如何创建一个简单的Vue实例并显示数据。 1. 创建Vue实例： 在Vue中，我们首先需要创建一个Vue实例，这通常是通过`new Vue()`来完成的。在示例中...
Vue入门之数据绑定(小结)
08-28
在本文中，我们将深入探讨Vue入门时的重要概念——数据绑定。数据绑定是Vue框架的核心功能，它使得开发者能够实现视图与数据模型之间的双向同步，极大地简化了前端开发流程。 首先，让我们理解什么是双向绑定。在...
vue时间戳转年月日时分的过滤器
01-18
注册为全局的过滤器，引入到vue库文件之后。使用方法{{时间戳|year}}{{时间戳|month|addzero}}
vue3 组合式使用示例及代码展示，vue3 入门参考书，vue3 烹饪书.zip
04-03
Vue3 是一款流行的前端JavaScript...总之，这个压缩包是Vue3初学者的宝贵资源，通过学习和实践其中的示例，开发者能够迅速掌握Vue3的核心特性，并熟悉其生态系统中的关键工具，为开发高质量的Vue3应用打下坚实基础。
Vue.js框架入门之vue-router路由的基本使用
01-08
Vue.js框架入门之表单和组件基础 Vue.js框架入门之组件创建、注册、使用 现在来续写第六期——Vue Router路由管理器 一、什么是路由 1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应...
谈谈key的唯一性特殊处理
Front小思的博客
06-17 958
通常： key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。 为了给 Vue 一个提示，以便它
vue中&&和||的用法
weixin_53917307的博客
01-05 9249
&& 表示为真时 执行 || 表示为假时 执行 date{ autoAdd : false, doJob: false } methods:{ xxx(){ // 1.如果autoAdd 为 true真时，则将doJob 设置为true this.autoAdd && (this.doJob= true); // 2.如果autoAdd 为 false假时，则将doJob 设置为true this.autoAdd ||
vue-管道符“ | “(竖杠)的作用
慢慢来吧，都会有的。
02-21 3511
vue管道符
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 642
Vue的基础语法
vue filter 过滤器 {{ | }}
taoqidejingling的博客
11-23 1499
vue filter 过滤器，用于过滤或格式化代码，使用 {{ | }} 插值表达式操作
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 241
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Vue.js入门教程：MVVM框架对比与基础语法
"本文介绍了Vue.js的基础语法和常用指令，包括MVVM框架的比较以及Vue的相关网址。" 在前端开发领域，MVVM（Model-View-ViewModel）架构模式因其高效的双向数据绑定而广受欢迎。Vue.js作为其中的一员，以其简洁的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值