Vue学习笔记

最新推荐文章于 2022-11-28 22:44:12 发布

wqww_1

最新推荐文章于 2022-11-28 22:44:12 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/wqww_1/article/details/123477994

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，
用于控制网页的行为

JavaScript 框架

jQuery库
Angular
React
Vue
Axios //前端通信框架

UI 框架

ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架
Layui：轻量级框架

iView

view 是一个强大的基于 Vue 的 UI 库，有很多实用的基础组件比 elementui 的组件更丰富，主要服务于
PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式基于 npm + webpack + babel 开发，支持
ES2015 高质量、功能丰富友好的 API ，自由灵活地使用空间。

[官网地址] https://www.iviewui.com/
[Github] https://github.com/TalkingData/iview-weapp
[iview-admin] https://github.com/iview/iview-admin
备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

ElementUI

Element 是饿了么前端开源维护的 Vue UI 组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲
解详细，例子也很丰富。主要用于开发 PC 端的页面，是一个质量比较高的 Vue UI 组件库。

[官网地址] http://element-cn.eleme.io/#/zh-CN
[Github] https://github.com/ElementUI/element-starter
[vue-element-admin] https://github.com/PanJiaChen/vue-element-admin
备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

VantUI

Vant UI 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组
件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

[官网地址] https://youzan.github.io/vant/#/zh-CN/intro
[Github] https://github.com/youzan/vant

AtUI

at-ui 是一款基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。它提供了一套 npm +
webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风
格。的 UI 风格。

[官网地址] https://at-ui.github.io/at-ui/#/zh
[Github] https://github.com/at-ui/at-ui

CubeUI

cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；
扩展性强，可以方便地基于现有组件实现二次开发。

[官网地址] https://didi.github.io/cube-ui/#/zh-CN
[Github] https://github.com/didi/cube-ui/

mpvue

mpvue 是美团开发的一个使用 Vue.js 开发小程序的前端框架，目前支持微信小程序、百度智能小程
序，头条小程序和支付宝小程序。框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器
compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。

[官网地址] http://mpvue.com/
[Github] https://github.com/Meituan-Dianping/mpvue

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序
量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元
素。

[官网地址] https://weui.io/
[Github] https://github.com/weui/weui.git

MVVM模式

MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转
换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在这里插入图片描述

优点

低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可复用：你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

MVVM 的组成部分

在这里插入图片描述

基本语法

1、v-bind

<body>
<div id="app">
<!--
如果要将模型数据绑定在html属性中
则使用 v-bind 指令,此时title中显示的是模型数据
-->
<h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">我是标题</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>

2、v-if 系列

v-if
v-else-if
v-else

<body>
<div id="app">
<!--
=== 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
-->
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>who</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'A'
}
})
</script>
</body>

3、v-for

<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>

var vm = new Vue({
el: '#app',
data: {
//items数组
items: [
{message: '狂神说Java'},
{message: '狂神说前端'}
]
}
});

4、v-on

<body>
<div id="app">
<!--
在这里我们使用了 v-on 绑定了 click 事件
并指定了名为 sayHi 的方法
-->
<button v-on:click="sayHi">点我</button>
<!-- v-on 指令的简写形式 @ -->
<button @click="sayHi">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
},
// 方法必须定义在 Vue 实例的 methods 对象中
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
}
});
</script>
</body>

5、v-model

双向数据绑定

<body>
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: 'kuangshen'
}
}
})
</script>
</body>

组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、

<body>
<div id="app">
<ul>
<!-- 有点类似自定义标签 -->
<my-component-li></my-component-li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
// 先注册组件
Vue.component('my-component-li', {
template: '<li>Hello li</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#app'
});
</script>
</body>

组件传值（父传子）

<body>
<div id="app">
<ul>
<my-component-li v-for="item in items" v-bind:item="item">
</my-component-li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
// 先注册组件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#app',
data: {
items: ["张三", "李四", "王五"]
}
});
</script>
</body>

计算属性

它就是一个能够将计算结果缓存
起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存

<body>
<div id="app">
<!--注意，一个是方法，一个是属性-->
<p>调用当前时间的方法：{{currentTime1()}}</p>
<p>当前时间的计算属性：{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: {
//currentTime2 ，这是一个属性！不是方法
currentTime2: function () {
this.message;
return Date.now();
}
}
})
</script>
</body>

插槽

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组
件的场景中;

第一步: 定义一个待办事项的组件

<todo></todo>
<script type="text/javascript">
// 定义一个待办事项的组件
Vue.component('todo', {
template: '<div>\
<div>待办事项</div>\
<ul>\
<li>学习狂神说Java</li>\
</ul>\
</div>'
});
</script>

第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!

1、将上面的代码留出一个插槽,即 slot

Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});

2、定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件

Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});

//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}</li>'
});

3、实例化 Vue 并初始化数据

new Vue({
el: '#app',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
})

4、将这些值,通过插槽插入

<div id="app">
<todo>
<todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
v-bind:item="item" v-bind:index="index"></todo-items>
</todo>
</div>

Axios

1、咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。

{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com",
"page": 1,
"address": {
"street": "洪崖洞",
"city": "重庆市",
"country": "中国"
}
}

2、测试代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>狂神说Java</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
<div>名称：{{info.name}}</div>
<div>地址：{{info.address.country}}-{{info.address.city}}-
{{info.address.street}}</div>
<div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
</div>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el: '#vue',
	data() {
	return {
		info: {
			name: null,
			address: {
			country: null,
			city: null,
			street: null
		},
		url: null
		}
	}
},
mounted() { //钩子函数
axios
.get('data.json')
.then(response => (this.info = response.data));
}
});
</script>
</body>
</html>

Vue的生命周期

在这里插入图片描述

初识路由

路由下载

npm install vue
npm install vue-router

引入js

<!--资源导入: 一定要注意导入顺序的问题，大坑！！！-->
<script src="./lib/vue.min.js"></script>
<script src="./lib/vue-router.min.js"></script>

<!-- app -->
<div id="app">
	<h1>Hello App!</h1>
	<p>
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

编写js

<script>
// 1. 定义（路由）组件。
// 复杂的组件也可以从独立的vue文件中引入
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>

Vue-Cli

安装 vue-cli

cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list
# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue
# 一路都选择no即可;
cd myvue
npm install
npm run dev

入口文件main.js

路由安装

npm install vue-router --save-dev

配置路由

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'
// 安装路由
Vue.use(Router);
// 配置路由
export default new Router({
routes: [
{
// 路由路径
path: '/content',
// 路由名称
name: 'content',
// 跳转到组件
component: Content
}
]
});

Element-ui

npm 安装依赖

npm install vue
npm i element-ui -S

vue-element-admin

wqww_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

前端三要素HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为JavaScript 框架jQuery库AngularReactVueAxios //前端通信框架UI 框架ElementUI、iview、ice：
复制链接

扫一扫