Vue快速入门

最新推荐文章于 2024-06-17 23:49:16 发布

11_bb

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量128

点赞数

分类专栏： javaWeb 文章标签：前端前端框架 vue

本文链接：https://blog.csdn.net/bb_111/article/details/127496885

版权

javaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.概述

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据双向绑定，将变成的关注点放在数据上。
官网：https://cn.vuejs.org

对比MVC:

在这里插入图片描述

2.Vue快速入门

1.新建html页面，引入Vue.js文件(可到官网下载)

<script src="js/vue.js"></script>

2.在js代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el:"#app",
    data(){
        return{
            username:""
        }
    }
});

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：函数，用来定义数据模型

3.编写视图

<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

完整代码html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>


<script src="js/vue.js"></script>
<script>

    //1.创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
    })

</script>

</body>
</html>

运行效果：

在这里插入图片描述

3.Vue常用指令

常用的指令有：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件，如click，change，blur等
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	同上
v-else-if	同上
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1).v-bind

<a v-bind:href="url">点击一下</a>

2).v-model

<input name="username" v-model="username">

3).v-on

<input type="button" value="一个按钮" v-on:click="show()">
//或者
    <input type="button" value="一个按钮" @click="show()"><br>

4).v-if

<div id="app">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>

    <input v-model="count">
</div>

5).v-show

<div v-show="count==1">div v-show</div>
<input v-model="count">

注：v-if和v-show两个指令渲染方式不同，v-if条件性的渲染某元素，判定为true时渲染,否则不渲染；v-show根据条件展示某元素，区别在于切换的是display属性的值。

6).v-for

<!-- addrs为定义好的数组 -->
<div v-for="addr in addrs"> 
        {{addr}}<br>
</div>
<!--i为索引 -->
<div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}}<br>
</div>

4.Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

在这里插入图片描述

这些钩子方法重点关注 mounted 就行。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。可以在该方法中发送异步请求，加载数据。

mounted使用示例：

 new Vue({
        el:"#app",
        mounted(){
            alert("加载完成...")
        }
    });

11_bb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门

Vue入门笔记
复制链接

扫一扫

专栏目录

Vue快速入门

1.概述

2.Vue快速入门

3.Vue常用指令

4.Vue生命周期

“相关推荐”对你有帮助么？