如果不用引用vue，那么用ref可以，不用不行，似乎，为什么呢？

最新推荐文章于 2023-05-20 21:56:47 发布
最新推荐文章于 2023-05-20 21:56:47 发布
阅读量283 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/118399746
版权

这样不行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="counter">
      Counter: {{ counter }}
    </div>
    
    
    <script>
    
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }
    
    Vue.createApp(Counter).mount('#counter')
    </script>
    
  </body>
</html>

这样行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="counter">
      Counter: {{ counter }}
    </div>
    
    
    <script>
    import { vue } from Vue
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }
    
    Vue.createApp(Counter).mount('#counter')
    </script>
    
  </body>
</html>

这样也行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="counter">
      Counter: {{ counter }}
    </div>
    
    
    <script>
    
    import { reactive, ref } from "vue";
  export default {
    name: "App",
    setup() {
      const count = ref(0)
      

      return {
        count,
      };
    },
  };

    
    Vue.createApp(Counter).mount('#counter')
    </script>
    
  </body>
</html>

为什么用ref必须用ref呢？它是一个什么变量呢，忘记了

但是为什么文档上到这里这个时候还没有用到ref，到什么情况下才会开始用？

hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js中ref和$refs的使用及示例讲解
10-16
在Vue.js中，`ref`和`$refs`是两个非常重要的特性，它们允许开发者在组件内部或父组件中直接引用子组件或DOM元素。在深入讲解这两个概念之前，我们先了解一下它们的基本定义。 `ref`是一个特殊的属性，可以在模板中...
vue3自动引插件unplugin-auto-import全局引用ref、watch等（五星推荐）.md
07-14
在vue3开发中每个页面都要写这些引入ref, onMounted, onUnmounted, watch这些方法的代码，太麻烦了。 unplugin-auto-import插件可以帮我们自动引入，用什么自动引什么很方便很省心。
vue3不在手动引入import {ref} from ‘vue‘ 等 也能照样运行项目
weixin_45441173的博客
08-04 3294
vue3不在手动引入import {ref} from 'vue' 等 也能照样运行项目
vue3 中使用vite 不在需要 import {ref} from vue
qq_43806488的博客
08-31 1511
vite
3.Vue3.0-ref
qq_44316317的博客
01-06 723
Vue3.0-ref <template> <div>{{name}}</div> <div>{{gender}}</div> <button @click="change()">点击数据更改</button> </template> <script> import {ref} from 'vue' export default { name:'App', setup(){
vue3 如何避免重复引入ref reactive
m0_66051368的博客
05-20 712
config.js中进行配置。
computed怎么使用_使用 Vue 3.0，你可能不再需要 Vuex 了
weixin_39951181的博客
11-21 1518
Vuex 是一个很棒的状态管理库。它很简单，并与 Vue 集成的非常好。为什么会有人放弃 Vuex ? 原因可能是即将发布的 Vue3 版本公开了底层的响应式系统，并介绍了构建应用程序的新方法。新的响应式系统非常强大，它可以直接用于集中的状态管理。你需要状态共享吗？ 在某些情况下，多个组件之间的数据流转变得非常困难，因此需要集中的状态管理。这些情况包括:多个组件使用相同数据的组件深嵌套如...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
vue中的ref和$refs的使用
01-21
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <...
详解Vue的ref特性的使用
12-28
如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素如果用在子组件上，引用就指向组件实例 深入理解$refs 某组件的$refs含有该组件的所有ref，看下面的例子 <p ref=p>hello <child-component ref
vue 必须使用refs获取元素吗_Vue 2.0学习笔记：使用$refs访问Vue中的DOM
weixin_42407606的博客
01-17 98
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。{{ message }}点击偶let app = new Vue({el: '#app',data () {return {message: 'Hi，大漠！'}},methods: {clickedButton: func...
为什么 Vue3 的 ref 让很多大佬操碎了心？
weixin_46837985的博客
12-17 3255
作者：瑞哥来源：瑞哥聊前端最近 Vue3 关于 ref-sugar 的提案引起了广泛的讨论：juejin.im/post/689417…[1]<scriptsetup>im...
vue 中ref 的使用注意事项
weixin_30782331的博客
11-28 642
最近看别人的项目发现有些语法不能理解，所以百度进行了学习。现在总结一下。 ref 有两种用法 1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3.如何利用v-for 和ref 获取一组数组或者dom 节点 转载于:https://www....
Vue3 ref和reactive定义变量、方法
林中明月间丶
04-05 6896
https://blog.csdn.net/x413666/article/details/112173004 //在VUE3中 <div>{{num}}</div> import {ref,reactive,computed} from 'vue' //setup：因为在执行setup时还没有执行created所以不能使用data和methods，setup是处于 beforecreated和created生命周期之间的所以不能使用。
用 ref 与 不用 ref 的区别？
zsr_1010的专栏
07-26 640
 
vue的ref知识点
阿小绿的博客
06-07 218
注意：vue不推荐操作dom元素，如果想要获取数据可以使用ref ref属性可以用来获取dom的引用，它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 至于为什么不推荐操作dom（百度来了，你们看看吧） ...
关于vue的ref笔记
m0_64365338的博客
05-12 305
在vue中，程序员不需要操作DOM，只需要把数据维护好就行（数据驱动试图），强烈不建议大家在vue项目中使用Jquery操作DOM，但是如果有拿到页面上的某个DOM元素的需求怎么办？ 使用ref操作DOM 每一个vue的组件实例上，都包含了一个$refs对象，里面储存着对应的DOM元素或组件的应用，ref不仅可以用来引用DOM元素，也可以用来引用组件实例 ...
【Vue3】知识点总结
Ai-Fairy的博客
11-28 566
vue3基础知识点总结以及vue2和vue3的对比不同点
vue3-setup语法糖之如何使用ref属性
Jocelyn_书
03-07 1680
vue3-setup语法糖，使用ref()获取dom节点
vue3为什么要用ref
最新发布
07-28
- *1* *2* *3* [为什么在vue3中每个页面都需要引用ref，reactive的问题](https://blog.csdn.net/qq_42044542/article/details/129881212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值