Vue.js基础教程：快速入门与常用指令-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54702911/article/details/129858201

概念

Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据处理上

Vue快速入门

1、新建html页面，引入Vue依赖

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

2、在JS代码区域创建爱你Vue核心对象，进行数据双向绑定

new Vue({

el:"#app",

data(){

return{

username:""

}

}

});

3、编写html视图

<div id="app">

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

</div>

4、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实现双向绑定</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

<div id="app">
    <input type="text" name="username" v-model="username"> {{username}}
</div>

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

</body>
</html>

Vue常用指令

指令：html标签上带有v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if,v-for...

常用指令：

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

1、v-bind指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="url">

    <a v-bind:href="url">点击跳转</a>
    <a :href="url">点击跳转</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

2、v-on指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-on指令</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击" v-on:click="show()">
    <input type="button" value="点击" @click="show()">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("点击了按钮");
            }
        },
        data(){
        }
    });
</script>
</body>
</html>

3、v-if-else指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-if-else指令</title>
</head>
<body>
<div id="app">
    <div v-if="count == 6">div1</div>
    <div v-else-if="count == 66">div2</div>
    <div v-else>div3</div>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
        },
        data(){
            return{
                count:6
            }
        }
    });
</script>
</body>
</html>

4、v-show指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-if-else指令</title>
</head>
<body>
<div id="app">
    <div v-show="count == 6">show div v-show</div>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
        },
        data(){
            return{
                count:6
            }
        }
    });
</script>
</body>
</html>

5、v-for指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-for指令</title>
</head>
<body>
<div id="app">
    <!--循环遍历div和内容的值-->
    <div v-for="a in arr">{{a}}</div>

    <!--循环遍历div和内容的索引和值-->
    <div v-for="(a,i) in arr">{{i+1}}=>{{a}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
        },
        data(){
            return{
                arr:["衡阳","长沙","深圳"]
            }
        }
    });
</script>
</body>
</html>

Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成（页面加载完成后）
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销魂后