Vue-----Vue基础简介篇

李奕赫揍小邰

已于 2022-03-30 12:21:54 修改

阅读量906

点赞数 5

分类专栏： Vue学习文章标签： java web vue

于 2022-03-30 11:06:36 首次发布

本文链接：https://blog.csdn.net/weixin_54217216/article/details/123840373

版权

Vue学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

一、Vue简介
二、Vue基础
- 1.Vue中属性介绍
- 2.Vue基础的代码实现（Hello Vue!为例）
总结

一、Vue简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

首先我们可以进入Vue的官网，他上面有很多值得我们学习的地方
https://cn.vuejs.org/v2/guide/

然后需要在我们写的html文件中先导入开发版本的Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

二、Vue基础

1.Vue中属性介绍

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>

el挂载点
el是用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素极其内部的后代元素
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用ID选择器
是否可以设置其他的demo元素呢？
可以使用其他的双标签，不能使用HTML和BODY

data:数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

2.Vue基础的代码实现（Hello Vue!为例）

1、el:对应div中的id属性，只有这个对应上vue才能起作用
2、data相当于定义数据类型，
3、{{ }}是vue中的用法，里面的数据对应data的数据。可以显示出来

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>

<div id="app">
    {{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</body>
</html>