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')
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>
展示内容
表达式
{{ object.a }}
表达式
{{n+1}}
可以写任何运算
{{ fn(n) }}
可以调用函数
如果值为undefined 或null 就不显示
另一中写法为<div v-text="表达式" ></div>
HTML内容
假设data. x值为<strong>hi</strong>
<div v- html="x" ></div>
即可显示粗体的hi
我就想展示{{n}}
<div v-pre>{{ n }}</div>
v-pre不会对模板进行编译
绑定属性
绑定src
<img v-bind:src="x">
v-bind
的简写:
<img :src="x">
绑定对象
<div
:style="{border: '1px solid red',height:100}">
注意这里可以把'100px' 写成100
</div>
绑定事件
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 执行语句
即发现函数就加括号调用之,否则就直接运行代码
这导致一个问题,如果xxx(1)返回一个函数咋办
用一个中间量赋值 const x = xxx(1)
缩写
< button @click= "add">+1< / button>
判断条件
if…else
<divv-if="x > 0">
x大于0
</div>
<div v-else-if="x === 0">
X为0
</div>
<div v-else>
x小于0
</div>
for(value,key)in 对象或数组
<ul>
<li v-for="(u, index) in users" :key="index">
索引: {{index}} 值: {{u. name}}
</li>
</ul>
<ul>
<li v-for=" (value,name) in obj" :key="name">
属性名: {{name}}, 属性值: {{name}}
</li>
</ul>
注意:如果用了 v-for
一定要在后面都加 :key="index"
v-show(显示和隐藏)
// v-show
<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
Vue模板主要特点有
- 使用XML语法(不是HTML)
- 使用{{}} 插入表达式
- 使用 v-html v-on v-bind 等指令操作DOM
- 使用 v-if v-for 等指令实现条件判断和循环
指令 Directive
以 v- 开头的东西就是指令
语法
- v-指令名:参数=值,如 v-on:click=add
- 如果值里没有特殊字符,则可以不加引号
- 有些指令没有参数和值,如 v-pre
- 有些指令没有值,如 v-on:click.prevent 阻止默认事件
修饰符
用来修饰指令的
有些指令支持修饰符
@click.stop="add"
表示阻止事件传播/冒泡
@click.prevent="add"
表示阻止默认动作
@click.stop.prevent=" add"
同时表示两种意思
常见修饰符
v-on支持的有.{keycode I keyAlias}
. stop
.prevent
.capture
.self
.once
.passive
.native
快捷键相关
.ctrl
.alt
.shift
.meta
.exact
鼠标相关
.left
.right
.middle
v-bind支持的有
.prop
.camel
.sync
v-model支持的有
.lazy
.number
.trim
.sync 修饰符
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
我们写一个案例:
在App.vue里面写入
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money.sync="total"/>
// 等价于
// <Child :money="total" v-on:update:money="total = Sevent"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
然后创建一个child.vue文件 写入:
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
最后用main.js去运行它。
控制台会出现如下界面:
然后就会发现 当我么点击花钱。我们不是在本身自己拿的,而是在total
那里取出来的。
注意:带有 .sync 修饰符的 v-bind 不能和表达式一起使用
(例如 v-bind:title.sync="doc.title + '!'"
是无效的)。