JavaWeb项目之尚硅谷书城：（六）Vue与前后端分离

6.1 Vue简介

Vue (读音 /vjuː/，类似于view) 是一套基于JavaScript，用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链 (opens new window)以及各种支持类库 (opens new window)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

导入Vue的外部js文件就能够使用Vue框架了。

6.2 声明式渲染

6.2.1 概念

声明式是相对于编程式而言的。

• 声明式：告诉框架做什么，具体操作由框架完成
• 编程式：自己编写代码完成具体操作

渲染

上图含义解释：

• 蓝色方框：HTML标签
• 红色圆形：动态、尚未确定的数据
• 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
• 渲染：程序计算动态数据得到具体数据的过程

6.2.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);

查看声明式渲染的响应式效果

通过验证Vue对象的『响应式』效果，我们看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系，同时看到Vue在背后确实是做了大量的工作。

6.3 Vue基本语法

6.3.1 绑定元素属性

v-bind:HTML标签的原始属性名

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":"太阳当空照"
	}
});

6.3.2 双向数据绑定

页面上数据被修改后，Vue对象中的数据属性也跟着被修改

HTML代码

<div id="app">
	<!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
	<!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->
	<input type="text" v-model:value="vueValue" />
	
	<p>{
  
  {vueValue}}</p>
</div>

Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
   
   
	"el":"#app",
	"data":{
   
   
		"vueValue":"太阳当空照"
	}
});

:value可以省略

<input type="text" v-model="vueValue" />

去除前后空格：trim修饰符

实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。

<input type="text" v-model.trim="vueValue" />

Vue会帮助我们在文本框失去焦点时自动去除前后空格。

6.3.3 条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。

1. v-if

   HTML代码

   <div id="app">
   	<h3>if</h3>
   	<img v-if="flag" src="/pro03-vue/./images/one.jpg" />
   	<img v-if="!flag" src="/pro03-vue/./images/two.jpg" />
   </div>
   

   Vue代码

   var app = new Vue({
        
        
       "el":"#app",
       "data":{
        
        
           "flag":true
       }
   });
   

2. v-if和v-else

   HTML代码

   <div id="app02">
   	<h3>if/else</h3>
   	<img v-if="flag" src="/pro03-vue/./images/one.jpg" />
   	<img v-else="flag" src="/pro03-vue/./images/two.jpg" />
   </div>
   

   Vue代码

   var app02 = new Vue({
        
        
       "el":"#app02",
       "data":{
        
        
           "flag":true
       }
   });
   

3. v-show

   HTML代码

   <div id="app03">
   	<h3>v-show</h3>
   	<img v-show="flag" src="/pro03-vue/./images/mi.jpg" />
   </div>
   

   Vue代码

   var app03 = new Vue({
        
        
       "el":"#app03",
       "data":{
        
        
           "flag":true
       }
   });
   

6.3.4 列表渲染

1. 迭代一个简单的数组

   HTML代码

   <div id=