首页 > 其他分享 >V-Model是v-on和v-bind的语法糖,在vue中应该尽量不要看到DOM

V-Model是v-on和v-bind的语法糖,在vue中应该尽量不要看到DOM

时间:2024-09-10 21:17:12浏览次数:1  
标签:valueuser DOM bind Vue vue let message Model

以下实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    <!--
      v-model是v-bind和v-on的语法糖,可以简化模板代码,绑定数据和监听事件。
      用v-bind绑定数据和v-on监听事件同样可以实现双向数据绑定。    
    -->
         <p>内容:{{ message }}</p>
         <input type="text" id="user" v-bind:value="message" v-on:input="changeMessage">
    </div>
    <script src="vue.js"></script>
    <script>
      let vm =  new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },

            methods: {
                changeMessage: function() {
                    let valueuser=document.getElementById("user").value;
                    this.message = valueuser;
                }
            }
        }); 
    </script>
</body>
</html>

标签:valueuser,DOM,bind,Vue,vue,let,message,Model
From: https://www.cnblogs.com/zy8899/p/18407216

相关文章

  • Chapter 12 Vue CLI脚手架组件化开发
    欢迎大家订阅【Vue2+Vue3】入门到实践专栏,开启你的Vue学习之旅!文章目录前言一、项目目录结构二、组件化开发1.组件化2.Vue组件的基本结构3.依赖包less&less-loader前言组件化开发是Vue.js的核心理念之一,VueCLI为开发者提供了便捷的工具和结构来实现组......
  • vue3 内置特殊元素<slot> 与 插槽 Slots
    vue官网内置特殊元素<slot>插槽Slots<slot><slot>元素是一个插槽出口(slotoutlet),标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。Vue模板里的<slot>元素会被编译到JavaScript,因此不要与原生<slot>元素进行混淆。<slot>元素可以使用nameat......
  • 利用vue2+element ui做一个购物车的复选框多选
    @TOC......
  • Vue CLI:初学者指南与深入理解
    VueCLI:初学者指南与深入理解简介VueCLI是一个强大的工具,它帮助开发者快速搭建Vue.js项目。无论你是初学者还是有经验的开发者,VueCLI都能提供便利的功能来加快开发流程。本文将带你从安装VueCLI开始,逐步创建一个简单的Vue应用,并深入理解其背后的一些核心概念。......
  • vue3快速上手和基本特性
    1)vue使用方式1)cdn方式    该方式无需使用包管理工具,只要用script标签引入js文件即可,可以快速使用vue<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>2)创建vue项目    创建vue项目时需要nodejs环境,安装好nodejs后先为nodejs换一个国......
  • 初学者指南:掌握 Vue 路由(Router)
    初学者指南:掌握Vue路由(Router)在现代前端开发中,单页面应用(SPA)越来越受欢迎,而Vue.js是构建SPA的热门选择之一。在Vue应用中,路由管理是实现页面导航的关键。本文将带你一步步了解如何在Vue应用中使用路由。什么是路由?在Web应用中,路由是URL到页面内容的映射。......
  • vue基本语法
    上文1)innerText和innerHTML属性的绑定    使用v-text和v-html标签<divid="app"><pv-text="link1"></p><pv-html="link2"></p></div><script>const{create......
  • 【卷起来】VUE3.0教程-05-侦听器
    =========各位看官,在开始学习之前,请帮我点个关注和赞吧========== ......
  • 工作日志:从零搭建vue3+ts+sass项目(3)
    折腾了两天后,发现elementPlus的代码都是ts的,本来不想现在用ts,因为非常不熟悉,但长痛不如短痛,重开项目!直接vue3+vite+ts+sass!让暴风雨来得更猛烈一下吧!我差那几个bug吗?1、执行命令如下:npmcreatevite@latestnpminstallnpminstallsass-Dnpmivue-router2、在src下......
  • 【学习】【Svelte】新一代前端框架Svelte会不会成为一地鸡毛呢?居然打破常规抛弃掉虚拟
    原创前端欧巴原本以为是Agular、React和Vue三足鼎立的前端框架新时代,居然有那么几个国外的前端框架在默默地攻城略地,比如:Svelte、Solid等前端框架。今天我们重点来说一说Svelte这个前端框架。一、Svelte的发展史1.1初创与实验阶段(2016-2017)诞生背景:Svelte最初由RichHa......