Vue基础(一)
Vue简介
Vue是动态构建用户界面的渐进式JavaScript框架。
它遵循以下特点:
- 遵循MVVM模式。
- 编码简洁,体积小,运行效率高,适合移动/PC端开发。
- 它本身只关注UI,可以引入其它第三方库开发项目。
Vue模板语法
Vue模板语法包括两大类:
1、插值语法:
- 功能:用于解析标签体内容;
- 写法:
{{xxx}},xxx
是js表达式,且可以直接读取到data中的所有区域。
2、指令语法: - 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
- 举例:
<a v-bind:href="xxx">
或简写为<a :href="xxx">,xxx
同样要写js表达式,且可以直接读取到data中的所有属性. - 备注:Vue中有很多的指令,且形式都是
v-???
,此处我们只是拿v-bind
举个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue模板语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>hello world!</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">学习vue</a><br>
<a :href="url">学习vue</a>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
name: 'VUE',
url: 'https://www.bilibili.com/'
}
})
</script>
</body>
</html>
Vue数据绑定
Vue中有2种数据绑定的方式:
- 单向绑定
v-bind
:数据只能从data流向页面 - 双向绑定
v-model
:数据不仅能从data流向页面,还可以从页面流向data
注意: - 双向绑定一般都应用在表单类元素上(如:
<input>、<select>、<textarea>
等)。
-v-model:value
可以简写为v-model
,因为v-model
默认收集的就是value值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"><br> 双向数据绑定:
<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
name: 'VUE'
}
})
</script>
</body>
</html>
MVVM模型
MVVM模型:
- M:模型(Model),data中的数据
- V:视图(View),模板代码
- VM:视图模型(ViewModel),Vue实例
注意:
- data中所有的属性,最后都出现在了vm身上。
- vm身上所有的属性 及 Vue原型身上所有的属性,在Vue模板中都可以直接使用。