Vue01

2018-10-26 本文已影响0人 knot98

一、认识Vue

定义：一个构建数据驱动的 web 界面的渐进式框架

优点：

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

2、方便构建单页面应用程序（SPA）

二、引入Vue

<div id="app">
    <p title="p"></p>
    <p v-bind:title='title'></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: 'vue-p'
        }
    })
</script>

三、Vue实例

实例：el

<div id='app'>
    
</div>
<script>
    new Vue({
        el: '#app'
    })
</script>

数据：data

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue实例之data</title>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ msg }}
        {{ num }}
        <!-- 插值表达式中可以进行运算 -->
        {{ 1 + 2 + 3 * 4 }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        // data: 数据
        // 为挂载点内部的vue变量提供值
        data: {
            msg: "hello world!",
            num: 88888
        }

    })
</script>
<script type="text/javascript">
    // 普通js代码块
    // 获取msg,num变量的值

    // 1.得到vue实例
    console.log(app);
    // 2.获取vue变量data: $data
    console.log(app.$data);
    // 3.获取目标变量值
    console.log(app.$data.msg);

    // 直接获取值
    console.log(app.msg);
    console.log(app.num);
</script>
</html>

方法：methods

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>methods</title>
    <style type="text/css">
        .box {
            background-color: orange
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-on: 指令,操作事件的 -->
        <p class="box" v-on:click="abcClick">{{ abc }}</p>
        <p class="box" v-on:click="defClick">{{ def }}</p>
        <p class="box" v-on:mouseover="action">88888</p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            abc: "12345 上山打老虎 老虎不在家 ...",
            def: "67890 呵呵"
        },
        // methods为挂载点内部提供方法的实现体
        methods: {
            abcClick: function (ev) {
                console.log(ev);
                console.log("abc is clicked");
            },
            defClick (ev) {
                console.log(ev);
                console.log("def is clicked");
            },
            action () {
                console.log("被悬浮");
            }
        }
    })
</script>
</html>

计算属性：computed

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        <div>
            <!-- v-model vue进行数据双向绑定的指令 -->
            <label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name">
        </div>
        <div>
            <label for="ming">名:</label><input type="text" name="ming" v-model="last_name">
        </div>
        <div>
            <!-- 通过插值表达式实现 -->
            <div>姓名: {{ fisrt_name + " " + last_name }} </div>
            <!-- 通过computed实现 -->
            <div>姓名: {{ full_name }} </div>
            <!-- 通过methods实现 -->
            <div>姓名: {{ full_name_bac() }} </div>
        </div>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            fisrt_name: "",
            last_name: "",
            // full_name: ""
        },
        // 一个变量依赖于多个变量
        // 采用computed
        computed: {
            full_name: function () {
                // full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面
                return this.fisrt_name + " " + this.last_name;
            }
        },
        methods: {
            full_name_bac: function () {
                return this.fisrt_name + " " + this.last_name;
            }
        }
    })
</script>
</html>

监听器：watch

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>watch</title>
</head>
<body>
    <div id="app">
        <div>
            <label>姓名:</label>
            <input type="text" v-model="full_name">
        </div>
        <p>姓: {{ first_name }} </p>
        <p>名: {{ last_name }} </p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 多个变量依赖于一个变量, 对该变量进行监听
    new Vue({
        el: "#app",
        data: {
            full_name: "",
            first_name: "",
            last_name: ""
        },
        // 监听full_name变量,通过full_name具体修改first_name,last_name
        watch: {
            full_name () {
                var fullName = this.full_name;
                console.log(fullName);
                this.first_name = fullName.split(" ")[0];
                this.last_name = fullName.split(" ")[1];
            }
        }
    })
</script>
</html>

分隔符：delimiters

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>delimiters</title>
</head>
<body>
    <div id="app">
        {{ msg }} ${ msg }
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>
</html>

实例对象使用成员属性与方法

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
    console.log(app)
    console.log(app.$el)
    console.log(app.$data.msg)
    console.log(app.msg)
</script>

四、实例生命周期钩子

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        },
        beforeCreate () {
            console.log("实例刚刚创建");
            console.log(this.msg);
        },
        created () {
            console.log("实例创建成功, data, methods");
            console.log(this.msg);
        }
        // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
    })
</script>
</html>

定义

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

钩子方法

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

重点钩子

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM

Vue01

一、认识Vue

二、引入Vue

三、Vue实例

四、实例生命周期钩子

猜你喜欢

热点阅读