vue基础到入门
1简介
2020年9月18日，
Vue.js发布版3.0版本，代号：One Piece（海贼王)
2Vue是什么
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
JavaScript 框架 == js代码
用户界面==网页
vue == 用js代码写网页
3下载Vue.js
常规js语法: https://unpkg.com/vue@3/dist/vue.global.js
模块化语法: https://unpkg.com/vue@3/dist/vue.esm-browser.js4怎么用
创建Vue对象
步骤1:引入vue.js
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
步骤2 获取Vue对象
let Vue = createApp( { } );面向对象中对象由属性和方法组成, Vue对象的属性和方法已经由官方定义完毕,我们只需要用即可
因此 学习Vue就是学习这个对象由哪些属性和方法,以及这些属性和方法的用法和作用createApp( {} ) ,此方法需要传入一个对象作为参数,这个作为参数的对象就是学习的重点这个作为参数的对象 {} ,它的属性和方法就是Vue的属性和方法
步骤3 在body标签中添加子标签 , 一定要给这个标签定义个id属性
<div id="app"></div>步骤4 将Vue对象这这个div标签绑定(通过id值)
Vue.mount("#app")核心完整代码
<body>
<!-- 定义标签id -->
<div id="app">
<!-- 接收vue数据打印到页面({{}}插值表达式，只能写在标签中间) -->
<h1>年龄： {{persons[0].age}}</h1>
<h1>姓名： {{persons[0].name}}</h1>
<a :href="href">淘宝网址</a>
<br>
<a v-bind:href="href">淘宝网址</a>
<!-- 双向绑定 -->
<input type="text"v-model="href">
</div>
<Script type="module">
//创建vue实例
// ref：让数据实时改变
import { createApp, ref } from './Js/vue.esm-browser.js'
console.log(createApp());
console.log(ref());
const vue=createApp({
// 只要绑定成功就会调用此函数，所有数据都定义在setup中
setup() {
let person1={name:"李四",age:23}
let person2={name:"王五",age:24}
let persons=[person1,person2]
let href=ref("http://www.taobao.com");
// 返回vue数据(返回的数据都是对象)
return {persons,href};
}
});
// 绑定html标签
vue.mount('#app');
</Script>
</body>5createApp( {这个对象就是要学习的内容} )
对象由属性和方法组成 , 所以接下来该记了 一定要记住这些属性 一个字母都不能错学习的第一属性 setup 值为一个函数 : { setup:function(){} }
Es6语法:匿名函数可以简化写法 将冒号和关键字 :function 省略{ setup:function(){} } 简化写为 { setup(){}}
setup属性值为一个函数,这个函数在执行完毕Vue.mount("#app")后自动被调用。
6数据展示 , 在标签中展示Vue中定义的变量
<body>
<div id="app">{{mes}}</div>
<script type="module">
import { createApp,ref } from "../vue.esm-browser.js";
let vue = createApp({
setup: function () {
const mes = "hello Vue!"
return { mes }
},
});
vue.mount("#app");
</script>
</body>7模板语法
Vue 使用一种基于 HTML 的模板语法，使我们能够将其组件实例的数据绑定到呈现的html标签上。vue对象和对应的标签绑定后,在标签中就可以使用这个vue对象中定义的数据。
7.1 最基本的数据绑定形式是文本插值 语法为: {{ 数据名 }}
7.2 vue指令语法 ,指令是作为html标签的 属性 来书写的 语法为 : v-xxx = "数据名"
7.2 v-html = "mes" 修改标签中间的文本内容为数据mes的数据
v-bind 单向绑定解析表达式，可简写为:
v-model 双向数据绑定
v-for 遍历数组 / 对象 / 字符串
v-on 绑定事件监听，可简写为@
v-show 条件渲染 (动态控制节点是否展示)
v-if 条件渲染（动态控制节点是否存存在）
v-else-if 条件渲染（动态控制节点是否存存在）
v-else 条件渲染（动态控制节点是否存存在）8事件处理
事件的基本用法
1使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
2事件的回调需要配置在methods对象中，最终会在vm上
3methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
4methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
5@click="demo"和@click="demo($event)"效果一致，但后者可以传参事件修饰符
`.stop`<!-- 单击事件将停止传递 -->
`.prevent `<!-- 提交事件将不再重新加载页面 -->9生命周期钩子函数
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。总结: 在创建Vue对象时需要执行很多代码 , 在这个过程中,会按照顺序 自动调用 一些定义好的函数 , 这些函数就叫做生命周期钩子函数。
<script setup>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted } from 'vue';
//在组件被挂载到绑定的标签上之前调用。
onBeforeMount(() => {
// 在组件挂载前加载数据
});
//当组件被挂载到 绑定的标签上 后调用。这是执行异步操作或初始化事件监听器的好地方。
onMounted(() => {
// 执行方法 记住这个即可,常用
});
//在组件开始更新之前调用。
onBeforeUpdate(() => {
// 执行方法
});
//当组件完成更新后调用。这个钩子在服务器端渲染期间不被调用。
onUpdated(() => {
// 组件更新后执行的代码
});
//在组件被卸载并从DOM中移除之前调用。
onBeforeUnmount(() => {
// 在组件卸载前停止计数
});
//这是清除定时器、事件监听器等资源的好时机。
onUnmounted(() => {
// 当组件卸载时执行 当组件被卸载并从DOM中移除时调用。
});
</script>