注：此文章总结于bilibili黑马程序员的Vue基础
学习Vue需要的基础：
以上的几个词听都没听过的同学，可以先学习完上面的再来学Vue
对于Vue呢？相信一部分同学只是听过他的名字，或者只是看过他的logo，所以呢，我们先来认识一下他。
1.JavaScript框架
Vue他是一个JavaScript框架，相比于JQuery这样的js库，框架的功能更为强大
2.简化DOM操作
在之前实现很多网页效果的时候，套路都是获取元素，然后再操作这些元素，通过操作DOM元素来实现不一样的网页效果。
而Vue我们只需要使用他提供的特殊语法，Vue会自动操作使用特殊语法修饰的DOM元素，基本上不用我们人为去操作了。
3.响应式数据驱动
当数据改变以后，页面会同步的更新，但是这份内容我们需要结合代码才能看出效果。
第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
</script>
</body>
</html>
el：挂载点
<!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>el:挂载点</title>
</head>
<body>
{{message}}
<div id="app" class="app">
{{message}}
<span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
// el: "#app",
// el: ".app",
el: "div",
data: {
message: "黑马程序员"
}
})
</script>
</body>
</html>
data数据对象
<!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>data:数据对象</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{school.name}}{{school.mobile}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
<li>{{campus[3]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好 小白！",
school: {
name: "黑马程序员",
mobile: "400-618-9090"
},
campus: ["北京校区", "上海校区", "广州校区", "深圳校区"]
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号