1.2 初识Vue

1.2 初识Vue

1.2.1 引入js文件

进入官网——安装文档https://cn.vuejs.org/v2/guide/installation.html

image-20210704091313152

根据自己的需求，选择开发版本或是生产版本下载。

 

官网明确指出，如果对于制作原型或学习需要，你可以这样使用cdn来使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

 

1.2.2 初识

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
</head>
<body>
    <div id="root">
        <h1>Hello, World!</h1>
    </div>
</body>
</html>
复制代码

 

　　这样的代码我们已经十分熟悉了。为了能让Hello, World!输出可以动态变化，我们引入vue

 

　　首先引入刚刚下载好的vue.js

<script type="text/javascript" src="../js/vue.js"></script>

　　这样我们就会获得一个Vue实例，那么我们创建一个Vue实例并进行配置。

复制代码
<script type="text/javascript">
    // 创建一个Vue的实例对象，并传入配置对象
    new Vue({
    el: '#root', // 用于指定当前vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于JQuery
        data: { // data是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state
            name: 'Vue'
        }
    })
</script>
复制代码

 

　　根据vue的语法规则，使用双大括号来输出需要的变量。我们这里定义了一个名为name的变量，其值为vue。那么我们使用{{name}}来输出其值vue。

<div id="root">
    <h1>Hello, {{name}}</h1>
</div>

 

1.2.3 小结

  • ​<div id="root">是一个容器，容器中写的不是原始html代码，而是vue的模板代码。
    ​

  • 所谓模板代码，类似于React中的jsx，是html+js的混合体。

  • {{xxx}} xxx会自动读取data中的xxx属性

posted @   Gazikel  阅读(27)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
历史上的今天：
2020-07-16 Java日志第11天 2020.7.16
点击右上角即可分享
微信分享提示
AI IDE Trae