vue3基础-一一网

一 Vue3基础

1 createApp()和mount()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({})
    app.mount("#app")
</script>
</html>
复制代码

createApp()创建一个Vue的实例。
- 它接受一个对象形式的参数{}。
- 这个对象就是告诉Vue应该如何展现我们最外层的组件。
mount()挂载到某个html的DOM节点上。
- 如何获取Vue的根组件vm?——const vm = app.mount(“#app”);console.log(vm);

2 生命周期钩子

2021-06-17_163225_看图王.png

3 插值表达式和v-bind动态赋值

插值表达式：也叫字面量，用来展示在data中定义的数据。使用：{{xxxx}}，支持js表达式
v-bind指令：用来处理html标签的动态属性，即动态赋值。

<img v-bind:src="https://juejin.cn/post/imgSrc" /> // 常规写法
<img :src="https://juejin.cn/post/imgSrc" /> // 缩写
return {    
    imgSrc:'http://liangxinghua.com/img/87.png'
}
复制代码

4 模板动态参数和阻止默认事件

v-on指令：v-on是用来绑定响应事件的。
模板动态参数：也叫动态属性，使用：[]方括号加上data中变量名的形式。
事件动态绑定：使用：[]方括号加上data中变量名的形式。

<h2 :title="message">{{message}}</h2>
<h2 :[name]="message">{{message}}</h2> // [name]模板动态参数
<button v-on:click="hanldClick">绑定事件</button> // 常规写法
<button @:click="hanldClick">绑定事件</button> // 缩写
<button @[event]="hanldClick">绑定事件</button> // [event]事件动态绑定
data(){
    return{
        message:'这是一个提示信息' ,
        name:'title',
        event:'click',
    }
},
methods:{
    hanldClick(){ 
        alert('欢迎光临红浪漫')
    }
},
复制代码

阻止默认事件

最常见的就是表单的默认提交事件：调用e.preventDefault()。
更好的方式是使用事件修饰符直接可以阻止默认行为.prevent

<form action="https://jspang.com" @click="hanldeButton">
    <button type="submit">默认提交</button>
</form>
methods:{
    hanldeButton(e){
        e.preventDefault()
    },
},
<form @submit.prevent="onSubmit"></form> // 提交事件不再重载页面
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端