模板,指令与修饰符
template三种写法
一 在Vue完整版里,写在HTML里
<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
new Vue({
el: '#xxx',
data:{n:0}, // data 可以改成函数
methods:{add(){}}
})
二 在Vue完整版里,写在选项里
<div id=app>
</div>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data:{n:0}, // data
methods:{add(){ this.n += 1 }}
}).$mount('#app')
//div#app会被替代
三 在Vue非完整版里,配合xxx.vue文件
<template>
<div>
{{n}}
<button @click="add">
+1
</button>
</div>
</template>
<script>
export default {
data(){ return {n:0} },
// data 必须为函数
methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写 CSS </style>
*************************************
//另一个地方写如下代码
import Xxx from './xxx.vue'
// Xxx 是一个options对象
new Vue({
render: h => h(Xxx)
}).$mount('#app')
template语法()
使用XML语法
什么是指令
<div v-text="x"></div>
<div v-html="x"></div>
以v-
开头的东西就是指令(名字起得不太好)
语法
`v-指令名:参数=值`,如`v-on:click=add`
修饰符:用来修饰指令
事件修饰符,按键修饰符
v-on
支持的有
.{keycode | keyAlias}
重点
<input @keypress.13='y'>在input里,键盘按下回车(回车的keycode=13),就执行函数y
<input @keypress.enter='y'>在input里,键盘按下回车,就执行函数y
.stop
重点
//.stop 阻止事件传播/冒泡
@click.stop = "add"
.prevent
重点
.prevent 阻止事件的默认动作
@click.prevent点击时,阻止点击时的默认动作
@click.prevent = "add"点击时,阻止点击时的默认动作,并且执行add函数
按键码
(快捷键相关)
(鼠标相关)
v-bind支持的有
.prop
.camel
.sync
重点
v-model支持的有(在Vue表单里学)
展示内容
插入(普通文本)表达式{{ }}
- 完整写法(但没人用)
<div v - text="表达式" ></div>
{{object.a}}
把options
的data
里的object.a
显示在这{{n+1}}
可以写任何运算(但不支持if
和else
){{fn(n)}}
可以调用函数(默认在methods
里找)
v-html
指令插入HTML内容
v-pre
指令写啥就展示啥
v-bind
指令绑定一个标签的属性
- 完整写法:
<img v- bind:src="x"/>
- 简写为:
<img :src="x" />
- 还可以绑定对象
<div: style="{border:'1px solid red',height :100}">
</div> //注意这里可以把'100px'写成100,但是100vm就不能省略单位了
v-on
指令绑定事件
- 完整写法(没人用):
v-on:事件名
//事件处理函数可以为函数名
<button v-on:click="add">+1< / button> //点击之后,Vue会运行add()
//事件处理函数可以为函数的调用形式
<button v-on:click="xxx(1) ">XXX< / button> //点击之后,Vue会运行xxx(1)
//事件处理函数可以直接写代码
<button v-on:click="n+=1">XXX< / button> //点击之后,Vue会运行n+=1
即发现函数就加括号调用之,否则就直接运行代码
***********************************
缩写:<button @click="add">+1</button>
v-if
和v-else-if
和v-else
条件判断
<div v-if="x>0">
x大于0
</div>
<div v-else-if="x=== 0">
x为0
</div>
<div v-else>
x小于0
</div>
v-for
循环
//v-for="(value, key) in 对象或数字" :key="每个元素不会重合的值。"
<ul>
<li v-for="(u, index) in users" :key="index"> //key="index"有bug,以后再说
索引: {{index}} 值: {{u. name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name" >
属性名: {{name}}, 属性值: {{value}}
</li>
</ul>
v-show
(通过css)显示和隐藏,而不是添加入DOM树而显示隐藏
<div v- show= "n%2===0"> n是偶数 </div>
近似等于
<div :style="{display :n%2===0? 'block': 'none'}"> n是偶数</div>
之所以近似等于,是因为
看得见的元素display
不只有block
如table
的display
为table
如li
的display
为list-item
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>