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

vue实例属性:

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

vue的基础指令:

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

指令:

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

一些基本的指令：

  1. v-once: 只绑定一次
  3. v-bind: 绑定数据
  5. v-model: 绑定模型
  7. v-on: 绑定事件
  9. v-if v-show: 条件渲染
    方法：
    使用methods来定义方法,使用v-on监听事件,绑定事件处理函数
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <!--引入js-->
  7.         <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8.         <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  9.     </head>
  10.     <body>
  11.         <div id="app">
  12.             <!--在这里使用v-on来绑定事件处理的方法(函数)-->
  13.             <button v-on:click='fn'>click</button>
  14.  
  15.         </div>
  16.     </body>
  17. </html>
  18. <script>
  19.     var dataModel = {
  20.         message: 'hello world!'
  21.     }
  22.     var vm= new Vue({
  23.         el:'#app',
  24.         data:dataModel,
  25.         //在这里使用methods对象来定义方法(点击事件处理函数)
  26.         methods:{
  27.             fn: function(){
  28.                 console.log("这个方法被调用了")
  29.             }
  30.         }
  31.     })
  32. </script>

　　生命周期钩子函数：

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

演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Vue入门之生命周期</title>
  7.         <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="app">
  12.             <p>{{ number }}</p>
  13.             <input type="text" name="btnSetNumber" v-model="number">
  14.         </div>
  15.         <script>
  16.             var app = new Vue({
  17.                 el: '#app',
  18.                 data: {
  19.                     number: 1
  20.                 },
  21.  
  22.                 //在创建对象之前,监控数据变化和初始化事件之前调用
  23.                 beforeCreate: function() {
  24.                     console.log('beforeCreate 钩子执行...');
  25.                     console.log(this.number)  //数据监测还没有开始
  26.                 },
  27.                 //实例创建完成之后调用,挂载阶段还没有开始
  28.                 created: function() {
  29.                     console.log('cteated 钩子执行...');
  30.                     console.log(this.number)
  31.                 },
  32.                 //开始挂载的时候执行,这时html还没有渲染到页面上
  33.                 beforeMount: function() {
  34.                     console.log('beforeMount 钩子执行...');
  35.                     console.log(this.number)
  36.                 },
  37.                 //挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
  38.                 mounted: function() {
  39.                     console.log('mounted 钩子执行...');
  40.                     console.log(this.number)
  41.                 },
  42.                 //数据更新之前调用
  43.                 beforeUpdate: function() {
  44.                     console.log('beforeUpdate 钩子执行...');
  45.                     console.log(this.number)
  46.                 },
  47.                 //数据更新之后调用
  48.                 updated: function() {
  49.                     console.log('updated 钩子执行...');
  50.                     console.log(this.number)
  51.                 },
  52.                 //数据销毁之前
  53.                 beforeDestroy: function() {
  54.                     console.log('beforeDestroy 钩子执行...');
  55.                     console.log(this.number)
  56.                 },
  57.                 //数据销毁之后
  58.                 destroyed: function() {
  59.                     console.log('destroyed 钩子执行...');
  60.                     console.log(this.number)
  61.                 },
  62.             });
  63.  
  64.             //实现数据的更新
  65.             //  vm.$set(dataModel, 'number', 123)
  66.  
  67.             //销毁钩子的执行
  68.             //  vm.$destroy(true)
  69.  
  70.         </script>
  71.     </body>
  72.  
  73. </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. Shell 读取用户输入

    14.2  读取用户输入 14.2.1  变量 上一章我们谈到如何定义或取消变量,变量可被设置为当前shell的局部变量,或是环境变量.如果您的shell脚本不需要调用其他脚本,其中的变量通常设置为脚 ...

  2. Django--基本篇：项目结构与设计模式（MVC）

    Django在项目开发中有着结构清晰.层次明显.容易编写理解查阅demo的优点,那么我们来个小案例具体看看.    一.项目结构简析: 我们按照上一篇中的开发流程步骤创建一个新项目myblog,项目下 ...

  3. beta冲刺总结-咸鱼

    前言:emmmmmmm冲刺总结应该可以吐槽了?我发誓后面几篇冲刺我是很努力用正经语言描述了!!!!! 心得:emmmmm,说真的--到beta冲刺的时候才是真正感受到了组队的存在,基本上隔三差五就约一 ...

  4. Linux kernel 的 sendfile 是如何提高性能的

    Linux kernel 的 sendfile 是如何提高性能的 现在流行的 web 服务器里面都提供 sendfile 选项用来提高服务器性能,那到底 sendfile 是什么,怎么影响性能的呢? ...

  5. Linux学习--线程控制

    关于线程控制,主要就是几个模块,我们一个一个消灭.消化: 一.线程创建: 1.先来看看在Linux环境下的线程创建函数: 分析:意思很明显: 1.函数名是 pthread_create  : 2.功能 ...

  6. bzoj千题计划245：bzoj1095: [ZJOI2007]Hide 捉迷藏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1095 查询最远点对,带修改 显然可以用动态点分治 对于每个点,维护两个堆 堆q1[x] 维护 点分树 ...

  7. Spring 以及 Spring MVC Bean元素以及@Bean （Bean 等价于 注解 ??? 没理解错误吧）

    ①.由衷鸣谢Bossen <还是没看懂o(╥﹏╥)o><> {声明Spring Bean和注入Bean的几种常用注解和区别} Bean在Spring和SpringMVC中无所不 ...

  8. 有货前端 Web-APM 实践

    有货前端 Web-APM 实践 0 背景 有货电商技术架构上采用的是前后端分离,前端是主要以业务展示和接口聚合为主,拥有自己的 BFF (Backend For Frontend),以 nodejs ...

  9. 前端基础之CSS-Day13

    1.CSS 语法 1.1.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... proper ...

  10. hadoop2.6.0实践：000 虚拟机配置