前端学习——VUE初见

最新推荐文章于 2022-12-02 20:51:16 发布

Wby_Nju

最新推荐文章于 2022-12-02 20:51:16 发布

阅读量179

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wby_nju/article/details/104124382

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

文章目录

示例：helloworld
- 示例解析
- - 1. html文件
名词解释

vue介绍

示例：helloworld

index.html文件


<html>
    <head>
    	<meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            {{ message }}
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

index.css文件

html, body {
    margin: 5px;
    padding: 0;
}

index.js文件

var app = new Vue({ 
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

app.message = "你好哇，李银河"

示例解析

1. html文件

1.1 基本结构

就像所有html文件一样，分为head和body两部分，头部标签一般并非页面显示的内容，body标签则一般包含页面现实的具体内容

<html>
    <head>...</head>
    <body>...</body>
</html>

1.2 meta标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
这里的用法是设定网页字符集，便于浏览器解析与渲染页面，mata标签的详细用法指南

1.3 script标签

script 写在body和head中的区别：
head部分中的JavaScripts会在被调用的时候才执行。

body部分中的JavaScripts会在页面加载的时候被执行，放在body部分的脚本通常被用来生成页面的内容。

body 和 head 部分可同时有脚本:你可在文件中放无数的脚本，因此你的文件中可以在body和head部分同时存在脚本。‘

1.4 var app = new Vue

引入vue.js文件之后，会暴露一个全局函数Vue()，我们通过这个函数可以完成后续操作。参考视频3分10秒

名词解释

1. 渐进式框架

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

2. index.vue

index.vue是vue的单文件组件的应用时，创建的文件名。类似与.html

3. 命令行工具 (CLI)、脚手架

cli

Wby_Nju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——VUE初见

文章目录示例：helloworld示例解析示例：helloworldindex.html文件<meta charset="utf-8"><html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.j...
复制链接

扫一扫