模板template
三种写法
1、vue完整版中 写在index.html中
<div id=xxx>
{{n}}
<button @click = "add">+1</button>
</div>
new Vue({
el:'#xxx',
data:{n:0}，//写成函数
metnods:{add(){}}
})
2、写在选项中,div#app会被替换掉
<div id=app>
</div>
new Vue({
template:`
<div>
{{n}}
<button @click = "add">+1</button>
</div>
`
data:{n:0}，//写成函数
metnods:{add(){this.n+=1}}
}).$mount('#app')//el的第二种写法
3、非完整版，配合xxx.vue
xxx.vue
<template>
<div>
{{n}}
<button @click = "add">+1</button>
</div>
</template>
<script>
export default {
data(){return:{n:0}},
metnods:{add(){this.n+=1}}
}
</script>
<style> </style>
main.js
import xxx from "./xxx.vue"
new Vue({
render : h => h(xxx)
}).$mount('#app')
- template 标签里面不是HTML而是XML是两种不同的语言
- 不同在于在XML里面有闭合标签一说
HTML可加可不加/
<input name = "username"> HTML
<input name = "username"/> HTML(更为松散一些，也可以闭合)
<input name = "username" / > XML
空div
<div></div>HTML
<div / >XML 自闭和标签
XML更容易写编译器 所以尤雨溪选择这种语言表示HTML
script标签写法和之前的new Vue写法一样，默认导出一个选项。
不需要template写了会覆盖 data必须为函数
组件名首字母最好大写（不会和原生的一些东西产生冲突 <button> <Button> 不是一回事）
我们使用xxx.vue 一般都是非完整版
所以只能传给new Vue的 render h
Vue模板中的语法
1、展示内容
展示普通文本
{{object.a}} //表达式 把构造选项中的data里面的object.a展示出来
{{n+1}} //运算
{{f(n)}} //调用函数，默认methods中找
如果值为undefined 或 null就不显示
没人用的写法
<div v-text="bject.a(和上面写法一样)"></div>
展示HTML内容
v-html指令 支持内容中有HTML标签
data.x = <strong>hi</strong>
<div v-html="x"></div>
显示就是粗体的hi
我就想展示两个花括号 {{n}}
v-pre指令 不会对模板进行编译
<div v-pre="x"> {{n}}</div>
2、绑定属性
绑定src属性 标准写法 v-bind 绑定
x=URL
<img v-bind:src = 'x'/>
简写
<img :src = 'x'/>
绑定对象(绑定一个style，style等于一个对象)
“100px” 可默认写成 100
<div
:style="{border:'1px solid red',height:“100px”}"
>
3、绑定事件
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">n+=1 <button/>
点击之后Vue会运行n+=1
发现函数就加括号掉用函数 add()
否则就直接运行xxx(1)、n+=1
里面也是不支持if 啥的 可以用问好冒号表达式
缩写
<button @click = "add">+1 <button/>
4、条件判断
if...else
<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else="x<0">x小于0</div>
如果x 大于0就显示这个div
如果等于0就显示第二个
其他所有情况显示i第三个
5、循环
for(value,key)in对象或数组
v-for后面必须跟:key = "xxx"否则会有警告
一般后面那个key不能用会重合 的 对象里的 value会重合
a =1
b=1 就重合了
展示user
<ul>
<li v-for = "(u,index)in users" :key = "index">
索引：{{index}} 值：{{u.name}}
</li>
</ul>
把user里的每一项用 u和index代替
u表示数组每一个值
index表示下标
遍历对象
<ul>
<li v-for = "(value,name)in users" :key = "name">
属性名：{{name}} 值：{{value}}
</li>
</ul>
:key = 'index'有bug
6、显示、隐藏
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
7、其他
v-model 在vue 表单中
v-slot在vue 插槽中
v-cloak v-once 看文档
总结
- 使用XML
- 使用{{插入表达式}}
- 使用 v-html v-on v-bind 等指令操作DOM
比如
声明式编程 <div v-html="x"></div>
会变成
命令式编程div.innerHtml = 'x' - 使用 v-if v-for 等指令实现条件判断和循环
指令Directive
- <div v-show="n%2===0">n是偶数</div>
就是我指令这个div 在什么时候展示出来（通过css隐藏的 与if 不同） - v-for 命令li什么时候循环
- v-if 命令div什么时候出现在dom树里面
Vue中 以 v-开头的东西就是指令
语法
v-指令名：参数 = 值
值中没有特殊字符可以不加引号
有些指令没有参数和值 如v-pre
有些指令没有值
如v-on:click.prevent 可以没有值
prevent阻止默认事件
可以有值
v-on:click.prevent = x
阻止默认点击事件 点击之后运行x
其中这个prevent叫做修饰符
修饰符
修饰符是用来修饰指令的
哪些指令支持修饰符
@click.stop = "add" 表示阻止事件 传播/冒泡
@click.prevent= "add" 表示阻止默认动作
@click.stop .prevent= "add" 同时阻止
v-on 支持的有 .{keycode|keyAlias}
<input @input = 'y'>
input 支持input事件 输入事件
就是用户输入的东西 不管鼠标复制 还是键盘输入的 就执行y
怎么得到用户输入的内容呢 事件
e.target.value
y(e){
console.log(e.target.value)
}
keypress键盘按下事件。
<input @keypress.13 = 'z'>
z(e){
if(e.keyCode === 13){
console.log('用户打了回车')
}
}
你可以直接
<input @keypress.13 = 'z'> 键盘按下13就执行y,不需要你用if判断了
z(e){
console.log('用户打了回车')
}
但是每个键位的数字很难记
就可以使用Alias 别名（缩写）
回车的Alias 就是 enter
具体查看：
按键修饰符
v-on还支持 .stop .prevert .caputer .self .once .passive .native 具体看文档
快捷键相关： .ctrl .alt .shift .meta .exact 只在按下这些快捷键的时候才会触发鼠标或键盘事件的监听
鼠标相关：.left .right .middle
v-bind 支持的有
.prop .camel .sync
v-model支持的有(vue表单中)
.lazy .number .trim
主要记住
.stop .prevert .sync
.sync修饰符
.sync举例
.sync修饰符场景描述
爸爸给儿子钱，儿子要花钱怎么办，示例
答∶儿子打电话（触发事件）向爸爸要钱
Vue规则∶组件不能修改props外部数据
Vue规则∶$emit可以触发事件，并传参
Vue规则∶$event可以获取$emit的参数
∶money.sync="total"等价于
:money="total"v-on:update:money="total=Sevent"
由于这种场景（我把数据给你，但是你要改的话你得通知我改）很常见所以尤雨溪发明了.sync，示例
<Child :money="total"/> 个Child传外部数据
在child中 不能使用money-100 因为money是外部的数据（父组件还会更新回来的 你改了没用）
<button @click="$emit('update:money', money-100)">
得到 update:money 事件 参数是money-100
父组件 监听这个事件 v-on : update:money = “total =event不是this上的
思路：
爸爸给儿子钱:money="total"
儿子可以看到money 但是它想花钱不能直接money-100
而是触发一个事件$emit('update:money'
它爸爸发现儿子要花钱了，就会把儿子传来的参数money-100 更新到钱上
有人在child调用了on
有人在child调用了emit
这就是事件的发布和订阅
.sync 的意思就是同步 如果想要同步回来 我帮你同步
sync就是语法糖 ，还是要按下面理解
∶money.sync="total"等价于
:money="total"v-on:update:money="total=Sevent"
总的来说 修饰符 最重要的有
@click.stop = "xxx'
@click.prevent = "xxx'
@keypress.enter = "xxx'
∶money.sync="total"
