前端学习——VUE初见

文章目录

  • 示例:helloworld
    • 示例解析
      • 1. html文件
        • 1.1 基本结构
        • 1.2 meta标签
        • 1.3 script标签
        • 1.4 var app = new Vue
  • 名词解释
    • 1. 渐进式框架
    • 2. index.vue
    • 3. 命令行工具 (CLI)、脚手架

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文件一样,分为headbody两部分,头部标签一般并非页面显示的内容,body标签则一般包含页面现实的具体内容

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

1.2 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

你可能感兴趣的:(前端)