Vue快速入门
前端准备
- 编码工具：VSCode
- 依赖管理：NPM
- 项目构建：VueCli
Vue框架介绍
Vue是一套用于构建用户界面的渐进式框架。
Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
MVVM模式
MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式
Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，实现对数据的监听和绑定，自动更新View，保证视图和数据的一致性。
vscode下载
vscode官网：https://code.visualstudio.com/
vue基本用法
<!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>ffff</title>
<!-- 1、导入vue的脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2、声明要被vue所控制的DOM区域 -->
<div id="app">
{{ message }}
</div>
<!-- 3、创建vue的实例对象 -->
<script>
Vue.createApp({
// 指定数据源，即MVVM中的Model
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
内容渲染
<div id="app">
<p>姓名：{{username}}</p>
<p>姓名：{{gender}}</p>
<!-- {{}}语法不会渲染HTML内容，会以字符串的形式输出 -->
<p>姓名：{{desc}}</p>
<!-- v-html指令将desc的内容以HTML的形式渲染出来 -->
<p v-html="desc"></p>
</div>
<script>
const vm = {
data: function() {
return {
username:'nkk',
gender:'女',
desc:'<a href="http://www.baidu.com">百度</a>'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
属性绑定
<div id="app">
<!-- 渲染到标签的属性中，属性前加: 或者加v-bind: -->
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="">
</div>
<script>
const vm = {
data: function() {
return {
link:"http://www.baidu.com",
// 文本框的占位符内容
inputValue:'请输入内容',
//图片的src地址
imgSrc:'./image/1.jpg',
w:'500px'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
使用JavaScript表达式
<div id="app">
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<!-- 倒序输出 -->
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">nkk</p>
<p>{{user.name}}</p>
</div>
<script>
const vm = {
data: function() {
return {
number: 3,
ok: false,
message: 'ABC',
id: 3,
user: {
name: 'nkk'
}
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
事件绑定指令
<div id="app">
<h3>count的值为：{{count}}</h3>>
<!-- 事件监听v-on或@ -->
<button v-on:click="addCount">+1</button>
<button @click="count+=1">+1</button>
</div>
<script>
const vm = {
data: function() {
return {
count: 0
}
},
methods: {
//点击按钮，让count自增+1
addCount() {
this.count +=1
},
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
条件渲染指令
<div id="app">
<button @click="flag = !flag">Toggle Flag</button>
<!-- flag为真，v-if和v-show渲染数据，否则不会出现
flag为假，v-if都不会被创建 v-show通过css样式中display:none隐藏 -->
<p v-if="flag">请求成功---被v-if控制</p>
<p v-show="flag">请求成功---被v-show控制</p>
</div>
<script>
const vm = {
data: function() {
return {
flag: false
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
列表渲染指令
<div id="app">
<ul>
<!-- list-style: none -->
<li v-for="(user, i) in userList">索引是：{{i}}, 姓名是：{{user.name}}</li>
</ul>
</div>
<script>
const vm = {
data: function() {
return {
userList: [
{ id: 1, name: 'nkk' },
{ id: 2, name: 'zhq' },
{ id: 3, name: 'zhangsan' }
],
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
v-for中的key
<div id="app">
<!-- 添加用户区域 -->
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用户列表区域 -->
<ul>
<li v-for="(user, i) in userList" :key="user.id">
<input type="checkbox" />
姓名： {{user.name}}
</li>
</ul>
</div>
<script>
const vm = {
data: function() {
return {
userList: [
{ id: 1, name: 'nkk' },
{ id: 2, name: 'zhq' },
{ id: 3, name: 'zhangsan' }
],
name: '',
nextId: 3
}
},
methods: {
//点击添加按钮
addNewUser() {
// unshift:在数组起始位置添加元素
// 此时不能使用index作为key值，因为新添加的user会添加到数组第一位，代替旧数组的第一位
this.userList.unshift({id: this.nextId, name: this.name})
this.name = ''
this.nextId ++
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
v-for中key可以使用索引index，但是在本代码中，由于新添加的user会加到userList中的第一，原来userList的第一位index=0，添加之后变为index=1。key值不能唯一标识，所以使用user.id
NPM介绍
（Node Package Manager）是一个NodeJS包管理和分发工具。
NPM以其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个JS领域的依赖管理工具NPM最常见的用法就是用于安装和更新依赖。相当于maven中的pom.xml
要使用NPM，首先要安装Node工具
Node.js安装
Node.js安装：https://nodejs.org/en
Vue Cli
Vue CLI是Vue官方提供的构建工具，通常称为脚手架。
用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。
Vue CLI基于webpack构建，也可以通过项目内的配置文件进行配置。
安装：npm install -g @vue/cli
安装成功后就可以快速创建Vue项目，如图：vue create hello创建vue项目
安装成功后如图所示：
组件化开发
组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。
组件的构成
Vue中规定组件的后缀名是.vue
每个.vue组件都由3部分构成，分别是
- template，组件的模板结构，可以包含HTML标签及其他的组件
- script，组件的JavaScript代码
- style，组件的样式
组件间的传值
1、组件内部传值data'
在components下新建Movie.vue
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name: "moive",
data: function() {
return {
title: "深海"
}
}
}
</script>
在App.vue中导入Movie.vue
<template>
<Moive></Moive>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Moive from './components/Moive.vue'
export default {
name: 'App',
components: {
Moive
}
}
</script>
2、父组件通过props的方式传值
子组件Movie.vue
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name: "moive",
props: ["title"],
data: function() {
return {
}
}
}
</script>
父组件App.vue
<template>
<Moive title="深海"></Moive>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Moive from './components/Moive.vue'
export default {
name: 'App',
components: {
Moive
},
data: {
}
}
</script>
<template>
<Moive v-for="moive in moiveList" :key="moive.id" :title="moive.name"></Moive>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Moive from './components/Moive.vue'
export default {
name: 'App',
components: {
Moive
},
data: function() {
return {
moiveList: [
{id: 1, name: "深海"},
{id: 2, name: "你的名字"},
{id: 3, name: "白蛇缘起"}
]
}
}
}
</script>
子组件通过
props创建title属性，在父组件中得到赋值
- 子组件：被引入的组件
- 父组件：引入组件的文件
Element UI
ElementUI官网：https://element.eleme.cn/2.15/#/zh-CN
ElementUI安装
新建了一个Vue2x的项目demo_echarts，使用 npm 的方式安装ElementUI
npm i element-ui -S
ElementUI引用
在main.js中写入以下内容：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 全局注册ElementUI
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
第三方图标库
由于Element UI提供的字体较少，一般会采用其他图标库，如著名的FontAwesome。
文档地址：http://fontawesome.dashgame.com/
在vscode终端输入npm install font-awesome安装
在main.js中引入cssimport 'font-awesome/css/font-awesome.min.css'
实例：<i class="fa fa-camera-retro"></i> fa-camera-retro
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
