写在前面：研一的项目需求，就是完成独立的前后端开发。
1 开发工具
VS code 和 Live Server（插件：浏览器实时预览）
vue简介
- JavaScript框架
- 简化Dom操作
- 响应式的数据操纵
2 第一个Vue程序
- 创建一个HTML文件，并且下载安装live Server插件，同步HTML里面的修改操作；
- 添加一个div标签，id要记住
<div id="app">
{
{ message }}
</div>
- 复制一下开发环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 用js方法，将数据传上去
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
</script>
这里的#是id选择器。标签内部可以选择，但是标签外部不能选择
. 是class选择器
div也可以
【一般是选择使用id选择器】
2.1 完成代码
【这里的代码是完整的body代码。直接复制粘贴就OK】
<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>
2.2 el挂载点
el: "#app" id选择器
或者是
el: ".app", 类选择器
或者是
el: "div", div选择器
3 data：数据对象
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好小黑!",
school: {
name: "黑马程序员",
mobile: "15965245633"
},
campus: ["北京校区", "上海校区", "广州校区", "深圳校区"]
}
})
</script>
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
3 V-text
- 对于标签的
v-text属性，如果没有大括号，标签内部的文字就会被全部替换。
<h2 v-text="message">张</h2>
。。。省略一下
<script>
var app = new Vue({
el: "#app",
data: {
message: "可可爱爱"
}
})
</script>
这里输出的只有“可可爱爱”
- 如果想要输出“张”的话，就要使用{ {}}
<h1>张{
{ message }}</h1>
3.1 完整的代码
<body>
<div id="app">
<h2 v-text="message">张</h2>
<h1>张{
{ message }}</h1>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "可可爱爱"
}
})
</script>
</body>
输出结果：
- 还可以在
<h2 v-text="message">张</h2>，将“message”写成“message+‘！’”，就可以输出感叹号了!
3.2
默认会替换所有的内容