java项目-谷粒商城，前端开发基础知识_谷粒商城前端工程-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoshuzuiwuqing/article/details/131684159

Vue

MVVM 思想

M：即 Model，模型，包括数据和一些基本操作

 V：即 View，视图，页面渲染结果

 VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。

而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：

 只要我们 Model 发生了改变，View 上自然就会表现出来。

 当用户修改了 View，Model 中的数据也会跟着改变。把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上

Vue 简介

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

3、入门案例

1）、安装

官网文档提供了 3 中安装方式：

1. 直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。

2. 通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式

3. 通过 npm 安装。这种方式也是官网推荐的方式，需要 nodejs 环境。本课程就采用第三种方式

2）、创建示例项目

1、新建文件夹 hello-vue，并使用 vscode 打开

2、使用 vscode 控制台，npm install -y；项目会生成 package-lock.json 文件，类似于 maven 项目的 pom.xml 文件。

3、使用 npm install vue，给项目安装 vue；项目下会多 node_modules 目录，并且在下面有一个 vue 目录。

3）、HelloWorld

在 hello.html 中，我们编写一段简单的代码。 h2 中要输出一句话：`xx 非常帅`。前面的`xx`是要渲染的数据。

4）、vue 声明式渲染

页面代码
<body>
<div id="app">
<h1>{{name}}，非常帅！！！</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
name: "张三"
}
});
</script>
</body>

 首先通过 new Vue()来创建 Vue 实例

 然后构造函数接收一个对象，对象中有一些属性：

 el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div

 data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

 name：这里我们指定了一个 name 属性

 页面中的`h2`元素中，我们通过{{name}}的方式，来渲染刚刚定义的 name 属性。

打开页面查看效果：

5）、双向绑定

我们对刚才的案例进行简单修改：
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}}，非常帅！！！有{{num}}个人为他点赞。
</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5
}
});
</script>
</body>

双向绑定：

效果：我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和视图的关联即可（MVVM）

6）、事件处理

给页面添加一个按钮：
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">关注</button>
<h2>
{{name}}，非常帅！！！有{{num}}个人为他点赞。
</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5
}
});
</script>
</body>

 这里用`v-on`指令绑定点击事件，而不是普通的`onclick`，然后直接操作 num

 普通 click 是无法直接操作 num 的。

 未来我们会见到更多 v-xxx，这些都是 vue 定义的不同功能的指令。

简单使用总结：

1）、使用 Vue 实例管理 DOM

2）、DOM 与数据/事件等进行相关绑定

3）、我们只需要关注数据，事件等处理，无需关心视图如何进行修改

4、概念

1、创建 Vue 实例

每个 Vue 应用都是通过用Vue 函数创建一个新的 Vuee 实例开始的

let app = new Vue({
});

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括： - el - data - methods 等等接下来我们一一介绍

2、模板或元素

每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染。我们可以通过 el 属性来指定。例如一段 html 模

<div id="app">
</div>

然后创建 Vue 实例，关联这个 div

let vm = new Vue({
el: "#app"
})

这样，Vue 就可以基于 id 为`app`的 div 元素作为模板进行渲染了。在这个 div 范围以外的部分是无法使用 vue 特性的。

3、数据

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是“响应式 “系统。

html：
<div id="app">
<input type="text" v-model="name" />
</div>

JS:
let vm = new Vue({
el: "#app",
data: {
name: "刘德华"

 name 的变化会影响到`input`的值

 input 中输入的值，也会导致 vm 中的 name 发生改变

4、方法

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用。
Html：
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>

JS：
let vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
add: function () {
// this 代表的当前 vue 实例
this.num++;
}
}
})

1、插值表达式

1）、花括号

格式：{{表达式}} 说明：

 该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）

 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;

 可以直接获取 Vue 实例中定义的数据或函数

2）、插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的`{{}}`，加载完毕后才显示正确数据，我们称为插值闪烁。我们将网速调慢一些，然后刷新页面，试试看刚才的案例：

3）、v-text 和 v-html

可以使用 v-text 和 v-html 指令来替代{{}}

说明：

 v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出

 v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

示例：

<div id="app">
v-text:<span v-text="hello"></span> <br />
v-html:<span v-html="hello"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
hello: "<h1>大家好</h1>"
}
})
</script>

2、v-bind html

属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；而且在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。

1）、绑定 class

<div class="static" v-bind:class="{ active: isActive, 'text-danger'
: hasError }">
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
hasError: false
}
})
</script>

2）、绑定 style

`v-bind:style` 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。style 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，这种方式记得用单引号括起来) 来命名。例如：font-size-->fontSize

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz
e + 'px' }"></div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>

3）、绑定其他任意属性

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontS
ize + 'px' }"
v-bind:user="userName">
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
userName: 'zhangsan'
}
})
</script>

4）、v-bind 缩写

<div id="app" :style="{ color: activeColor, fontSize: fontSize +
'px' }"
:user="userName">
</div>

3、v-model

刚才的 v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有： - input - select - textarea - checkbox - radio - components（Vue 中的自定义组件）基本上除了最后一项，其它都是表单的输入项。

<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br />
<input type="checkbox" v-model="language" value="PHP" />PHP<br />
<input type="checkbox" v-model="language" value="Swift" />Swift<br />
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
language: []
}
})
</script

4、v-on

1、基本用法

v-on 指令用于给页面元素绑定事件。语法： v-on:事件名="js

<div id="app">
<!--事件中直接写 js 片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
<button v-on:click="decrement">取消</button>
<h1>有{{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement() {
this.num--; //要使用 data 中的属性，必须 this.属性名
}
}
})
</script>

2、事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 `v-on` 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

 `.stop` ：阻止事件冒泡到父元素

 `.prevent`：阻止默认事件发生

 `.capture`：使用事件捕获模式

 `.self`：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

 `.once`：只执行一次

<div id="app">
<!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu.prevent="num++">点赞</button>
<br />
<!--右击事件，不阻止默认事件发生-->
<button v-on:contextmenu="decrement($event)">取消</button>
<br />
<h1>有{{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement(ev) {
// ev.preventDefault();
this.num--;
}
}
})
</script>

3、按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符:

<input v-on:keyup.13="submit">
记住所有的 `keyCode` 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

4、组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 `.ctrl`

 `.alt`

 `.shift

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

5、v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

1、遍历数组

语法：v-for="item in items"

 items：要遍历的数组，需要在 vue 的 data 中定义好。

 item：迭代得到的当前正在遍历的元素

<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }
]
},
})
</script>

2、数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：语法：v-for="(item,index) in items"

 items：要迭代的数组

 item：迭代得到的数组元素别名

 index：迭代到的当前元素索引，从 0 开始

<div id="app">
<ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>

3、遍历对象

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"

v-for="(value,key) in object"

v-for="(value,key,index) in object"

 1 个参数时，得到的是对象的属性值

 2 个参数时，第一个是属性值，第二个是属性名

 3 个参数时，第三个是索引，从 0 开

<div id="app">
<ul>
<li v-for="(value, key, index) in user">
{{index + 1}}. {{key}} - {{value}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
user: { name: '张三', gender: '男', age: 18 }
}
})
</script>

4、Key

用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用”策略有效的提高渲染的效率。

<ul>
<li v-for="(item,index) in items" :key=”index”></li>
</ul>
<ul>
<li v-for="item in items" :key=”item.id”></li>
</ul>

6、v-if 和 v-show

1、基本用法

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。 v-show，当得到结果为 true 时，所在的元素才会被显示。语法：v-if="布尔表达式", v-show="布尔表达式",

<div id="app">
<button v-on:click="show = !show">点我呀</button>
<br>
<h1 v-if="show">
看到我啦？！
</h1>
<h1 v-show="show">
看到我啦？！show
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>

2、与 v-for 结合

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。修改 v-for 中的案例，添加 v-if

<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>

7、v-else 和 v-else-if

<div id="app">
<button v-on:click="random=Math.random()">点我呀
</button><span>{{random}}</span>
<h1 v-if="random >= 0.75">
看到我啦？！v-if >= 0.75
</h1>
<h1 v-else-if="random > 0.5">
看到我啦？！v-else-if > 0.5
</h1>
<h1 v-else-if="random > 0.25">
看到我啦？！v-else-if > 0.25
</h1>
<h1 v-else>
看到我啦？！v-else
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
random: 1
}
})
</script>

6、计算属性和侦听器

1、计算属性（computed）

<div id="app">
<ul>
<li>西游记：价格{{xyjPrice}}，数量：
<input type="number" v-model="xyjNum"></li>
<li>水浒传：价格{{shzPrice}}，数量：
<input type="number" v-model="shzNum"></li>
<li>总价：{{totalPrice}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
xyjPrice: 56.73,
shzPrice: 47.98,
xyjNum: 1,
shzNum: 1
},
computed: {
totalPrice(){
return this.xyjPrice*this.xyjNum + this.shzPrice*th
is.shzNum;
}
},
})
</script>

2、侦听（watch）

<div id="app">
<ul>
<li>西游记：价格{{xyjPrice}}，数量：
<input type="number" v-model="xyjNum"></li>
<li>水浒传：价格{{shzPrice}}，数量：
<input type="number" v-model="shzNum"></li>
<li>总价：{{totalPrice}}</li>
{{msg}}
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
xyjPrice: 56.73,
shzPrice: 47.98,
xyjNum: 1,
shzNum: 1,
msg:""
},
computed: {
totalPrice(){
return this.xyjPrice*this.xyjNum + this.shzPrice*th
is.shzNum;
}
},
watch: {
xyjNum(newVal, oldVal){
if(newVal >= 3){
this.msg = "西游记没有更多库存了";
this.xyjNum = 3;
}else{
this.msg = "";
}
}
}
})
</script>

3、过滤器（filters）

<body>
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<!-- 使用代码块实现，有代码侵入 -->
<td>{{user.gender===1? "男":"女"}}</td>
</tr>
</table>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
}
});
</script>

1、局部过滤器

let app = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
},
// filters 定义局部过滤器，只可以在当前 vue 实例中使用
filters: {
genderFilter(gender) {
return gender === 1 ? '男~' : '女~'
}
}
});

2、全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1)
})

7、组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在 vue 里，所有的 vue 实例都是组

1、全局组件

<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter", {
template: '<button v-on:click="count++">你点了
我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
})
let app = new Vue({
el: "#app"
})
</script>

2、组件的复用

<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>

3、局部组件

const counter = {
template: '<button v-on:click="count++">你点了
我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
};
然后在 Vue 中使用它：
let app = new Vue({
el: "#app",
components: {
counter: counter // 将定义的对象注册为组件
}
})

8、生命周期钩子函数

1、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。生命周期：你不需要立马弄明白所有的东西。

2、钩子函数

 beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是 init。

 created：在创建实例之后进行调用。

 beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

 mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。此时页面中的{{name}}已被渲染成张三

 beforeDestroy：该函数将在销毁实例前进行调用。

 destroyed：改函数将在销毁实例时进行调用。

 beforeUpdate：组件更新之前。

 updated：组件更新之后。

<body>
<div id="app">
<span id="num">{{num}}</span>
<button v-on:click="num++">赞！</button>
<h2>
{{name}}，非常帅！！！有{{num}}个人点赞。
</h2>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=========beforeCreate=============");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show());
console.log("html 模板未加载：
" + document.getElementById("num"));
},
created: function () {
console.log("=========created=============");
console.log("数据模型已加载：" + this.name, this.num);
console.log("方法已加载：" + this.show());
console.log("html 模板已加载：
" + document.getElementById("num"));
console.log("html 模板未渲染：
" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=========beforeMount=============");
console.log("html 模板未渲染：
" + document.getElementById("num").innerText);
},
mounted() {
console.log("=========mounted=============");
console.log("html 模板已渲染：
" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=========beforeUpdate=============");
console.log("数据模型已更新：" + this.num);
console.log("html 模板未更新：
" + document.getElementById("num").innerText);
},
updated() {
console.log("=========updated=============");
console.log("数据模型已更新：" + this.num);
console.log("html 模板已更新：
" + document.getElementById("num").innerText);
}
});
</script>

9、vue 模块化开发

1、npm install webpack -g

全局安装 webpack

2、npm install -g

@vue/cli-init 全局安装 vue 脚手架

3、初始化 vue 项目；

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目

4、启动 vue 项目；

项目的 package.json 中有 scripts，代表我们能运行的命令 npm start = npm run dev：启动项目 npm run