博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue学习笔记(一)
阅读量:6124 次
发布时间:2019-06-21

本文共 1603 字,大约阅读时间需要 5 分钟。

一. 数据绑定

1,hello world(new Vue()

{
{message}}
new Vue({    el : '#app',    data : {    message : 'hello world!'    }})

2,双向绑定(v-model

{

{message}}

3,渲染(v-for

  • {
    {todo.text}}
new Vue({    el : '#app',    data : {        todos : [                { text : 'Learn javascript'},                { text : 'Learn Vue.js'}        ]    }})

4,方法处理(v-on

{

{message}}

new Vue({    el : '#app',    data : {        message : "hello world",        todos : [            { text : 'Learn javascript'},            { text : 'Learn Vue.js'}    ]    },    methods :{    reverseMessage : function(){        this.message = this.message.split('').reverse().join('');    }    }})

 二. Vue实例

1,构造器

构造函数Vue来创建一个vue根实例

var vm = new Vue({});

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 中查看。

可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器:

var MyComponent = Vue.extend({  // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()

2,属性与方法

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

var data = { a: 1 }var vm = new Vue({  data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

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

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

3,实例生命周期

Vue 实例在创建时有一系列初始化步骤——例如,它需要建立数据观察,编译模板,创建必要的数据绑定。在此过程中,它也将调用一些生命周期钩子,给自定义逻辑提供运行机会。

钩子created、compiledreadydestroyed在实例生命周期的不同阶段调用,钩子的 this 指向调用它的 Vue 实例。

例如:created 钩子在实例创建后调用

转载于:https://www.cnblogs.com/zhaoliner/p/5856825.html

你可能感兴趣的文章
致远推出全分销A6+,走协同OA差异化竞争路
查看>>
MVVM 框架解析之双向绑定
查看>>
Vue项目使用eslint + prettier规范代码风格
查看>>
如何基于迁移学习快速识别出讲话的人是谁?
查看>>
理解javascript的call 、 apply 、 bind
查看>>
【iOS 开发】iOS 10.3 如何更换 app 图标
查看>>
自动「脑补」3D环境!DeepMind最新Science论文提出生成查询网络GQN
查看>>
比特币的标准是什么
查看>>
使用即构ZEGO视频直播SDK巧妙地实现直播答题方案
查看>>
Android解析ClassLoader(二)Android中的ClassLoader
查看>>
LRUCache原理的简单分析
查看>>
联网对战游戏开源实例分享之《斗兽棋》
查看>>
从零到壹,快速产品设计流程步骤
查看>>
人人都会设计模式---装饰模式--Decorator
查看>>
iOS 运行时之 Associative(关联)
查看>>
关于判断是不是电话号码
查看>>
初探验证码识别
查看>>
逆向基础(九)
查看>>
[代码审计]web程序对客户端数据加解密带来的安全问题
查看>>
浅析 <路印协议--Loopring> 及整体分析 Relay 源码
查看>>