vue.js基础
2017-05-02 14:31:57 0 举报AI智能生成
vue.js基础整理
作者其他创作
大纲/内容
条件渲染
v-if
实例<h1 v-if="flage">msg</h1>
作用：切换多个元素，可以把一个<template>元素当做包装元素，并在上边使用v-if，最终的渲染结果不会包含<template>元素
<template v-if="falge"><h1>mesg</h1><p>mesg</p></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实例
构造器
- 每个vue.js应用都是通过构造函数Vue创造一个Vue的根实例启动的：---- var vm = new Vue ({//选项})
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
<div v-html="rawHtml"></div>
被插入的内容都会被当做Html---数据绑定会被忽略
属性---v-bind
<div v-bind:id="dynamicld"></div>
对布尔值的属性也有效----如果条件被求值为false的话该属性就会被移除
JavaScript表达式
模板表达式都被放在沙盒中，只能访问全局变量的一个包名单，如Math和Date 不应该在模板表达式中试图访问用户定义的全局变量
指令
带有v-前缀的特殊属性----指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上
参数
v-bind指令被用来响应地更新HTML属性----<a v-bind:href="url"></a>
v-on 指令，它应用于监听dom事件----<a v-on:click="dosomething">
修饰符---以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<from v-on:submit.prevent="onsubmit"></from>
例如.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+')'}"
自由主题
0 条评论
下一页
