Vue快速入门
第一节 准备Vue.js环境
1、开发中的最佳实践
『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。
- Java语言的程序包：jar包
- JavaScript语言的程序包：外部js文件
对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。
2、Vue框架的js文件获取
官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
3、本地创建vue.js文件
此教程是在idea中直接操作。
第一步：在idea中创建javaweb工程
第二步：在工程web目录下创建script目录用来存放vue.js文件
第三步：创建空vue.js文件
第四步：将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中
4、创建HTML文档并引入vue.js
在demo01.html中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
</head>
<body>
</body>
</html>
第二节 Vue.js基本语法：声明式渲染
1、概念
①声明式
『声明式』 是相对于 『编程式』 而言的。
- 声明式：告诉框架做什么，具体操作由框架完成
- 编程式：自己编写代码完成具体操作
②渲染
- 蓝色方框：HTML标签
- 红色圆形：动态、尚未确定的数据
- 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
- 渲染：程序计算动态数据得到具体数据的过程
2、demo
①HTML代码
<!-- 使用{
{}}格式，指定要被渲染的数据 -->
<div id="app">{
{message}}</div>
②vue代码
// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
// 通过id属性值指定HTML元素时，语法格式是：#id
"el":"#app",
// data属性设置了Vue对象中保存的数据
"data":{
"message":"Hello Vue!"
}
};
// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);
3、查看声明式渲染的响应式效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload=function (){
var argumentJson = {
// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
// 通过id属性值指定HTML元素时，语法格式是：#id
"el":"#app",
// data属性设置了Vue对象中保存的数据
"data":{
"message":"Hello Vue!"
}
};
// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);
}
</script>
</head>
<body>
<div id="app">{
{message}}</div>
</body>
</html>
第三节 Vue.js基本语法：绑定元素属性
1、基本语法
v-bind:HTML标签的原始属性名
2、demo
①HTML代码
<div id="app">
<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{
{}}的表达式 -->
<input type="text" v-bind:value="vueValue" />
<!-- 同样的表达式，在标签体内通过{
{}}告诉Vue这里需要渲染； -->
<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
<p>{
{vueValue}}</p>
</div>
②Vue代码
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
"el":"#app",
"data":{
"vueValue":"太阳当空照"
}
});
3、小结
本质上，v-bind:属性名="表达式"它们都是用Vue对象来渲染页面。只不过：
- 文本标签体：使用形式
- 属性：使用v-bind:属性名="表达式"形式
第四节 Vue.js基本语法：双向数据绑定
1、提出问题
而使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。
2、demo
①HTML代码
<div id="app">
<!-- v-bind:属性名 效果是从Vue对象渲染到页面 --
最低0.47元/天 解锁文章
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
