首页 > 其他分享 >vue之hello

vue之hello

时间:2022-10-27 09:57:44浏览次数:45  
标签:el vue name 选择器 data hello

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>
            hello,{{name}}
        </h1>
    </div>
    <script type="text/javascript">
        //创建vue实例
        new Vue({
            el: '#root', //el用于指定当前vue为哪个容器服务,值通常为css选择器
            data: { //data中存储的数据供el使用
                name: "xiao bai"
            }
        });
    </script>
</body>

</html>

 

标签:el,vue,name,选择器,data,hello
From: https://www.cnblogs.com/xiaobaizitaibai/p/16831082.html

相关文章

  • 8_vue是如何进行数据代理的
    在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析建议观看之前先了解下js当中的Obejct.defineProperty()链接地......
  • vue3-setup 的参数
    setup(props,context){}第一个参数:    props,是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收,包含配置声明并传入的所有的属性的......
  • Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
    基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat。tauri-chat运用最新tauri+vue3+vite3+element-plus+v3layer等技术跨桌面端仿微信|QQ聊天程序EXE。基本实......
  • Vue的双向绑定 v-model的原理
    Vue的双向绑定v-model的原理使用V-model进行绑定v-model的效果就是用户在输入的时候实际上实在修改txtVal的值,修改成用户输入的内容<inputtype="text"v-model="txt......
  • 学习笔记——Vue
    2022-10-26Vue属性的基本操作一、绑定(1)单向绑定关键词:v-bind用法:v-bind:原属性名="数据模型的key值"例如:v-bind:href="username"(其中"username"中的说明放在“script......
  • react实战笔记136:HelloRedux的实现
     第一步创建函数 第二步设置初始值 第三布直接赋值......
  • react实战笔记137:解析redux的HelloWorld
    增加加的数据不一定直接通过参数传递 传入对象的一个数据格式 对象增加更多属性 redux的最初形态......
  • Vue 组件化编程
    1.1模块与组件、模块化与组件化1.1.1模块理解:向外提供特定功能的​​js​​​程序,一般就是一个​​js​​文件为什么:​​js​​文件很多很复杂作用:复用​​js​​​,简......
  • vue-03
    目录表单控制购物车案例v-model进阶vue生命周期与后端交互表单控制1.checkbox--单选--布尔值--如是否记住密码checkbox--多选--数组--如爱好redio--单选--字符串--......
  • 购物车与vue生命周期与后端交互
    表单控制1.<inputtype="checkbox">-多选、单选2.<inputtype="radio">-单选<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Titl......