vue日常学习2（模板template、计算属性computed、监听属性watch）

最新推荐文章于 2023-06-16 15:24:08 发布
最新推荐文章于 2023-06-16 15:24:08 发布
阅读量900 收藏 1
点赞数 1
分类专栏： vue日常学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41020661/article/details/117294978
版权

一.模板template

  1. vue的构造器的选项中:
    el:指定挂载的节点
    data:声明Vue实例中的属性
    methods:定义事件函数/其他的方法
    template也是选项之一,定义视图模板
    • template最终会直接替换原节点,使用template模板中必须要有一个根节点
  2. template使用的3种方式
    1.直接定义在选项中
    2.定义在template
    2.定义在script

二.计算属性 computed

  1. 当依赖的值发生变化时,会触发计算属性重新计算
  2. 是否刷新视图问题
    • 如果计算属性中依赖的值没有发生变化,则计算属性不会在视图更新时执行,因为计算属性会缓存计算过后的值
    • methods定义的方法如果使用了{{fn()}}调用,则视图更新时,不管与该方法有没有关系,都会重新执行一遍
    • 计算属性只有看自己已懒得值得有没有发生变化,如果没变化,则视图即使更新了,计算属性也不会重新执行
  3. 何时使用计算属性
    当属性需要经过计算,从一个已有的数据得到一个新的数据时,就可以使用computed,这样可以节省性能
  4. 是属性，调用时不用加()

三.监听属性watch

  1. 作用:监听数据的状态变化
  2. 属性
    • deep属性表示是否深度监听，默认值为false(不开启),当对象等引用类型数据发生变化时,是不会监听到的
      =>普通的watch方法无法监听到对象内部属性的改变
      => 为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
    • immediate属性表示是否立即监听,默认值false;如果为true,则在加载页面时就已经开始监听
    • 无法监听通过下标改变的数组
    • 无法监听通过 . 方式添加对象属性
  3. 何时使用:当数据发生变化后需要处理某些逻辑时
  4. 对象的监听
  'obj.a':{
      handle(){},//处理函数,不能使用箭头函数
      deep:true,//深度监听
      immediate:true,//立即监听
    }
  1. watch自带一个新值和旧值，新值就是变化后的值，旧值就是变化前的值
    就是watch:{
    num(新值，旧值){}
    }
  2. computed和watch的区别
- computed是根据依赖的值的变化计算得出新的值,新的值会被挂载到Vue实例上;watch是监听已经存在的属性/状态,watch还可以监听computed的变化
- computed计算得到的值具有缓冲性,当依赖发生变化时,才会重新计算;watch是只有当监听的属性发生变化才会执行
- 从使用场景来说:
  computed适用于一个数据受多个数据影响的场景
  watch适用于一个数据影响多个数据的场景
  computed用于同步数据的处理
  watch可以处理异步数据

四.其他

  1. 反引号``的作用
    模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
    https://blog.csdn.net/blog_szhao/article/details/51792868
  2. template什么情况下需要使用
    单独使用模板将会替换挂载的元素。所以一般与插槽一起使用，
  3. v-model 和 :value的区别
    v-model的适用范围更广，更好的使用监听watch的的选项
    :value只能用于有value值的标签
  4. vue里的方法要调用才能运行
  5. forEach循环
//forEach方法中的function回调有三个参数：
//第一个参数是遍历的数组内容，
//第二个参数是对应的数组索引，
//第三个参数是数组本身
　arr.forEach(function(value,index,array){　
　　　　//code something　　　　
　　});
  1. await与async
    AsyncFunction 构造函数用来创建新的异步函数对象，JavaScript 中每个异步函数都是 AsyncFunction 的对象。
    https://www.jianshu.com/p/b4fd76c61dc9
    http://www.ruanyifeng.com/blog/2015/05/async.html
  2. 数组的增加
    arr.pop() 用于删除并返回数组的最后一个元素。 后删
    arr.unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 头增
    arr.shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。 头删
    arr.push() 向数组的末尾添加一个或多个元素，并返回新的长度。 后增
  3. 定时器
    setTimeout((),时间) 在指定的毫秒数后调用函数或计算表达式。
    setInterval((),时间) 每隔固定时间被调用一次
fool is trying
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web Components 系列（五）—— 关于 Templates
编程三昧
02-11 771
Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。
vue template html属性,详解template标签用法(含vue中的用法总结)
weixin_36425412的博客
06-05 5098
一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。我是template我是自定义表现abc二、template标签操作的属性和方法content属性:在js中template标签对应的dom对象存在content属性，对...
＜template＞标签的用法
热门推荐
Sfh的博客
09-02 3万+
一、html5中的template标签 template标签，顾名思义，模板的意思 HTML5提供的新标签，更加规范和语义化 可以把列表项放入template标签中，然后进行批量渲染 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 二、template标签操作的属性和方法 content属性:在js中template标签对应的dom对象存在content属性，对应
RedisTemplate类中属性作用
张金龙.
04-25 1380
1.说明 当我们在SpringBoot项目中使用@Autowride这个注解来调用 RedisTemplate这个类时 可以看到 这个类继承了RedisAccessor这个类 这两个类都是在org.springframework.data.redis.core;这个包下 并且RedisTemplate这个类实现了RedisOperations、BeanClassLoaderAware 这两个接口 在RedisTemplate这个类中 有以下几个属性 1.enableTransactionSupport :这
Template，ItemsPanel，ItemContainerStyle ，ItemTemplate四个属性辨析
jihuaguo88的专栏
03-04 1972
Template，ItemsPanel，ItemContainerStyle ，ItemTemplate四个属性辨析 ItemsControl，ListBox 等带有子项的控件四个重要属性解析； Template 为控件模板，整个控件的外观，比如加入边框，边距，背景等修改； ItemsPanel 是子项的容器，可以是Stackpanel ,Wrappanel,VirtualStackPanel等，可以控制子项的排列方式； ItemContainerStyle 子项的布局，显示与隐藏，背景； I..
关于template标签用法总结(含vue中的用法总结)
bobozai86的博客
09-13 5709
文章目录 一、html5中的template标签 二、template标签操作的属性和方法 三、vue中的template 1、template标签在vue实例绑定的元素内部 2、vue实例中的template属性 一、html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 <!--当.
vue计算属性computed、事件、监听器watch的使用讲解
01-21
计算属性（computed） <template> 计算属性 <!-- 直接渲染得到数据 --> <p><input type=text v-model=message> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据...
Vue-template-damin模板.zip
05-09
7. **计算属性与侦听器**：Vue中可以使用`computed`属性处理复杂的计算逻辑，并通过`watch`监听数据变化，执行相应操作。 8. **生命周期钩子**：Vue组件有自己的生命周期，每个阶段都有相应的钩子函数，如`created`...
computed和watch使用
最新发布
08-19
在Vue.js框架中，`computed`和`watch`是两个非常重要的概念，它们主要用于处理数据的响应式更新和监听。这两个特性使得Vue能够高效地管理组件的状态并及时更新视图。 `computed`属性用于计算基于其他数据的值，并且...
vite2-vue2-template
03-16
6. **计算属性与侦听器**：通过`computed`和`watch`，可以处理复杂的依赖关系和响应式监听。 **项目结构分析：** 在`vite2-vue2-template-master`目录中，我们可以找到以下关键文件和目录： 1. `public`：存放静态...
vue进行图片的预加载watch用法实例讲解
08-28
在Vue框架中，Computed和Watch都是用来监听数据变化的函数，但它们有着不同的使用场景。 Computed函数是用来监听多个数据的变化，然后返回一个状态值。当其中一个或多个数据发生变化时，Computed函数将重新计算整个...
关于template在html/vue中的用法（标签、属性、条件渲染、组件结构）
yolo_______95的博客
10-02 1万+
vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。标签在页面加载时该标签中的内容不会显示。元素，但是查看后台dom结构存在template标签。
＜template＞：内容模板元素详细介绍
weixin_49721727的博客
09-26 989
HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。 此元素仅包含全局属性。 但，HTMLTemplateElement有个属性：content, 这个属性是只读的...
template标签用法（含vue-template的用法）
usernamecunzai的博客
07-30 1066
template标签用法（含vue） 1、h5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template原本是不可见的，它设置了display：none属性。 <!--显示"abc"这个内容，不显示"template",这是因为template标签天生不可见--> <template><div>template</div></template&
vue.js 组件中的template
谁偷了我的小熊饼干
06-16 2158
的作用是定义组件的外观和结构，以及绑定数据和展示数据。在模板中，我们可以使用 Vue 的模板语法来插入数据、绑定事件、进行条件渲染、循环遍历等。是 Vue 组件中定义组件外观和行为的重要部分，它定义了组件的模板结构和展示逻辑，通过使用 Vue 的模板语法实现数据的绑定和交互操作。，我们可以将组件的结构和逻辑封装在一个地方，使代码更具可读性和可维护性。也使得我们可以方便地操作组件的外观和行为，根据数据的变化动态更新模板的内容。定义了组件的结构和内容，即组件的 HTML 结构和插值表达式。
如何在Vue模板中使用计算属性？
2301_77795034的博客
06-04 1166
最后，我们还可以使用计算属性的setter函数来设置计算属性的值。计算属性是一种在Vue组件中使用的属性，它的值是根据其他数据的计算得出的。在Vue中，我们可以使用computed选项来定义计算属性，这个选项接收一个函数或者一个对象，函数或对象中包含我们要计算的属性和它们的值。除了简单的计算，计算属性还可以使用一些内置的函数和方法。在这两个例子中，无论firstName或lastName的值发生任何变化，都会触发更新fullName计算属性的值，从而保证模板中显示的值始终正确。在模板中使用计算属性。
Vue实例中的template讲解
有一颗前端心的后端开发小哥
05-23 2万+
Vue实例中的template代码，调试图片原理说明图片终极结论el，template，render属性优先性 本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的前端技术文章[感慨]，本人虽为后端开发小哥哥，也有着一颗学习前端的心，本篇博客有借鉴很多心目中的大牛博客的一些片段，感谢❤，第一次写博客好激动好激动好激动 wawawa,淡定我可是一个安静的帅气的阳光的小哥哥， 嘻嘻嘻嘻 代码， //别忘了引包 <body> <
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
计算属性computed可以根据已有的数据，动态地计算出新的数据，并将计算结果返回。在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } } </script> ``` 监听属性watch可以在数据变化时执行自定义的回调函数。在Vue的组件实例中，可以通过在watch选项中定义监听属性。比如，我们可以定义一个监听属性firstName，用于在firstName变化时更新fullName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe', fullName: '' } }, watch: { firstName(val) { this.fullName = val + ' ' + this.lastName } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值