Vue3的前置知识点及其基础方法

无语-葬欧

已于 2024-08-27 19:30:27 修改

阅读量212

点赞数 4

分类专栏： vue简易学习文章标签：开发语言 vue

于 2024-08-26 20:49:57 首次发布

本文链接：https://blog.csdn.net/m0_71733565/article/details/141572623

版权

vue简易学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

HTML：负责网页的结构（标签: form/table/a/div/span）。

CSS：负责网页的表现（样式: color/font/background/width/height）。

JavaScript：负责网页的行为（交互效果）。

知识点1：JavaScript-导入导出

JS提供的导入导出机制,可以实现按需导入

导出类型1：

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

<body>
    <div>
        <button id="btn" >点我展示信息</button>
    </div>
    <!-- 导入showMessage.js文件的全部内容 -->
    <script src="showMessage.js"></script>
    
    <script>
        document.getElementById("btn").onclick = function(){
            complexMessage('bbbbb');
        }
    </script>
</body>

导出类型2，逐个导出：

//简单的展示信息
export function simpleMessage(msg){
    console.log(msg)
}
//复杂的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

导出类型3，分组导出：

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export {simpleMessage,complexMessage}

2,3的导入方法一致：

<body>
    <div>
        <button id="btn" >点我展示信息</button>
    </div>

    <script type="module">
        import { complexMessage } from './showMessage.js'
        
        document.getElementById("btn").onclick = function(){
            complexMessage('bbbbb');
        }
    </script>
</body>

导出类型4，默认导出：

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export default {simpleMessage,complexMessage}

<body>
    <div>
        <button id="btn" >点我展示信息</button>
    </div>

    <script type="module">
        import messageMethods from './showMessage.js’


        messageMethods.simpleMessage('aaa');
        messageMethods.complexMessage('bbb');
    </script>
</body>

知识点2：Vue

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/）

快速入门

准备

准备html页面,并引入Vue模块（官方提供）
创建Vue程序的应用实例准备元素(div)，
被Vue控制

构建用户界面

准备数据
通过插值表达式渲染页面

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模块 -->
     <script type="module">
        import {createApp}from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        // 创建vue的应用实例
        createApp(
            {
                data() {
                    return {
                        //定义数据
                        msg: 'hello vue3'
                    }
                },
            }
        ).mount("#app")
     </script>
</body>