Vue——Hello小案例以及分析

最新推荐文章于 2024-05-16 22:00:22 发布

前端小董～～～

最新推荐文章于 2024-05-16 22:00:22 发布

阅读量162

点赞数 1

分类专栏：前端 Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_53912558/article/details/128864889

版权

Vue.js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

在我们Vue安装成功后，写一个Hello小案例。先上代码：

<!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>
    <!-- 引入Vue -->
    <Script type="text/javascript" src="vue.js"></Script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
            // 创建Vue实例
        new Vue({
            el: '#root', 
            data: { 
                name: 'World!'
            }
        })
    </script>
</body>

</html>

打开浏览器：
在这里插入图片描述

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2、el是element的缩写，在Vue实例和容器之间建立一个关系，el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串；
3、data中用于存储数据，数据供el所指定的容器去使用；
4、不变的文字正常写，变化的文字交给Vue进行维护；
5、{{ xxx }}是Vue的插值语法（先这样写，后面会详细介绍），大括号里的xxx要写js表达式，且xxx可以自动读取到data中的所用属性；
6、一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。

前端小董～～～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——Hello小案例以及分析

5、{{ xxx }}是Vue的插值语法（先这样写，后面会详细介绍），大括号里的xxx要写js表达式，且xxx可以自动读取到data中的所用属性；2、el是element的缩写，在Vue实例和容器之间建立一个关系，el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串；6、一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；4、不变的文字正常写，变化的文字交给Vue进行维护；// 创建Vue实例。
复制链接

扫一扫