Vue模板语法
- 如何理解前端渲染
把数据填充到html中(模板+数据=前端渲染(静态html内容)) - 前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎
- 使用Vue特有的模板语法
模板语法概述
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
1. 指令
v-cloak
指令语法
- 插值表达式存在的问题:闪动
- 如何解决该问题:使用
v-cloak
指令 - 解决该问题的原理,先通过样式隐藏内容,然后在内存中进行值的替换,替换好了之后再显示最终的结果
提供样式,再在插值表达式所在的标签中添加v-cloak
指令
<style>
/*提供样式*/
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<!-- 再在插值表达式所在的标签中添加`v-cloak`指令 -->
<div v-cloak>{
{msg}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
})
</script>
</body>
数据绑定指令
v-text
填充纯文本
相比插值表达式更加简洁,无闪动问题
<body>
<div id="app">
<div v-test = 'msg'></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
})
</script>
v-html
填充html片段
存在安全问题
本网站内部数据可以使用,来自第三方的数据不可以用
<body>
<div id="app">
<div v-html = 'msg'></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '<h1>哈哈,我是一个大大的H1</h1>'
},
})
</script>
v-pre
填充原始信息
显示原始信息,跳过编译过程(分析编译过程)
数据响应式
- 如何理解响应式
html5中的响应式(屏幕尺寸的变化导致样式的变化)
数据响应式(数据的变化导致页面内容的变化) - 什么是数据绑定
数据绑定:将数据填充到标签中 v-once
只编译一次
显示内容之后不再具有响应式功能
双向数据绑定
v-model
指令用法
<div id="app">
<div>{
{msg}}</div>
<div>
<input type="text" v-model = 'msg'>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123'
}
})
</script>
msg会随着文本输入框的输入而改变
MVVM设计思想
- M(Model)
- V(View)
- VM(View-Model)
2. 事件绑定
1. Vue如何处理事件
v-on
指令用法
实现点击按钮num递增
<div id="app">
<div>{
{num}}</div>
<div>
<button v-on:click='num++'>加1</button>
<!--<button @click='num++'>加1</button>-->
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num:1
}
})
</script>
v-on
简写形式@
<button @click='num++'>加1</button>
2. 事件函数的调用方式
- 直接绑定函数名称
<button @click="handle">点击2</button>
<div id="app">
<</