template 的三种写法
一、Vue 完整版，写在 HTML 里
<div id=xxx>
{{n}}
<button @click='add'> +1 </button>
</div>
new Vue({
el:'#xxx',
data:{n:0}, //data 可以改为函数
methods:{
add(){
this.n +=1
}
}
})
二、Vue 完整版，写在选项里
//index.html文件
<div id=app>
</div>
//main.js 文件
new Vue({
template:`
<div>
{{n}}
<button @click='add'> +1 </button>
</div>
`,
data:{n:0}, //data 可以改为函数
methods:{
add(){
this.n +=1
}
}
}).$mount('#app')
// 细节：index.html 里面的 div#app 会被替代
三、Vue 非完整版，配合 xxx.vue 文件
// vue 文件中
// 这里的 template 标签，里面用的是 xml 语法，不是 html 语法。
<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>
// main.js 文件
// 组件名 XXX 用大写开头
import Xxx from './xxx.vue'
new Vue({
render: h => h(Xxx) //非完整版，只能用 render 函数
}).$mount('app')
template 的语法
展示内容
- 表达式 1、{{ object.a }} 表达式；
2、{{ n+1 }} 写任何运算，但不能写 if else;
3、{{ fn(n) }} 可以调用函数；
4、如果值为 undefined 或 null ,就不显示。
- HTML 内容
1、假设 data.x 的值为
<strong> hi </strong>;
2、<div v-html='x'></div>即可显示粗体的 hi ;
- 展示 {{ n }}
1、
<div v-pre>{{ n }}</div>
2、v-pre 不会对模板进行编译。
绑定属性
- 绑定 src
1、
img v-bind:src='x' />
2、v-bind: 简写为 <img :src='x' />
- 绑定对象
<div :style="{border:'1px solid red',height:100}"</div>//这里可以把 ‘100px’ 写成 100
绑定事件
- v-on:事件名
<button v-on:click='add'>+1</button>
//点击之后，VUe 会运行 add()
<button v-on:click='xxx(2)'>xxx</button>
//点击之后，Vue 会运行 xxx(2)
<button v-on:click='n += 1'>xxx</button>
//点击之后，Vue 会运行 n += 1
总结：
1、发现函数就加括号调用，否则就直接运行代码；
2、xxx(2) 一般返回一个值，不要返回函数；
- 缩写
<button @click='add'>+1</button>一般都用缩写
条件判断
- if else
<div v-if="x>0"> x大于0 </div> //如果x>0，就显示这个div
<div v-else-if="x===0"> x等于0 </div> //如果x===0，就显示这个div
<div v-else="x<0"> x小于0 </div> //如果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}} 属性值:{{value}}
</li>
</ul>
// :key="index" 大部分时候没问题，但是在一些复杂的项目里面可能会有 bug。
显示、隐藏
-
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;
指令 Directive
什么是指令
<div v-text='x'></div> 、 <div v-html='x'></div>
以 v- 开头的东西就是指令
语法
1、v-指令名:参数=值，如：v-on:click="add"
2、如果值里没有特殊字符，可以不加引号；
3、有些指令没有参数和值，如 v-pre ；
4、有些指令没有值，如 v-on:click.prevent
修饰符
v-on 支持的
- .keycode
- .keyAlias
- .stop
- .prevent
@click.stop='add' //表示阻止事件传播/冒泡，并且调用 add 函数
@click.prevent='add' //表示阻止默认动作
@click.stop.prevent='add' //同时阻止两种
@keypress.enter = 'xx'
@keypress.13 = 'xx' //回车的keycode 是 13
v-model 支持的
- .lazy
- .number
- .trim
v-bind 支持的 .sync
- .sync
用途：当父子组件交互，当父组件通过
props传值进子组件，子组件想要改变这个值时(一般直接修改会报错)，可以这么做：子组件触发事件，通知父组件改变这个绑定的值，
原理：实现原理是：利用eventBus，在子组件中通过$emit触发update事件并传参，然后父组件可以通过$event来接收$emit的参数。
1、在包含moneyprop的子组件中，可以用下面的方法表达对其赋新值的意图：
this.$emit('update:money', newMoney)
2、然后父组件可以监听 update:money事件，
<div>
:money='total'
v-on:update:money='total=$event'
</div>
3、以上代码可以缩写，即用.sync修饰符：
<div :money.sync="total"></div>
// App.vue
<template>
<div class="app">
App.vue 现在有 {{total}}
<hr>
<Child :money.sync="total" />
</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('updata:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props:["money"]
}
</script>
<style>
.child {
border:3px solid green;
}
</style>
//父组件将参数 total 通过 props 传给 Child 组件，然后 Child 组件触发 click 事件时，调用 $emit() 函数，$emit 触发 update:money 事件，并传递参数 money-100 给父组件，父组件监听 update:money 事件，并且通过 $event 获取到传过来的参数，更新 total 的值。
- 注意：
带有
.sync修饰符的v-bind不能和表达式一起使用，例如v-bind:title.sync="doc.title + '!' "是无效的，取而代之的是，只能提供想要绑定的 property 名。 - 一个对象设置同时设置多个 prop 时，可以将
.sync修饰符和v-bind配合使用
<div v-bind.sync="doc"></div>
// 这样会把`doc`对象的每一个property（如title）都作为一个独立的 prop 传进去，然后各自添加用于更新的`v-on`监听器
v-bind.sync不能用在一个字面量的对象上。 1、例如v-bind.sync="{title:doc.title}"无法正常工作
2、字面量对象：javascript中对象字面量的理解
