Vue入门第2天-------Vue模板语法(一)
一、Vue模板语法
1.1前端渲染
前端渲染
把数据填充到HTML标签中
前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎
- 使用Vue特有的模板语法
1.2指令
什么是指令？
自定义属性就是指令
指令的格式：以v-开始（比如：v-cloak）
v-cloak指令的用法
- 提供样式
[v-cloak]{
display:none;
}
- 在插值表达式所在的标签中添加v-cloak指令
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
使用v-cloak是因为插值表达式存在闪动问题。
解决问题的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
数据绑定指令
-
v-text 填充纯文本
相比插值表达式更加简洁 -
v-html 填充HTML片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用 -
v-pre 填充原始信息
显示原始信息，跳过编译过程（分析编译过程）
数据响应式
-
如何理解响应式
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化） -
什么是数据绑定
数据绑定：将数据填充到标签中 -
v-once只编译一次
显示内容之后不再具有响应式功能
v-once的应用场景： 如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提供性能。
双向数据绑定
什么是双向数据绑定？
用户去修改页面中的表单输入域中的内容会影响数据中的内容变化；数据中的内容变化会影响页面中数据绑定的内容的变化。
双向数据绑定分析：
- v-model指令用法:
<input type='text' v-model='uname' />
MVVM设计思想
- M(model)----提供数据
- V(view)----提供页面展示效果
- VM(View-Model)----实现控制逻辑，把两者结合在一起
事件绑定
Vue如何处理事件？
- v-on指令用法
<input type='button' v-on:click='num++'/>
- v-on简写形式
<input type='button' @click='num++'/>
事件函数的调用方式
- 直接绑定函数名称
<button v-on:click='say'>Hello</button>
- 调用函数
<button v-on:click='say()'>Say hi</button>
例子：
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click="num++">点击1</button>
<button @click="num++">点击</button>
<button @click="handle">点击2</button>
<button @click="handle()">点击3</button>
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
num:0
},
methods:{
handle:function(){
//这里的this是Vue的实例对象
this.num++;
}
}
})
</script>
注意：函数必须得定义在methods当中，这里的this是Vue的实例对象。
事件函数参数传递
- 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
注意：
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
事件修饰符
- .stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
- .prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
还有一些其它的事件修饰符，可以看官网之后练一下！
按键修饰符
- .enter回车键
<input v-on:keyup.enter='sumbit'>
- .delete删除键
<input v-on:keyup.delete='handle'>
还有一些其它的按键修饰符，可以看官网之后练一下！
自定义按键修饰符
- 全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112
规则：自定义按键修饰符名字是自定义的，但是对应的值必须的按键对应event.keyCode值
二、简单计算器案例
需求 ：实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面。
思路：
- 通过v-model指令实现数值a和数值b的绑定
- 给计算按钮绑定事件，实现计算逻辑
- 将计算结果绑定到对应位置
代码：
<div id="app">
<h1>简单计算器</h1>
<div>
<span>数值A</span>
<span>
<input type="text" v-model="a"/>
</span>
</div>
<div>
<span>数值B</span>
<span>
<input type="text" v-model="b"/>
</span>
</div>
<div>
<button v-on:click="handle">计算</button>
</div>
<div>
<span>计算结果:</span>
<span v-text="result"></span>
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
a:'',
b:'',
result:''
},
methods:{
handle:function(){
//实现计算逻辑
this.result=parseInt(this.a)+parseInt(this.b);
}
}
})
</script>