Vue常用指令
Vue 渐进式 JavaScript 框架
声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建
2. 插值表达式渲染数据
<div id="app">{{msg}}</div>
1. 引入 vue 包
<script src="./js/Vue.js"></script>
<script>
// 创建 vue 实例对象
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
实例参数分析
- el : 元素的挂载位置 (值可以是CSS选择器或者DOM元素)
- data : 模型数据 (值是一个对象)
指令
指令的本质就是自定义属性 ; 指定的格式 以
v-
开头
v-cloak
- 解决插值表达式刷新页面时的闪动问题
- 原理 : 先通过CSS样式隐藏 , 在内存中进行值得替换 , 替换好值之后再显示最终的值
[v-cloak] {display: none;}
<p v-cloak>{{msg}}</p>
数据绑定指定
v-text
填充纯文本 ; 相比较插值表达式更加简洁, 不会出现闪动问题
<div v-text="msg"></div>
v-html
填充HTML片段
存在安全问题 XSS
本网站内部数据可以使用 , 来自第三方数据不可用
<div v-html="html"></div>
v-pre
填充原始信息
显示原始信息 , 跳过编译过程 (分析编译过程)
<div v-pre>{{msg}}</div>
数据响应式
数据的变化导致页面内容的变化
数据绑定 : 将数据填充到标签中
v-once
只编译一次 , 显示内容之后不再具有响应式功能 ; 如果显示的信息后续不需要更改 , 使用v-once 可以提高性能; (一般情况下vue需要监听这个数据 , 使用 v-once 后不需要再监听数据的变化)<div v-once>{{msg}}</div>
双向数据绑定
v-model
页面和数据相绑定, 修改一处同步修改 主要应用于表单<input type="text" v-model="msg" />
双向数据绑定原理
v-model
本质上不过是语法糖<div id="app"> <div v-cloak>{{ msg }}</div> <!-- 通过input事件监听输入框变化 --> <input type="text" v-on:input="handle" v-bind:value="msg"> </div>
var vm = new Vue({ el: '#app', data: { msg: 'hello' }, methods: { handle: function (event) { // 通过事件对象获取最新值, 最后覆盖旧的值 this.msg = event.target.value } } })
事件绑定
<!-- 绑定函数名称和函数调用基本没有区别 ;
1. 如果是绑定函数名称, 默认会传递事件对象作为事件函数的第一个参数
2. 如果是绑定函数调用, 事件对象必须作为最后一个参数显示传递, 事件对象名名称必须是 $event
-->
<button v-on:click="handle1">点击1</button>
<button v-on:click="handle2(123, 456, $event)">点击2</button>
<button @click="num++">点击3</button>
var vm = new Vue({
data: {
num: 0
},
// 事件函数写到 methods
methods: {
handle1: function (event) {
// 方法内部是没有办法直接访问到 num 的 需要通过 this === vue 实例对象
this.num++
console.log(event.target.innerHTML)
},
handle2: function (arg1, arg2, event) {
console.log(arg1)
console.log(event.target.innerHTML)
}
}
})
事件修饰符
// .stop 阻止冒泡 <div v-on:click.stop='handle'></div>
// .prevent 阻止默认事件 <div v-on:click.prevent='handle'></div>
按键修饰符
// .enter 回车键触发 <input type="button" v-on:keyup.enter="handleSubmit" />
// .delete 删除键触发 <input type="text" v-on:keyup.delete="handleClear" />
methods: { handleSubmit: function () { console.log(this.uname, this.pwd) }, handleClear: function () { this.uname = '' } }
更多 :https://vuejs.bootcss.com/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
自定义按键修饰符
Vue.config.keyCodes.f1 = 112
属性绑定
<a v-bind:href="url">百度</a>
<a :href="url"></a>
样式绑定
class 样式处理
<!-- 对象语法 -->
<!-- 控制元素隐藏显示, isXXX要在data中定义, 只能是true或false -->
<div v-bind:class="{active: isActive, error: isError}"></div>
<!-- 数组语法 -->
<!-- 数组对象可以混合使用 -->
<div v-bind:class="[activeClass, error, {test: isTest}]"></div>
<!-- 对象,数据 简化操作 -->
<!-- 默认的class会保留其样式 -->
<div class="base" v-bind:class="arrClass"></div>
<div :class="arrClass"></div>
<div v-bind:class="objClass"></div>
<button @click="handle">dianji</button>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
error: 'error',
isTest: true,
arrClass: ['active', 'error', {test: 'test'}],
objClass: {active: 'active', error: 'error'}
},
methods: {
handle: function () {
// 移除类名, 如果想要修改回来就需要重新再次赋值
this.activeClass = ''
this.isTest = !this.isTest
this.arrClass = this.arrClass.shift()
this.objClass = delete this.objClass.active
}
}
})
</script>
style 样式处理
<div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div>
<!-- 简写 -->
<div :style="eleStyles"></div>
<!-- 数组写法 -->
<div v-bind:style="[eleStyles, newEleStyles]"></div>
<div v-on:click="handle">update</div>
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid red',
widthStyle: '100px',
heightStyle: '200px',
eleStyles: {
border: '4px solid hotpink',
width: '200px',
height: '100px'
},
newEleStyles: {
border: '1px solid blue',
backgroundColor: 'pink'
}
},
methods: {
handle: function () {
this.heightStyle = '100px'
this.eleStyles.width = '100px'
}
}
})
分支结构
v-if
v-else-if
v-else
v-show
v-if
: 控制元素的是否渲染到页面上
v-show
: 控制元素是否显示 通过display: none/block
<div id="app">
<div v-if="score > 80">秀儿</div>
<div v-else-if="score >= 60">中规中矩</div>
<div v-else>垃圾</div>
<div v-show="flag">v-show 测试</div>
</div>
var vm = new Vue({
el: '#app',
data: {
score: 90,
flag: true
},
methods: {
handle: function () {
this.flag = !this.flag
}
}
})
循环结构
<ul>
<!-- key帮助Vue区分不同的元素, 从而提高性能, key不一定是index 但一定要是唯一的 -->
<li
:key="index"
v-for="(item, index) in list"
v-cloak>
{{ index + '---' + item }}
</li>
</ul>
<ul>
<!-- 满足 if 后才会渲染列表 -->
<li
v-if="obj.age == 22"
v-bind:key="index"
v-for="(value, key, index) in obj">
{{value + '--' + key} + '--' + index}
</li>
</ul>
var vm = new Vue({
el: '#app',
data: {
list: ['apple', 'orange', 'banana'],
obj: {
name: 'lisi',
age: 23,
score: 'Vue'
}
}
})
tab栏切换案例
[v-cloak] {display: none;}
ul {overflow: hidden;}
li {list-style: none; height: 50px; width: 100px; line-height: 50px; border: 1px solid blue; text-align: center; float: left; cursor: pointer;}
div img {display: none;}
.current img {display: block;}
.active {background-color: orangered;}
<div id="app">
<ul>
<li
:class="currentIndex == index ? 'active' : ''"
v-for="(item, index) in list"
:key="index"
v-cloak
v-on:click="handle(index)">
{{ item.title }}
</li>
</ul>
<div
:class="currentIndex == index ? 'current' : ''"
v-for="(item, index) in list"
:key="index">
<img :src="item.url" alt="">
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
currentIndex: 0,
list: [
{title: 'apple', url: './img/apple.png'},
{title: 'lemon', url: './img/lemon.png'},
{title: 'orange', url: './img/orange.png'}
]
},
methods: {
handle: function (index) {
this.currentIndex = index
}
},
})