Vue3笔记（2021-11-10）

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量1.5k 收藏 16
点赞数 9
分类专栏： VUE3.0 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Clience01/article/details/121242724
版权

1.mount

使用mount(‘hello-vue’)将Vue应用HelloVueApp挂载到 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div  id="hello-vue" class="demo">
        {{message}}
    </div>

    <script>
        const HelloVueApp={
            data(){
                return{
                    message:'Hello Vue!' 
                }
            }
        }
        Vue.createApp(HelloVueApp).mount("#hello-vue")
        // 以上代码使用mount('hello-vue')将Vue应用HelloVueApp挂载到 <div  id="hello-vue" class="demo"></div>
    </script>
</body>
</html>

2.data选项

函数，vue在创建新的组件实例的过程中调用此函数，它应该返回一个对象，然后通过vue会通过响应系统将其包裹起来，并以$data的形式存储在组件实例中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div  id="app" class="demo"></div>

    <script>
        const app=Vue.createApp({
            data(){
                return{
                    count:4 
                }
            }
        })
        const vm=app.mount("#app")

        document.write(vm.$data.count);
        document.write("<br>")
        document.write(vm.count);
        document.write("<br>");
        vm.count=5;
        document.write(vm.$data.count)
        document.write("<br>")
        vm.$data.count=6;
        document.write(vm.count)

    </script>
</body>
</html>

3.方法 methods

给组件添加方法，使用methods选项，该选项包含了所需要方法的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div  id="app" class="demo"></div>

    <script>
        const app=Vue.createApp({
            data(){
                return{
                    count:4 
                }
            },
            methods:{
                increment(){
                    // this指向该组件实例
                    this.count++;
                }
            }
        })
        const vm=app.mount("#app")

     
        document.write(vm.count);
        document.write("<br>");
      
        vm.increment();
        document.write(vm.count);
    </script>
</body>
</html>

4.语法

1.最常见的插值是{{message}}（双大括号），message属性发生变化，标签内容也会变化
tip:如果不想改变标签内容，可以用v-once

<span v-once>这个将不会改变：{{message}}</span>

2.Html：v-html指令用于输出html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div  id="example1" class="demo">
        <p>使用双大括号的文本插值:{{rawHtml}}</p>
        <p>使用v-html指令:<span v-html="rawHtml"></span></span></p>
    </div>

    <script>
        const RenderHtmlApp={
            data(){
                return{
                    rawHtml:'<span style="color:red">这里会显示红色！</span>'
                }
            }
        }
        Vue.createApp(RenderHtmlApp).mount("#example1");
    </script>
</body>
</html>

5. v-bind指令

对于布尔属性，常规值为true或false，如果属性值为null或者undefined，则该属性不会显示出来
该例子判断use的值，如果为true使用class1类样式，否则不使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .class1{
            background: #444;
            color: #eee;
        }
    </style>
</head>
<body>
   <div id="app">
     <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
     <br><br>
     <div v-bind:class="{'class1':use}">
         v-bind:class指令
     </div>


   </div>
    <script>
       const app={
           data(){
               return{
                   use:false
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

6.v-if

指令用于表达式的值改变时，将某些行为应用到DOM上
如下：v-if指令将根据表达式seen的值（true或者false）来决定是是否插入p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   <div id="app">
   <p v-if="seen">现在你看到我了</p>
   </div>
    <script>
       const app={
           data(){
               return{
                seen:true//改为false，信息就无法显示
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

7.v-for指令

可以绑定数组的数据来渲染一个项目列表，遍历数组下的所指的site

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   <div id="app">
  <ol>
      <li v-for="site in sites">
          {{site.text}}
      </li>
  </ol>
   </div>
    <script>
       const app={
           data(){
               return{
                sites:[
                    { text:'Google'},
                    { text:'Runoob'},
                    { text:'Taobao'},
                 ]
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

8.参数用冒号（：）指明

这里的href是参数，被告知指令将该元素的href属性与表达式url的值绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   <div id="app">
  <p> <a v-bind:href="url">淘宝</a></p>
   </div>
    <script>
       const app={
           data(){
               return{
                url:'http://www.taobao.com'
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

9.v-on简写@

监听DOM事件

事件正常简写
单击v-on:click=""@click=""
进入v-on: mouseenter=""@mouseenter=""
双击v-on:dbclick=""@dbclick=""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   <div id="app">
  <input type="button" value="v-on单击指令" v-on:click="doIt">
  <h2 @click="changeFood">{{food}}</h2>
   </div>
    <script>
       const app={
           data(){
            return{
                food:"酸辣粉"
            }             
           },
           methods:{
               doIt:function(){
                   alert("doIt");
               },
               changeFood:function(){
                   console.log(this.food);
                   this.food +="真好吃！"
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

10 v-model双向数据绑定

（input,select,textarea,checkbox,radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   <div id="app">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">反转字符串</button>
   </div>
    <script>
       const app={
           data(){
            return{
                message:'Runoob!'
            }             
           },
           methods:{
            reverseMessage(){
                   this.message=this.message
                   .split('')
                   .reverse()
                   .join('')
               }
           }
       }
       Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

tip

两个缩写：

 <button v-on:click="reverseMessage">反转字符串</button>
 //等价于
  <button @click="reverseMessage">反转字符串</button>

 <p> <a v-bind:href="url">淘宝</a></p>
 //等价于
  <p> <a :href="url">淘宝</a></p>
Clience01
关注
  • 9
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 记事本笔记
m0_73495603的博客
09-26 694
记事本笔记
本项目是基于Vuepress框架 Vuepress-theme-hope主题搭建的一个个人学习笔记文档站点，项目内记.zip
02-23
8. `kwan1117`：这个文件或目录可能是作者的学习笔记，具体内容可能包括 JavaScript、前端开发、Vue.js、Vuepress 使用教程、项目经验分享等。 通过这个项目，我们可以学习到如何使用 Vuepress 构建个人知识库，...
vue的双击事件(dbclick的使用)
weixin_52153452的博客
11-10 2万+
vue双击事件的使用以及input输入框的自动聚焦
详解Vue3中的鼠标事件click和dblclick
一起学习
12-31 7694
本文主要介绍Vue3中的常见鼠标事件。
解决:Vue @dbclick双击事件不起作用、v-on:dbclick双击事件不起作用的问题
热门推荐
李平的博客
03-22 5万+
dbclick 改为dblclick即可: 实例代码： <div id="app"> <p>马云的年龄:{{age}}岁</p> <input type="button" @dblclick='reduce(10)' value="减少10岁"> <input type="button" @dblclick='increase(10)' value="增加10岁"> </div> <script src="vu
Vue3组件通信方式
weixin_44725351的博客
06-03 327
在vue框架中事件分为两种：一种是原生的DOM事件，另外一种是自定义事件；所谓的原生dom事件即可以让用户与网页进行交互，比如click、dbclick、change、mouseleave......自定义事件即可以实现子组件给父组件传递数据。利用方法返回函数触发自定义事件。defineEmits方法不需要引入直接使用。持续更新中...
vue3资源笔记-助你快速上手vue3
11-05
个人总结的vue3的笔记，结合vue2进行对比 高效进行学习 助你快速上手vue3 里面包含了一些重要的api 包括reactive 头Raw等等 以及ref在vue3中的使用 和vue2相比做出了巨大的改变 一些新的组件如Teleport Suspense ....
vue学习笔记--axios发请求的笔记
09-21
axios学习发请求、vue脚手架学习
vue3-LanQiao-Cup-Provin笔记
08-19
vue3
Vue3总结（持续更新）
Caoqingqing521的博客
04-19 2891
属性的简写：：当属性名和值的变量名相同时，触发对象的属性简写let name = ‘张三’;export:规定模块的对外接口，如果希望外部能够获取模块内的某个变量/函数/类，就必须在模块中使用export输出该变量/函数/类。原理：异步执行，当接口请求后，可以去做其他事情，等接口返回成功再渲染页面，接口返回失败也会有相应的提示。export default：每个模块【只能够使用一次】，可以导出变量，常量，函数，类，匿名函数。是一个只读的常量，声明时，必须赋初值，一旦声明，栈值就不能改变，
vue之自定义指令
john的博客
07-24 81
比如需要定义一个input框，当页面加载完成自动聚焦 可以通过 ref属性 const app = Vue.createApp({ data(){ return{ message:'hello world' } }, mounted(){ this.$refs.input.focus()
Vue中 数据，方法，计算属性和侦听器
qq_52207728的博客
06-01 222
数据： Vue中数据就是data(){}里面的东西 方法： Vue中方法就是methods 注意：methods里面的this指向的就是vue的实例（仅限于methods里面普通函数的this） const app = Vue.createApp({ data(){ return { message:1 } }, me
Vue中的双击事件 @dblclick=" " v-on:dblclick=" "
gyueh的博客
11-26 1万+
目的：双击按钮显示相应内容 @dblclick=“事件名” html部分代码如下所示： <button class="btn btn-default" data-toggle="modal" @dblclick="copyText()">登录</button> <div id="modalget"> </div> js部分代码如下所示： d...
Vue模拟双击事件dblclick
Suk__的博客
02-27 1859
通过点击次数或者时间戳实现都行: 判断条件:在300秒内有两次连续单击事件触发就是双击,否则就是单击 export default { data () { return { clickCount: 0, time: 0 } }, methods: { dblclick () { //使用点击次数实现,如果双击了就重置计数器进入下一次双击判断 // this.clickCount++ // if (this.
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法
Hassanh的博客
03-02 5441
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法 解决办法 vue 有时 双击 dblclick native 有时vue项目中无论是v-ondblclick；还是@dblclick ，有时会无效果。解决办法直接上代码自己看。 .native主要用于监听组件根元素的原生事件 @dblclick.native= 可完美解决dblclick 有时无效问题 <div class="grid-content"> <el-button
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 527
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
vue中slots插槽的使用
2403_86834756的博客
09-04 671
4.在Dome2中写入的代码与Dome1相似但里面的内容不一样，当我们启动不同页面时显示的是启动页面的数据，xxm-layout只是作为一个引用的页面当不同的页面用时显示不同的数据，就是说它的框架是固定的只需要为其传入值就行了。3.当我们有多个slot时就需要为其添加名称，否则编译器不知道因该为哪一个添加，就会出现有slot的地方都添加了数据，当我们为其添加名称后在子类中也需要通过名称为其写入数据。可以看到我们写入的数据在中间插槽处显示，并且头部和尾部相继显示在上下处。
Vue进阶：vue-router安装与基本使用指南
"Vue学习笔记进阶篇之vue-router安装及使用方法，介绍vue-router作为Vue.js官方的路由插件，用于构建单页面应用，通过路由和组件实现页面切换。安装vue-router需在项目目录中运行`npm install vue-router --save`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值