一、入门
el:表示vue对象接管了选择器指定的区域
data:vue的数据模型对象,用json串存储对象
{ {键名}}:插值表达式,可以获取vue模型的数据
<body>
<div id = "app">
{
{msg}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"Camila is very nice"
}
});
</script>
Vue是一个提供了MVVM风格的双向数据绑定的JavaScript库。
何为MVVM,即Model,View和ViewModel。
Model相当于vue的数据模型data
View相当于前端的标签
ViewModel相当于Vue对象
何为双向绑定,就相当于标签的value和vue的数据联动在一起,标签的value修改了值,vue数据也跟着改变,反之也成立。
二、插值表达式
插值表达式的作用是进行数据绑定,最常见的形式就是使用双大括号获取值,无论何时,假设绑定的数据对象的属性的值发生了改变,这个时候差值表达式的内容也会发生改变。
{
{msg}} //获取vue对象data里的msg属性的值
插值表达式会在所属vue实例的数据作用范围内作为javascript被解析。限制:每个插值表达式只能包含单个表达式。
举个栗子: