Vue.js Hello Word 入门操作

素颜马尾好姑娘i 2023-03-13 13:53 13阅读 0赞

###  Vue 入门步骤： ###

1、提供标签用于填充数据  
2、引入vue.js库文件  
3.使用vue语法 做功能  
4、把Vue提供的数据填充到标签

### 特殊字符参数分析： ###

<div>{ {msg}}</div> //双括号为插值表达式  作用是将数据填充到HTML标签中 支持基本的计算操作如{
      {1 + 2}}

el: '#app', //选择id为app的容器 (元素挂载的位置)

data:{
        msg: 'Hello Word'//模型数据 （值是一个对象）
    }

**hello word案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="app">
    <div>{
       {msg}}</div> //双括号为插值表达式  作用是将数据填充到HTML标签中 支持基本的计算操作如{
       {1 + 2}}
    
    </div>
    
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /* Vue 入门步骤：
        1、提供标签用于填充数据
        2、引入vue.js库文件
        3.使用vue语法 做功能
        4、把Vue提供的数据填充到标签
        */
    
        var vm = new Vue({
                el: '#app', //选择id为app的容器 (元素挂载的位置)
                data:{
                    msg: 'Hello Word'//模型数据 （值是一个对象）
                }
    
        });
    
    </script>
    
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python编程从入门到实践【1】-- Hello Word

> 不容错过的成长之旅 ![562cfef8bf0645f29611152e694db016.jpeg][] Python是什么！！！ Python是一种跨平台的计算机程

桃扇骨/ 2024年03月22日 09:12/ 0 赞/ 58 阅读

相关 Netty概述及Hello word入门

目录概述 Netty是什么 Netty的地位 Netty的优势 HelloWord入门程序目标 pom依赖服务器端客户端运行结果入门把

桃扇骨/ 2023年10月10日 23:44/ 0 赞/ 17 阅读

相关 flask入门——hello Word

先加载flask库 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

我就是我/ 2023年07月11日 08:54/ 0 赞/ 54 阅读

相关 Vue.js Hello Word 入门操作

Vue 入门步骤： 1、提供标签用于填充数据 2、引入vue.js库文件 3.使用vue语法做功能 4、把Vue提供的数据填充到标签特殊字符

素颜马尾好姑娘i/ 2023年03月13日 13:53/ 0 赞/ 14 阅读

相关 ELK入门使用之 Hello Word（三）

今天和大家分享ELK正式入门使用：一、创建索引： 1、启动ES和Kibana，操作kibana ![watermark_type_ZmFuZ3poZW5naGVpdG

た入场券/ 2022年12月13日 04:54/ 0 赞/ 141 阅读

相关 hello word

建立一个文件夹建立个java文件后缀是.java Hellow.java java是大小写敏感的文件的名字和class后面的名字要一致都是在英文状态

迷南。/ 2022年10月29日 11:27/ 0 赞/ 141 阅读

相关 hello word

试一试看能不能发表 public void byIdDbSource(Map paraMap) { this.setSqlId("

比眉伴天荒/ 2022年08月11日 06:59/ 0 赞/ 170 阅读

相关 laravel和vuejs第一个最简单的示例hello Vuejs

纯laravel和vuejs：第一个最简单的示例如果你到网上搜索laravel+vuejs，大部分情况下你会得到一堆如何用nodejs，webpack, babel,

淩亂°似流年/ 2022年06月03日 04:09/ 0 赞/ 254 阅读

相关作业001——Hello word!

![这里写图片描述][70] 咳咳＞＜我在这里 [70]: /images/20220514/dffb6cbe085f456ebc55bf1afffeca7f.png

怼烎@/ 2022年05月14日 06:20/ 0 赞/ 118 阅读

相关 SSM 实训笔记 -03- Spring入门实例- Hello Word！

SSM 实训笔记 -03- Spring入门实例- Hello Word！步骤：（1）新建项目，参考 [SSM 实训笔记 -01- Junit 单元测试][SSM

分手后的思念是犯贱/ 2022年03月31日 08:07/ 0 赞/ 263 阅读