文章目录
vue
1，MVVM思想
M:即model，模型，包括数据和一些基本操作
V:即view，视图，页面渲染结果
VM:即view-model，模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前，开发人员从后端获取需要的数据模型，然后通过DOM操作Model渲染到view中。
而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后可以同步到Model中
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何相互影响
只要我们Model发生了改变,View上自然就会表现出来
当用户修改了View，Model中的数据也会跟着改变
2vue简介
vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上
手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库
结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网：https://cn.vuejs.org/
参考：https://cn.vuejs.org/v2/guide/
Git 地址：https://github.com/vuejs
尤雨溪，Vue.js 创作者，Vue Technology 创始人，致力于 Vue 的研究开发。
3入门案例
1）安装
官网文档提供了 3 中安装方式：
-
直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
-
通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式
-
通过 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）xx非常帅
在 hello.html 中，我们编写一段简单的代码。
h2 中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>
{{name}}非常帅
</h2>
</div>
</body>
</html>
4）vue声明式渲染
<body>
<div id="app">
<h2>
{{name}}非常帅
</h2>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
name:"张三"
}
});
</script>
</body>
- 首先通过new Vue()来创建Vue实例
- 然后构造函数接受一个对象，对象中有一些属性：
- el:是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data:数据，数据一个对象，里面有很多属性，都可以渲染到视图中
- name:这里是指定了一个name属性
- 页面中的`h2`元素中，我们通过{{name}}的方式，来渲染刚刚定义的 name 属性。
更神奇的在于，当你修改name属性时，页面会跟着变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IlL8UJan-1648987919516)(C:\Users\靓仔在此\AppData\Roaming\Typora\typora-user-images\image-20220331211738355.png)]
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输出到页面
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
简单使用总结：
1）使用vue实例管理DOM
2）DOM与数据/事件等进行相关绑定
3）我们只需要关注数据，事件等处理，无需关心视图如何进行修改
4概念
1，创建Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
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 发生改变，所有相关的视图都将重新渲染，这就是“响应式
“系统
<div id="app"> <input type="text" v-model="name" /> </div>
let vm = new Vue({ el: "#app", data: { name: "刘德华"}})
- name的变化会影响到`input`的值
- input中输入的值，也会导致vm中的name发生变化
4，方法
Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用
<div id="app"> {{num}} <button v-on:click="add">加</button> </div>
let vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
add: function () {
// this 代表的当前vue 实例
this.num++;
}
}
})
5,安装vue-devtools方便调试
- 将软件包中的vue-devtools解压
- 打开chrome设置->拓展程序
- 开启开发模式，并加载插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3cOLQvx-1648987919519)(C:\Users\靓仔在此\AppData\Roaming\Typora\typora-user-images\image-20220331214651810.png)]
- 打开浏览器控制台，选择vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HwtY4ckt-1648987919519)(C:\Users\靓仔在此\AppData\Roaming\Typora\typora-user-images\image-20220331214729987.png)]
安装vscode的vue插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hYbyuuY-1648987919520)(C:\Users\靓仔在此\AppData\Roaming\Typora\typora-user-images\image-20220331214917965.png)]
安装这个插件就可以有语法提示
5指令
什么是指令？
- 指令 (Directives) 是带有 `v-` 前缀的特殊特性。
- 指令特性的预期值是：单个 JavaScript 表达式。
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
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>
结果<div style="color:red";font-size:30px;"></div>
3)绑定其他任意属性
<div id="app" v-bind:style="{ color: activeColor, fontSize:
fontSize + 'px' }"
v-bind:user="userName">
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
userName: 'zhangsan'
}
})
</script>
效果： <div id="app" user="zhangsan" style="color: red; font-size: 30px;"></div>
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>
多个CheckBox对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是
boolean 类型
radio 对应的值是 input 的 value 值
text 和textarea 默认对应的 model 是字符串
select单选对应字符串，多选对应也是数组
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>
**另外，事件绑定可以简写，例如`V-on：click='add'`可以简写为`@click=add`**
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 在监听键盘事件时添
加按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的KeyCode比较困难，所以vue起了别名
<!--同上-->
<input v-on:keyup.enter="sumbit">
<!--缩写语法-->
<input @keyup.enter="sumbit">
全部的按键别名：
- `.enter`
- `.tab`
- `.delete` (捕获“删除”和“退格”键)
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`
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>
4Key
用来标识每一个元素的唯一特征，这样 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>
如果 items 是数组，可以使用 index 作为每个元素的唯一标识
如果 items 是对象数组，可以使用 item.id 作为每个元素的唯一标识
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>
效果：只显示女性
7v-else和v-else-if
v-else 元素必须紧跟在带 v-if 或者 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>
8计算属性和侦听器
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）
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,过滤器(fiters)
过滤器不改变真正的data,而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式
<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,局部过滤器
注册在当前 vue 实例中，只有当前实例能用
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 ? '男~' : '女~'
}
}
});
<!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
<td>{{user.gender | genderFilter}}</td>
2,全局过滤器
// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1)
})
任何 vue 实例都可以使用： <td>{{user.name | capitalize}}</td>
过滤器常用来处理文本格式的操作。过滤器可以用在两个地方：双花括号插值和V-bind表达式
9组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部
分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发
在vue里，所有vue实例都是组件
例如：页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文的组件
1全局组件
我们通过 Vue 的 component 方法来定义一个全局组件。
<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>
- 组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函 数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
- 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
- 全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
- data 必须是一个函数，不再是一个对象。
2,组件的复用
定义好的组件，可以任意复用多次：
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
组件的data属性必须事函数
一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
3，局部组件
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
const counter = {
template: '<button v-on:click="count++">你点了
我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
};
然后在vue中使用它：
let app = new Vue({
el: "#app",
components: {
counter: counter
// 将定义的对象注册为组件
}
})
- components 就是当前 vue 对象子组件集合。
- 其 key 就是子组件名称
- 其值就是组件对象名
- 效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例 中使用
简写
let app = new Vue({
el: "#app",
components: {
counter // 将定义的对象注册为组件
}
})
10生命周期钩子函数
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：组件更新之前。
- 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>
11 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 build：将项目打包
5模块化开发
1，项目结构
- 进入页面首先加载 index.html 和 main.js 文件。
- main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的
元素。使用了 router，导入了 App 组件。并且使用标签 引用了这个组件
- 第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。 但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件
- 所以第一次访问，显示图片和 HelloWorld 组件
- 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签
2 vue单文件组件
Vue单文件组件模块有三个部分
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
Template：编写模板 Script：vue实例配置 Style：样式
3 vscode添加用于代码片段(快速生成)
文件–>首选项–>用户代码片段–>点击新建代码片段–取名 vue.json 确定
{
"生成 vue 模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import 引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性 类似于 data 概念",
"computed: {},",
"//监控 data 中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前 this 实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问 DOM 元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发 ",
"}",
"</script>",
"<style scoped>",
"@import url($3); /*引入公共 css 类*/",
"$4",
"</style>"
],
"description": "生成 vue 模板"
}
}
4,导入 element-ui 快速开发
1、安装 element-ui：
npm i element-ui
2、在 main.js 中引入 element-ui 就可以全局使用了。
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
3、将 App.vue 改为 element-ui 中的后台布局
4、添加测试路由、组件，测试跳转逻辑
(1) 、参照文档 el-menu 添加 router 属性
(2) 、参照文档 el-menu-item 指定 index 需要跳转的地址
物理删除：物理删除，数据库中也直接删除了
* 2 逻辑删除：在表中定义一个标识符 0或1
* 1)配置全局的逻辑删除规则（省略）
* 2）配置逻辑删除的组件bean（省略） 高版本的3.2及以上
* 3）给bean加上逻辑删除注解@TableLogic
mybatis-plus:
global-config:
db-config:
logic-delete-value: 1
logic-not-delete-value: 0
/**
* 是否显示[0-不显示，1显示]
*/
@TableLogic(value = "1",delval = "0")
ur Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
Template：编写模板 Script：vue实例配置 Style：样式
5 vscode添加用于代码片段(快速生成)
文件–>首选项–>用户代码片段–>点击新建代码片段–取名 vue.json 确定
{
"生成 vue 模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import 引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性 类似于 data 概念",
"computed: {},",
"//监控 data 中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前 this 实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问 DOM 元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发 ",
"}",
"</script>",
"<style scoped>",
"@import url($3); /*引入公共 css 类*/",
"$4",
"</style>"
],
"description": "生成 vue 模板"
}
}
6,导入element-ui快速开发
1、安装 element-ui：
npm i element-ui
2、在 main.js 中引入 element-ui 就可以全局使用了。
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
3、将 App.vue 改为 element-ui 中的后台布局
4、添加测试路由、组件，测试跳转逻辑
(1) 、参照文档 el-menu 添加 router 属性
(2) 、参照文档 el-menu-item 指定 index 需要跳转的地址
2460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
