本文介绍了Vue框架的基本概念，包括其MVVM模式的应用，如何在HTML中引入Vue包，以及如何创建Vue实例并设置数据绑定。通过例子展示了容器的选择和插值语法的使用。
一、什么是Vue
Vue是一套用来动态构建用户界面的渐进式JavaScript框架
二、初识Vue
vue的特点：遵循mvvm模式
需要引入Vue包 -------------------<script src="../vue.js"></script>
阻止VUE在启动时产生的提示：
Vue.config.productionTip = false;
容器，app容器名称
注：容器名称尽量使用id绑定唯一值
{{}}插值语法：可以读取到data里面的所有属性
el绑定容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}---
<h1>
{{names}}
</h1>
</div>
<div id="abc" class="box1">
{{ message }}
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
创建vue实例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
names:"张三"
}
})
var aaa = new Vue({
el: '.box1',
data: {
message: '一vue'
}
})
</script>
</html>
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
