Vue学习之快速入门（一）

必备知识

1.前端三剑客（html+css+js）

HTML：负责页面的结构(标签)
CSS：负责页面的渲染(样式)
JavaScript：负责页面的行为(交互)

在vue之前，需要学习HTML，CSS，JavaScript

2.JavaScript中的导入导出机制

优点

可以更具需求，进行导入。即：按需导入

实际操作

用法一

JS文件中

1.1、单个导出

export function complex(msg){

  console.log(new Date() +": "+ msg)

}

1.2、批量导出

function simple(msg){
    console.log(msg)
}

function complex(msg){
    console.log(new Date() +": "+ msg)
}

export {simple,complex}

html文件中

<div id="app">
    <button id="btn">点击按钮</button>
</div>

<script type="module">
    import {complex} from './show.js'
    document.getElementById("btn").onclick=function(){
        complex('我被点击了')
    }
</script>

用法二

三、默认导出

js文件中

function simple(msg){
    console.log(msg)
}

function complex(msg){
    console.log(new Date() +": "+ msg)
}

export default{simple,complex}

html文件中

<div id="app">
    <button id="btn">点击按钮</button>
</div>

<script type="module">
    import show from './show.js'
    document.getElementById("btn").onclick=function(){
        show.simple('我被点击了')
        show.complex('我被点击了')
    }
</script>

Vue3快速入门

步骤

准备工作：
	1.准备html页面，并引入Vue模块（官网）
	2.创建Vue应用实例
	3.准备元素，使其被vue控制(控制页面元素)
正式工作：
	4.数据提供
	5.通过插值表达式渲染页面

实际操作

<!-- 3.准备元素 -->
<div id="app">
	<!-- 5.插值表达式渲染页面 -->
    <h1>{{ msg }}</h1>
</div>

<!-- 1.引入vue模块 -->
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    
    // 2.创建vue应用实例
    createApp({
        data(){
            return {
                // 4.数据提供
                msg: 'hello world,i am vue3'
            }
        }
    }).mount("#app"); // 控制页面元素
</script>

效果展示

补充知识

1.1差值表达式

作用：利用 表达式 进行插值渲染
语法：

{{ 表达式 }}

注意点

1.使用的数据要存在（在Vue实例的data中存在此数据）
2.支持的是表达式，不是语句 if for...
3.不能在标签属性中使用 {{ }}

案例

<div>{{ name+'先生' }}</div>
<p>{{ friend.name }}</p>
<p>{{ age>=18 ? '成年' : '未成年' }}</p>
<p>{{ age }}</p>

2.2 Vue特性：响应式处理

何为响应式？

data中数据变化时，视图会自动更新

原理

当数据改变时，Vue会自动监听到数据的变化，内部通过Dom操作，更新视图

如何访问及修改数据操作？

1.访问数据：实例.属性名

   案例：app.name

2.修改数据：实例.属性名 = 值

   案例：app.name = 'tom'