首页  思维导图  详情



 



vue.js基础

2017-05-02 14:31:57   0  举报





仅支持查看

AI智能生成

vue.js基础整理

技术

模板推荐

作者其他创作

大纲/内容

条件渲染

v-if

实例<h1 v-if="flage">msg</h1>

作用：切换多个元素，可以把一个<template>元素当做包装元素，并在上边使用v-if，最终的渲染结果不会包含<template>元素

v-else

表示v-if的"else块"

v-else 元素必须紧跟在v-if 或者 v-else-if元素的后面，否则它将不会被识别

v-else-if

充当v-if的"else-if块" 可以链式的使用多次

类似v-else，v-else-if必须跟在v-if或者v-else-if的后面

key属性

声明这个两个元素的完全独立的，不能复用他们

v-show

不同的是带有v-shw的元素始终会被渲染并保留在dom中，v-show是简单的切换元素的css属性的dsiplay

对于任何复杂逻辑，都应当使用计算属性：computed:{}---有缓存，计算属性只有在它的相关依赖发生改变时才会重新求值。

v-show 不支持<template>语法，也不支持v-else

区别

v-if有更高的切换开销，而v-show有更高的初始渲染开销

如果需要非常频繁的切换，则使用v-show较好

如果在运行时，条件不太可能改变，则使用v-if较好

v-for

当v-if与v-for 一起使用时，v-for具有高的优先级

列表渲染

v-for

v-for 指令需要以 item in items 形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名

<div v-for ="item in items "> v-for中也可以增加参数   例如v-for="(item, $index) in items" item是迭代的别名，$index是索引

可以用of替代in作为分隔符，但是of获得的值与in获得的有所区别

也可以用带有v-for的<template>标签来渲染多个元素块

key

子主题

push()--可向数组的末尾添加一个或多个元素，并返回新的长度

pop()-- 用于删除并返回数组的最后一个元素。

shift()--用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift()--可向数组的开头添加一个或更多元素，并返回新的长度。

splice()--向/从数组中添加/删除项目，然后返回被删除的项目。

sort()--对数据进行排序

reverse()--用于颠倒数组中元素的顺序

表单控件绑定

v-model

修饰符

.lazy--转变为在change事件中同步

.number--自动将用户的输入值转为number类型（如果原值的转换结果为NaN则返回原值）

.trim--自动过滤用户输入的收尾空格

定义---v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

注意：在<textarea></textarea>里面插值，必须要用v-model，否则无效

定义

一套构建用户界面的渐进式框架

采用自底向上增量开发的设计

核心只关注视图层

vue实例

构造器

<ol><li>每个vue.js应用都是通过构造函数Vue创造一个Vue的根实例启动的：----  var vm = new Vue ({//选项}) <br></li></ol>

2.可以扩展vue构造器，从而用预定义选项创建可复用的组件构造器----var Mycomponent =Vue.extend({//扩展选项})

所有的Vue.js组件其实都是被扩展的Vue实例

属性与方法

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

注意只有这些被代理的属性是响应的

如果在实例创建之后添加新的属性到实例上，他不会出发视图更新

Vue实例暴露了一些有用的实例属性与方法----这些属性与方法都有前缀$，以便与代理的data属性区分

实例生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程

模板语法

插值

文本双大括弧Mustache

<span>message{{msg}}</span>

Mustache 标签将会被代替对应数据对象上 msg属性的值，并实时更新

但：v-once 指令，能执行一次的插值

纯HTML --v-html

被插入的内容都会被当做Html---数据绑定会被忽略

属性---v-bind

对布尔值的属性也有效----如果条件被求值为false的话该属性就会被移除

JavaScript表达式

模板表达式都被放在沙盒中，只能访问全局变量的一个包名单，如Math和Date 不应该在模板表达式中试图访问用户定义的全局变量

指令

带有v-前缀的特殊属性----指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上

参数

v-bind指令被用来响应地更新HTML属性----<a v-bind:href="url"></a>

v-on 指令，它应用于监听dom事件----<a v-on:click="dosomething">

修饰符---以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

例如.prevent修饰符告诉v-on指令对于处罚的事件调用event.preventDefault()

过滤器

Vue2.0中，过滤器只能用在两个地方，mestache插值和v-bind表达式过滤器的设计目的就是用于文本转换；实现复杂的数据变换，应该使用计算属性

例如  ----{{message | capitalize}}    <div v-bind:id="redld | fromatid"></div>

缩写

v-bind  例如 <a v-bind:href="url"></a>    缩写为<a :href="url"></a>

v-on 例如 <a v-on:click="dosomething"></a> 缩写为<a @click="dosomething"></a>

计算属性

缓存问题/method

将同一个函数定义为一个method，结果是一样的----没有缓存

计算setter---计算属性默认只有getter,不过在需要时，可以提供一个setter

computed与watch

class与style绑定

绑定语法：<div :class="red"></div>, 通过布尔值来取具体的class <div :class="falge ? red : green"></div>

绑定内敛样式<div :style="font-size:20px ">

:style="{'background-image':'url('+product.productPicPath+')'}" 

自由主题

 Collect

Get Started

《Vue.js设计与实现》图解

 Collect

Get Started

vue前端架构图

 Collect

Get Started

Vue.js权威指南

 Collect

Get Started

vue.js 2.0 和vue.js 3.0依赖收集





0 条评论

下一页