2.Vue基础

介绍

Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用（只有一个html页面，而且这个页面中只有一个div）。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

作者：尤雨溪（华裔前Google工程师，目前在阿里巴巴上班）

英文站点：https://vuejs.org/

官方网站：https://v3.vuejs.org/

中文文档: https://v3.cn.vuejs.org/guide/introduction.html

VSCode插件

idea插件：Vue.js

快速开始

通过Vue.createApp()方法来创建Vue实例，并且通过mount()进行挂载，将Vue与指定的DOM元素绑定；mount()就是一个vue实例挂载到一个DOM中；

<body>
<div id="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.37/vue.global.js"></script>
<script>
    // console.log(Vue.createApp)
    // 定义配置项
    const Options ={
        // 定义数据模型
        data(){
            // 返回数据模型的值
            return {
                message:'vue 真好玩'
            }
        }
    }
    Vue.createApp(Options).mount('#app')
</script>
</body>

#app ：指定了绑定DOM（文档对象模型），接管DOM操作(虚拟DOM)；

data()：初始化数据，这里的data()必须是方法，页面可以直接访问；(数据模型)

v-model :（给标签绑定数据）重点可以实现数据”双向绑定”，改变了这里的值，其他地方也一起改变；

{{xxxxx}} ：显示数据，插值表达式；

当vue和dom绑定之后，所有内容都是反应性的

<div id="app">
    <p>{{counter}}</p>
</div>
<!-- type 值必须是 module  模块化引入 -->
<script type="module">
    import {createApp} from "https://cdn.bootcdn.net/ajax/libs/vue/3.4.37/vue.esm-browser.js"
    // 定义配置项
    const Options = {
        data(){
            return {
                counter:0
            }
        }
        // mounted() 是vue生命周期中钩子函数之一 表示挂在完成后立刻执行
        ,mounted(){
            // 循环定时器
            setInterval(()=>{   // 此处必须使用箭头函数
                // console.log(this.counter++)
                this.counter++;
            },1000)
        }

    }
    createApp(Options).mount("#app")
</script>

核心原理mvvm

这里核心就是 ViewModel 里面有DOM监听以及数据绑定，View是页面数据展示 Model也就是前面data里定义的，通过Vue来实现各种快捷功能，我们用普通js写的话得写一大串Js代码；

mvvm设计模式这里的

第一m是 model 也就是vm的data属性
第二个v是 view 视图网页模版
最后vm就是中间vue的 viewmodel 代码体现就是vm对象或者vm实例；

基础语法

v-model：可以绑定数据模型中的值
{{xxx}}：插值表达式可以取数据模型中的值
v-html：可以绑定数据模型中的值，并且可以识别标签
条件语句
- v-if：判断绑定的数据如果结果为true 就显示这个元素，如果结果为false 页面中是不存在这个标签的
- v-else：如果v-if绑定的数据结果为false 就可以显示 v-else中的元素
- v-else-if
- v-show：绑定数据如果结果为true就显示这个元素 false不显示，但是和v-if不同，页面中存在这个元素，只是将display属性改为none
循环语句
- v-for：可以用于遍历对象、数组使用 (item,key,index) in items，标签内可以使用插值表达式取值
数据绑定
- v-bind: & ：可以将数据模型绑定到标签的某些属性上
事件绑定
- v-on: & @ ：可以绑定methods属性中的方法事件，调用函数的时候可以加括号，也可以不加，根据是否需要传参决定，如果不加括号默认会传一个事件对象，如果传参了，还想获取事件对象可以用过$event传参
```
<input type="button" value="按钮" @click="doSomething('123',$event)" >

    methods:{
            doSomething(str,event){
                console.log(str)
                event.target.value = '我变了'
            }
        }
```
- 常用属性
  - .stop ：阻止事件冒泡，点击子元素，父元素也会触发事件（事件冒泡）
  - .prevent：阻止事件的默认行为如 a标签的跳转 form表单的submit
  - keyup.enter：
表单处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<p>
    <input type="checkbox" id="c1"
           true-value="yes"
           false-value="no"
           v-model="checked"
    ><label for="c1">一个复选框</label>
</p>
    <p>{{checked}}</p>
    <input type="checkbox" id="aaa" value="Jack" v-model="checkedName"><label for="aaa">jack</label>
    <input type="checkbox" id="bbb" value="John" v-model="checkedName"><label for="bbb">john</label>
    <input type="checkbox" id="ccc" value="Tom" v-model="checkedName"><label for="ccc">tom</label>
    <p>{{checkedName}}</p>
    <input type="radio" id="one" value="One" v-model="picked"><label for="one">one</label>
    <input type="radio" id="two" value="Two" v-model="picked"><label for="two">two</label>
    <p>{{picked}}</p>
    <select v-model="selected">
        <!--option 标签中如果有value 选中提交的是value的值 如果没有value 提交的是文本的值 -->
        <option v-for="item in city" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    <p>{{selected}}</p>
    <!-- 单击事件 键盘事件 @input @change-->
    <input type="text" v-model.lazy="inputEvent" @input="inputFun" >
    <input type="text" v-model="inputEvent" @change="changeFun" >
    <p>{{inputEvent}}</p>
</div>
<script type="module">
    import {createApp} from 'https://cdn.bootcdn.net/ajax/libs/vue/3.4.37/vue.esm-browser.js'
    const Options ={
        data(){
            return {
                checked:'',
                checkedName:[],
                picked:'',
                city:[
                    {id:1,name:'南京'},
                    {id:2,name:'北京'},
                    {id:3,name:'上海'},
                ]
                ,selected:''
                ,inputEvent:''
            }
        }
        ,methods:{
            inputFun(){
                console.log("触发input事件")
            }
            ,changeFun(){
                console.log("触发change事件")
            }
        }
    }
    createApp(Options).mount('#app')
</script>
</body>
</html>

生命周期

vue生命周期（一个组件的从创建到使用到消亡的整个过程）

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下面给出vue3中生命周期图：

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数；
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

路由入门

vue Router路由组件是vue的核心组件；平时我们通过路由组件来实现导航/菜单以及各种页面切换；将来通过路由来完成组件之间的切换，页面也跟着变化

<body>
    <div id="app">
        <h1>路由入门</h1>
        <p>
            <!--路由的入口  router-link相当于a标签 to 相当于 href-->
            <router-link to="/">首页</router-link>&nbsp;
            <router-link to="/about">关于我们</router-link>
        </p>
        <!--组件要在这里进行渲染 使用router-view 路由出口-->
        <router-view></router-view>
    </div>
</body>

一、定义路由组件

    //1.定义路由组件
    const Home = {template:'<div>首页内容</div>'}
    const About = {template:'<div>关于我们 联系我们 <a href="">www.woniu.com</a></div>'}

二、定义路由信息

    // 2.定义路由信息 主要就是路由的地址 和哪个组件对应
    const routes = [
        {path:'/',component:Home},
        {path:'/about',component:About},
    ]

三、创建路由实例

    //3.创建路由实例并指定路由信息
    const router = createRouter({
        // 指定History 历史模式
        history:createWebHashHistory(),
        routes
    })

四、创建vue实例

    // 4.创建vue实例并挂在
    let app = createApp()

五、注册路由信息

// 5.注册路由信息
    app.use(router)

六、挂载vue实例

app.mount("#app")

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            margin: 30px;
        }
        ul{
            display: flex;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li>
<!--            <a href="">首页</a>-->
            <!-- 路由 功能和样式都类似于 a标签  to 相当于 href-->
            <!--router-link 需要配合路由出口 -->
            <router-link to="/">首页</router-link>
        </li>
        <li>
<!--            <a href="">关于我们</a>-->
            <router-link to="/about">关于我们</router-link>
        </li>
    </ul>
    <!-- 在这里显示路由组件的内容-->
    <router-view></router-view>
</div>
<script type="importmap">
    {
   "imports" : {
       "vue" : "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.js",
       "vue-router":"https://unpkg.com/vue-router@4.2.5/dist/vue-router.esm-browser.js",
       "@vue/devtools-api": "./devtools-api-6.4.5/package/lib/esm/index.js"
   }
}
</script>
<script type="module">
    import {createApp} from 'vue'
    // 创建路由 和 历史模式（其实就是我们跳转页面的记录）
    import {createRouter,createWebHashHistory} from 'vue-router'
    // 1.定义路由组件
    const Home = {template:'<h1>首页内容</h1>'}
    const About = {template:'<p>联系我们 www.woniu.com</p>'}
    // 2.定义路由信息
    const routes = [
        // path : 路径  component 组件  通过这个路径 去寻找 这个组件
        {path:'/',component:Home},
        {path:'/about',component:About},

    ]
    // 3.创建路由
    const router = createRouter({
        history:createWebHashHistory(),
        // es6 新写法 当属性的key 和 值的变量同名时 可以省略
        routes
    })
    const Options = {}
    // 创建vue实例
    let app = createApp(Options);
    // 使用路由
    app.use(router)
    app.mount('#app')
</script>
</body>
</html>

思维导图

posted @ 2025-05-15 20:24 icui4cu 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

icui4cu