vue基础特性

最新推荐文章于 2022-07-11 11:03:28 发布

weixin_33895695

最新推荐文章于 2022-07-11 11:03:28 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winner-one/p/8810418.html

版权

在这里我们主要是讲解一些vue实例的属性和一些基础的指令

vue实例属性:

其实和我们之前所学的对象的属性是相似的东西

vue的基础指令:

对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解

指令:

可以看做是命令,在vue中我们可以通过指令来完成相关的操作；在vue中以v-开头,后面紧跟具体的操作命令

一些基本的指令：

v-once: 只绑定一次

v-bind: 绑定数据

v-model: 绑定模型

v-on: 绑定事件

v-if v-show: 条件渲染
方法：
使用methods来定义方法,使用v-on监听事件,绑定事件处理函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里使用v-on来绑定事件处理的方法(函数)-->
            <button v-on:click='fn'>click</button>

        </div>
    </body>
</html>
<script>
    var dataModel = {
        message: 'hello world!'
    }
    var vm= new Vue({
        el:'#app',
        data:dataModel,
        //在这里使用methods对象来定义方法(点击事件处理函数)
        methods:{
            fn: function(){
                console.log("这个方法被调用了")
            }
        }
    })
</script>

　　生命周期钩子函数：

其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数

演示：

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

    <head>
        <meta charset="UTF-8">
        <title>Vue入门之生命周期</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ number }}</p>
            <input type="text" name="btnSetNumber" v-model="number">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    number: 1
                },

                //在创建对象之前,监控数据变化和初始化事件之前调用
                beforeCreate: function() {
                    console.log('beforeCreate 钩子执行...');
                    console.log(this.number)  //数据监测还没有开始
                },
                //实例创建完成之后调用,挂载阶段还没有开始
                created: function() {
                    console.log('cteated 钩子执行...');
                    console.log(this.number)
                },
                //开始挂载的时候执行,这时html还没有渲染到页面上
                beforeMount: function() {
                    console.log('beforeMount 钩子执行...');
                    console.log(this.number)
                },
                //挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
                mounted: function() {
                    console.log('mounted 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之前调用
                beforeUpdate: function() {
                    console.log('beforeUpdate 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之后调用
                updated: function() {
                    console.log('updated 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之前
                beforeDestroy: function() {
                    console.log('beforeDestroy 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之后
                destroyed: function() {
                    console.log('destroyed 钩子执行...');
                    console.log(this.number)
                },
            });

            //实现数据的更新
            //  vm.$set(dataModel, 'number', 123)

            //销毁钩子的执行
            //  vm.$destroy(true)


        </script>
    </body>

</html>

补充：

1.activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

2.deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

转载于:https://www.cnblogs.com/winner-one/p/8810418.html

weixin_33895695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础特性

在这里我们主要是讲解一些vue实例的属性和一些基础的指令vue实例属性:其实和我们之前所学的对象的属性是相似的东西vue的基础指令:对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解指令:可以看做是命令,在vue中我们可以通过指令来完成相关的操作；在vue中以v-开头,后面紧跟具体的操作命令一些基本的指令：v-once: 只绑定一次v-bi...
复制链接

扫一扫