在这里我们主要是讲解一些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 组件停用时调用。该钩子在服务器端渲染期间不被调用。

vue基础特性的更多相关文章

  1. vue总结 01基础特性

    最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  5. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  6. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  7. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  8. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  9. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. ELK+filebeat、kafka、zookeeper搭建文档

    系统:centos 6.5 JDK:1.8 Elasticsearch-6.0.0Logstash-6.0.0kibana-6.0.0zookeeper-3.5.3kafka_2.12-1.0.0fi ...

  2. Algorithm --> 判读是否是子树

    问题 判断一棵树是否是另一棵树的子树,如图 思路 问题分两步: 找值相同的根结点(遍历解决) 判断两结点是否包含(递归:值.左孩子.右孩子分别相同) 树节点定义 struct TreeNode { i ...

  3. 2017-11-15 软件包 java.io学习

    接口摘要 一.接口Closeable 方法摘要:void:close();关闭此流并释放与此流关联的所有系统资源.如果已经关闭该流,则调用此方法无效 涉及的异常信息:IOException ----- ...

  4. 如何使用maven搭建web项目

    博客园注册了有二十多天了,还没有写过博客,今天就发一篇,也便于后面查找笔记. 我个人已经做了几年的java web开发了,由于所在的公司是业务型公司,用的都是一些老旧的稳定技术,很少接触到稍微新点的内 ...

  5. 【详细】总结JavaWeb开发中SSH框架开发问题（用心总结，不容错过）

    在做JavaWeb的SSH框架开发的时候,遇到过很多的细节问题,这里大概记录下 我使用的IDE是Eclipse(老版本)三大框架:Spring4.Struts2.Hibernate5 1.web.xm ...

  6. Alpha集合

    项目名称:城市安全风险管控系统 小组成员: 张梨贤.林静.周静平.黄腾飞 Alpha冲刺随笔 Alpha冲刺Day1 Alpha冲刺Day2 Alpha冲刺Day3 Alpha冲刺Day4 Alpha ...

  7. 《高级软件测试》11.16.Jira使用说明的撰写和操作视频的录制

    今日任务完成情况如下: 小王:完成了测试管理工具jira的使用手册中,基本情况介绍.下载安装部分的撰写工作:小高:参考官方手册,结合自己的实际使用体会,对jira的基本组成及其工作流程进行了介绍:小陈 ...

  8. STM32F4系列单片机上使用CUBE配置MBEDTLS实现pem格式公钥导入

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 最近尝试在STM32F4下用MBEDTLS实现了公钥导入(我使用的是ECC加密),整个过程使用起来比较简单. 首先,STM32F4系列CUBE里 ...

  9. JAVA类的方法调用和变量(全套)

    一.类的分类: 1.普通类 2.抽象类(含有抽象方法的类) 3.静态类(不需要实例化,就可以使用的类) 二.方法的分类: 1.私有方法(只有类的内部才可以访问的方法) 2.保护方法(只有类的内部和该该 ...

  10. 在thinkphp框架中使用后台传值过来的数组，在hightcart中使用数组

    js的数组是和php里面数组是不一样的,所以模板文件需要先接受,然后利用Js代码转化之后再使用,接受后台的数组有几种办法 1.后台传过来的json数组,利用Js是可以接受的,然后将json数据利用js ...