Vue 史上最快入门教程

极客飞兔
881 阅读2分钟

🎈 第一个 Vue 程序

  • vue 是一套构建用户界面的前端渐进式框架
  • 只关注视图层，采用自底向上的逐层应用
  • 需要通过 script 标签先引入 vue 服务
  • 通过 el 进行挂载，这里挂载在 id 为 app 的 div 上
  • 那么该 div 下的所有内容都由该 Vue 对象来控制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</html>

🎈 Vue 的基础语法

  • 🎨 if 判断
  • 进行条件判断时使用 v-if 语法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <h1 v-if="user == 'rabbit'">我是飞兔小哥</h1>
        <h1 v-else-if="user == 'autofelix'">我是 autofelix</h1>
        <h1 v-else="user">我是一个程序猿</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: 'autofelix'
        }
    })
</script>

</html>
  • 🎨 for 循环
  • 列表渲染指令，用来循环遍历数组或者对象
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <li v-for="item in items">
            {{item.name}}
        </li>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                { name: '极客飞兔' },
                { name: '程序员' },
                { name: 'autofelix' }
            ]
        }
    })
</script>

</html>
  • 🎨 动态标签属性
  • 动态操作标签属性的指令 v-bind，给标签属性绑定变量数据，一般简写为 :
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <h1 v-bind:title="info">我是飞兔小哥</h1>
        <h1 :title="info">我是飞兔小哥</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            info: '这个是飞兔小哥的个人介绍'
        }
    })
</script>

</html>
  • 🎨 事件绑定
  • 通常使用 v-on 给标签绑定事件监听，一般简写为 @
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <button v-on:click="who">我是谁</button>
        <button @click="who">飞兔小哥</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            who: function (e) {
                alert(e.target.innerText)
            }
        }
    })
</script>

</html>
  • 🎨 双向绑定
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <input type="text" v-model="message">{{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ""
        }
    })
</script>

</html>

🎈 解决闪烁

<!--v-clock：解决闪烁问题--> 
<style> 
    [v-clock] { 
        display: none; 
    } 
</style>

🎈 异步通信

  • 通过 axios 可以发送异步请求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <div>{{userinfo}}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            userinfo: ""
        },
        mounted() {
            axios.get('请求链接')
                .then(response => {
                    // 请求回来的数据
                    this.userinfo = response.data
                });
        }
    })
</script>

</html>

🎈 计算属性

  • 计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新
  • 计算属性主要特性是为了将不经常变化的结果进行缓存，以节约系统的开销
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <p>
            <input type="number" v-model="num1">
        </p>
        <p>
            <input type="number" v-model="num2">
        </p>
        <p>
            num1={{num1}},num2={{num2}},sum={{sum}}
        </p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num1: 0,
            num2: 0
        },
        computed: {
            sum: function () {
                return +this.num1 + +this.num2
            }
        }
    })
</script>

</html>

🎈 Vue 组件

  • 组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体
  • 每个组件都是 Vue 的实例对象。 我们实例化的 Vue 对象就是一个组件，而且是所有组件的根组件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <user v-for="item in items" v-bind:info="item"></user>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    Vue.component("user", {
        props: ['info'],
        template: '<li>{{info}}</li>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            items: ["极客飞兔", "autofelix", "飞兔小哥"]
        }
    })
</script>

</html>

🎈 插槽 slot

  • 插槽就是子组件中的提供给父组件使用的一个占位符
  • 用 <slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
        </todo>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    // 定义slot插槽
    Vue.component("todo", {
        template:
            '<div>\
            <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
            </div>'
    });

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var app = new Vue({
        el: "#app",
        data: {
            title: "飞兔小哥的矩阵",
            todoitems: ['掘金', 'CSDN', '博客园']
        }
    });
</script>

</html>

🎈 Vue 生命周期

  • vue 每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件 创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

  • vue 在整个的生命周期中会有很多 钩子函数 提供给我们在 vue 生命周期不同的时刻进行操作

  • 钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
</head>

<body>
    <!-- view层 -->
    <div id="app">
        <h1>{{message}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
          message: 'Vue的生命周期'
        },
        beforeCreate: function() {
          console.group('===== beforeCreate创建前状态 =====');
          console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
          console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
          console.log("%c%s", "color:red","message: " + this.message) 
        },
        created: function() {
          console.group('===== created创建完毕状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el); //undefined
          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
          console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function() {
          console.group('===== beforeMount挂载前状态 =====');
          console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
          console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function() {
          console.group('===== mounted 挂载结束状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
          console.log(this.$el);    
          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
          console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
          console.group('===== beforeUpdate 更新前状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);   
          console.log("%c%s", "color:red","data   : " + this.$data); 
          console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
          console.group('===== updated 更新完成状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el); 
          console.log("%c%s", "color:red","data   : " + this.$data); 
          console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
          console.group('===== beforeDestroy 销毁前状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);    
          console.log("%c%s", "color:red","data   : " + this.$data); 
          console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
          console.group('===== destroyed 销毁完成状态 =====');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);  
          console.log("%c%s", "color:red","data   : " + this.$data); 
          console.log("%c%s", "color:red","message: " + this.message)
        }
    });
</script>

</html>

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝