vue爬坑之路2

构造器

  每个vue.js应用都是通过构造函数Vue穿件一个Vue的根实例启动的:

  var vm = new Vue({

//选项

})

  在实例化Vue时,需要传入一个选项对象,他可以包含数据,模板,挂在元素,方法,生命周期钩子等选项。

  vue构造器是可扩展的,实际上,所有的vue.js组件其实都是被扩展的vue实例。

    var MyComponent = Vue.extend({

        //扩展选项

    })

    //所有的’MyComponent‘实例都将以预定义的扩展选项被创建

    var myComponentInstance = new MyComponent();

属性与方法

  每个Vue实例都会代理七data对象里所有的属性:

    var data = {a:1};

    var vm = new Vue({

      data:data

    });

    vm.a===data.a;//  ->true

      //设置属性也会影响到原始数据

    vm.a = 2;

    data.a ;// ->2

    

    //反之亦然

    data.a = 3;

    vm.a; //->3

  注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

  除了data属性,Vue实例暴露了一些有用的实例属性。这些属性与方法都有前缀$,以便于与代理的data属性区分。例如:

  var data = {a:1};

  var vm = new Vue({

    el:‘#example‘,

    data:data

})

  vm.$data === data  //->true

    vm.$el === document.getElementById(‘example‘)  //  ->true

    //$watch是一个实例方法

    vm.$watch(‘a‘,function(newVal,oldVal){

      //这个回调将在‘vm.a‘改变后调用

})

注意,不要在实例属性或者回调函数中(如vm.$watch(‘a‘,newVal => this.myMethond()))使用箭头函数。因为箭头函数绑定父上下文,所以this不会像预想的一样是Vue实例,而是this.myMethod未被定义。

实例生命周期

  每个Vue实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板、挂在实例到DOM,然后在数据变化时更新DOM。在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了执行自定义逻辑的机会。例如,created这个钩子在实例被创建之后调用:

    var vn = new Vue({

  data:{

      a:1

  },

  created: function (){

    //this 指向 vm实例

  console.log(‘a is‘+this.a)

  }

})   //  ->‘a is: 1‘

    Vue.js是否有‘控制器’的概念?答案是:没有。

     所谓“生命周期”,就是在类实例化的过程中,构造函数执行的不同阶段。
       “钩子”就是在某个阶段给你一个做某些处理的机会,当做回调函数就行。

时间: 2024-08-05 19:44:38

vue爬坑之路2的相关文章

vue 爬坑之路---can't resolve 'sass-loader'

环境设置好以后 本以为可以开心的写代码了, 谁料到如下报错,大概意思就是不能编译 sass-loader 这个玩意. 那怎么办?? 安装依赖,不然能怎么办? 第一个依赖: npm install sass-loader 第二个依赖: npm install node-sass 这样安装了之后,然后npm run dev  ,世界一片祥和~ vue 爬坑之路---can't resolve 'sass-loader' 原文地址:https://www.cnblogs.com/liuguoying/

Vue 爬坑之路(二)—— 组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

vue爬坑之路3

插值 文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本差值: <span>Message:{{msg}}</span> Mustache标签将会被替代为对应数据对象上msg属性的值.无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新. 通过使用v-once指令,能一次性地插值,当数据改变时,插值处的内容不会更新.但要注意这会影响到该节点上所有的数据绑定: <span v-once>This will ne

细数vue爬坑之路&lt;坑路大集合&gt;

坑爹集锦一: npm出现Newline required at end of file but not found错误 原因:以vue为后缀名的组件结尾没有换行 解决办法:在结尾后面换行..如下图 解决前: 解决后: 这样设置后,之前的页面瞬间脉动回来!!!

Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)

cd  指定好安装目录 vue init webpack  项目名称 执行  vue vue list  查看可应用模板 vue init webpack  +名字 项目已启动 原文地址:https://www.cnblogs.com/dianzan/p/8570656.html

(转)Vue 爬坑之路(三)—— 使用 vue-router 跳转页面

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo,但是博客中的这个案例被我删掉了,我只好随手写了一个超简单的 demo,希望能有所帮助 链接: https://pan.baidu.com/s/1pMfi5tD  密码: pjwx 这

Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52

Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入

多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面大致的了解了Thread的一些方法和属性下面对一些方法进行运用看看具体效果<下面可能还是会贴很多的源代码,其实我是拒绝的,我只想贴每个方法的代码,但是有时候看到一个方法里面有调用了方法,但是笔者有没有给出来,很蛋疼,有种爽到一半的感觉,所以我还是会把它贴出来,希望一次就能挖到底,不论有没有全懂,但至