1.template的三种用法
- 使用Vue完整版，写在HTML里面
<div id='xxx'>
{{n}}
<button @click="add"></button>
</div>
new Vue({
el:'#xxx'
data:{n:0}, // 这里data可以写成函数
methods:{
add(){
....
}
}
})
2.使用Vue完整版，写在选项里面
<div id='app'>
</div>
new Vue({
template:`
<div>
{{n}}
<button @click='add'>+1</button>
</div>`,
data:{n:0},
methods:{
add(){
...
}
}
}).$mount('#app') // 等于 el:'#app'
这样写有一个细节
- HTML里面的 div#app 元素会被 template 外层的 div 替换
- 使用Vue的不完整版，配合 xxx.vue 文件
<template> <!-- 这里不是HTML 而是 XML -->
<div>
{{n}}
<button @click='add'>
+1
</button>
</div>
</template>
<!--
XML中 必须有闭合标签 / 比如 <input />
<div /> 空div可以这样写
-->
<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('')
2.模板的常用指令
- 表达式
{{ object.a }} 表达式
{{ n + 1 }} 可以写任何运算
{{ fn(n) }} 可以调用函数，默认会在 methods 里面找
如果值为 undefined 或 null 就不显示
另一中写法为
<div v-text="表达式"></div>
- HTML内容
-
假设 data.x 值为
<strong> hi </strong>
那么
<div v-hmtl='x'></ div>即可显示粗体的 hi
- 展示 {{ n }}
<div v-pre>{{n}}</div>v-pre 不会对模板进行编译
- 绑定属性
<img v-bind:src='x'> <!-- 这里 x 是变量 -->
上面可以简写为
<img :src='x'>
- 绑定对象
<div :style='{border:'1px solid red',height:100}'>
</div>
<!-- 这里 100 可以被解释成 100px -->
- 绑定事件
- 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>
- 条件判断
- if...else
<div v-if="x >0"> <!-- 符合条件就显示div -->
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-show
<div v-show="n%2===O"> n是偶数</div>
3.指令通用用法
1.什么是指令
<div v-text='x'></div>
<div v-html='x'></div>
以 v- 开头的东西就是指令
2.语法
- v-指令名：参数=值，如 v-on:click=add
- 如果参数值没有特殊字符，则可以不加引号
- 有些指令没有参数和值，如 v-pre
- 有些指令没有值，如 v-on:click.prevent (阻止默认事件)
3.事件修饰符
有些指令支持修饰符
- @click.stop = 'add' 表示阻止事件传播，冒泡
- @click.prevent = 'add' 表示阻止默认动作
- @click.prevent.stop = 'add' 表示以上两种意思
常用的修饰符有很多
- v-on 支持的有 .{ keycode | 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
4. .sync 修饰符
Vue的几个规则
- 组件不能修改 props 外部数据
- $emit 可以触发事件，并传参
- event 可以获取$emit的参数
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。因此 Vue 推荐以 update:myPropName 的模式触发事件取而代之
看一个场景，子组件要使用父组件传递的参数加以修改
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money - 100)">
<span>花钱</span>>
</button>
</div>
</template>
<script>
export default {
props:['money']
}
</script>
<style scoped>
.child{
border: 1px solid black;
}
</style>
<!--
这里是子组件 点击执行自定义事件 'update:money.' 执行内容 为 'money - 100'
-->
<template>
<div id="app">
App.vue 我现在有 {{total}}
<hr/>
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
data(){
return {
total:10000
}
},
methods:{
add(){
this.n++;
}
},
components:{
Child:Child
}
}
</script>
<style lang="scss">
#app {
border:1px solid red;
padding: 10px;
}
</style>
<!--
这里是父组件 传给子组件 :money='total' props 数据 父元素绑定'update:money' 事件，子组件执行时 便触发事件 执行 'total = $event' $event表示子组件调用的参数
当子组件修改父组件数据时，必须这样写
-->
当使用 .sync 修饰符时
<Child :money.sync="total"/>
<!-- 等价于 -->
<Child :money="total" v-on:update:money="total = $event"/>
子组件的自定义事件必须按照 update:参数名 格式 不能修改
