vue包含一系列的扩展插件(库)
* vue-cli: vue脚手架 * vue-resource(axios): ajax请求 * vue-router: 路由 * vuex: 状态管理 * vue-lazyload: 图片懒加载 * vue-scroller: 页面滑动相关 * mint-ui: 基于vue的组件库(移动端) * element-ui: 基于vue的组件库(PC端)
vue内置指令
v-text/v-html: 指定标签体 * v-text : 当作纯文本 * v-html : 将value作为html标签来解析 v-if v-else v-show: 显示/隐藏元素 * v-if : 如果vlaue为true, 当前标签会输出在页面中 * v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中 * v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none v-for : 遍历 * 遍历数组 : v-for="(person, index) in persons" * 遍历对象 : v-for="value in person" $key v-on : 绑定事件监听 * v-on:事件名, 可以缩写为: @事件名 * 监视具体的按键: @keyup.keyCode @keyup.enter * 停止事件的冒泡和阻止事件默认行为: @click.stop @click.prevent * 隐含对象: $event v-bind : 强制绑定解析表达式 * html标签属性是不支持表达式的, 就可以使用v-bind * 可以缩写为: :id='name' * :class * :class="a" * :class="{classA : isA, classB : isB}" * :class="[classA, classB]" * :style :style="{color : color}" v-model * 双向数据绑定 * 自动收集用户输入数据 ref : 标识某个标签 * ref='xxx' * 读取得到标签对象: this.$refs.xxx
【1】Vue常见标签应用
① v-if、v-else、v-for
<div class="layui-carousel" id="test3" lay-filter="test3" style="height: 500px;"> <div carousel-item v-if="swiperList.length<1"> <div style=""> <img src="/common/images/swiper1.jpg" data-url="/common/images/banner.jpg" onclick="javascript:goPage(this)"/> </div> </div> <div carousel-item v-else> <div v-for="item in swiperList" > <a href="javascript:void(0)"> <img v-bind:src="'/file/fileDown?saveName='+item.field1" /> </a> </div> </div> </div>
vue中使用v-for遍历
<template> <ul class="todo-main"> <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index"/> </ul> </template>
② 计算属性
computed: { //默认get方法 completeSize () { return this.todos.reduce
