vue学习笔记一：引包，留坑,实例化

最新推荐文章于 2023-02-20 17:50:51 发布

INAGIML

最新推荐文章于 2023-02-20 17:50:51 发布

阅读量345

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_45283247/article/details/104600779

版权

Vue学习笔记一：引包，留坑，实例化

Vue版本：2.5.21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--一。留坑：可以使用node下载包，然后执行命令 npm install vue（npm太慢使用淘宝镜像cnpm，
    如需下载自己要的版本在vue后加上@版本号） -->
    <!-- 引入刚下载的包 -->
    <script src="vue.js"></script>
</head>
<body>

    <!-- 二。留坑，既留一个vue模板插入的地方或是vue代码对其生效的地方 -->
    <div id="app"></div>
   
    <script>
        new Vue({
            el:"#app",
            template:
            `
            <div>
                <div> this is vue demo!{{msg}}</div>
                <div> just do it !</div>
            </div>
            `,
            data:{
                msg:'hello vue!'
            }
        })
    </script>
<!-- 
    三。实例化，既启动vue
    启动：new Vue({
        el:目的地,
        template:模板,    
    })实例化传入的是一个对象opitions
    options
      1.目的地el对应上面留坑的位置，可通过id，类名，标签名，来查找，方式和JQ一样
      2.内容template *例如`<div> this is vue demo!{{msg}}</div>`,
      ！！注意template下只能有一个根节点，否则会报错！！
      3.数据data值为函数形式也可是对象，但是都是使用函数因为用的函数也是return一个对象。

   四。 插值表达式{{}}
      插值表达式内填入data里面的变量即可在页面取到变量值{{data里的变量}}
    -->
</body>
</html>

效果

在这里插入图片描述

INAGIML

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记一：引包，留坑,实例化

Document <div id="app"></div><script> new Vue({ el:"#app", template: `...
复制链接

扫一扫