leo">
vue入门及使用脚手架创建第一个vue项目
目录
- 前言
- 一、Vue
-
- 1.什么是Vue
- 2. Vue版本
- 3. MVVM
- 4. Vue的特性
- 二、Vue的基本使用
-
- 1. 基本使用步骤
- 2. Vue初体验
- 3. Vue的调试工具
- 四、Vue的指令
-
- 1. 内容渲染指令
- 2. 属性绑定指令
- 3. 事件绑定指令
- 4. 双向绑定指令
- 5. 条件渲染指令
- 6. 列表渲染指令
- 五、过滤器(filters)
-
- 1. 简单使用
- 2. 过滤器分类
- 3. 过滤器连续调用
- 六、侦听器
-
- 1. 什么是watch侦听器
- 2. 侦听器格式
- 七、计算属性
-
- 1. 什么是计算属性
- 2. 特点
- 八、vue-cli
-
- 1. 什么是单页面程序？
- 2. 什么是vue-cli
- 3. 脚手架创建项目
- 4.vue项目目录分析
- 九、组件化开发
-
- 1. 什么是组件化开发
- 2. Vue组件的组成部分
- 总结
前言
本文介绍vue入门，包含vue指令、过滤器、侦听器、计算属性等内容，最后会使用vue-cli脚手架工具创建一个自己的vue项目，刚学习vue的小伙伴儿快来看看~
一、Vue
1.什么是Vue
一套用于构建用户界面的前端框架
-
构建用户框架：
用Vue往HTML页面中填充数据，非常的方便 -
框架：
现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
要学习Vue，就是在学习Vue框架中规定的用法
Vue的指令、组件（是对 UI 结构的复用）、路由、Vuex、Vue组件库
2. Vue版本
当前共有三个大版本
-
2.x版本是目前企业级项目开发中的主流版本
-
3.x版本于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
-
1.x版本几乎被淘汰，不再建议学习与使用
3. MVVM
是Vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel。
- Model:表示当前页面渲染时所以来的数据源
- View:表示当前页面所渲染的DOM结构
- ViewModel:表示Vue实例，它是MVVM的核心,他把当前页面的数据源和页面结构连接到了一起
4. Vue的特性
- 数据驱动视图
在使用了Vue的页面中，Vue会监听数据的变化，从而自动重新渲染页面结构
注：数据驱动视图 是单向的数据绑定
优点：当页面数据发生变化时，页面会自动重新渲染
- 双向数据绑定
js数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化时，会被Vue自动获取到，并更新到js数据中
优点：
- 开发者把不再需要手动操作DOM元素，来获取表单元素最新的值！
- 在网页中，form表单负责收集数据，Ajax负责提交数据
二、Vue的基本使用
1. 基本使用步骤
- 导入vue.js的script脚本文件
- 在页面中声明一个将要被Vue所控制的DOM区域
- 创建VM实例对象(vue实例对象)
2. Vue初体验
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue初体验title>
head>
<body>
<div id="app">{{username}}div>
<script src="./lib/vue-2.6.12.js">script>
<script>
// 创建vue的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'leo'
}
})
script>
body>
html>
3. Vue的调试工具
Vue官方提供的调试工具
-
下载地址：Chrome浏览器
-
配置：打开Chrome浏览器，点击右上角三个小点===> 点击更多工具 == =>点击扩展程序===>找到Vue调试工具，点击详细信息—>勾选允许访问文件网址即可
四、Vue的指令
概念：是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
1. 内容渲染指令
v-text:将data中的数据渲染到页面上，但是会覆盖双标签内原有内容。
{{}}：插值表达式(Mustache)，可以书写简单的js代码，例如三元表达式…
v-html:可以把带有html标签的字符串渲染为真正的HTML内容
注：插值表达式只能用在元素内容节点中，不能用在元素的属性节点中！
2. 属性绑定指令
v-bind: 可以使用为元素的属性动态绑定值。可以简写为英文状态下的:
3. 事件绑定指令
v-on: 用来绑定事件，事件在methods中定义。该指令可以简写为@
-
$event事件对象
vue提供了内置变量，名字叫做$event，它就是原生DOM的事件对象e -
事件修饰符
阻止默认行为 @click.prevent = “”(绑定事件，同时阻止默认行为)
.stop——阻止事件冒泡
.capture——以捕获模式触发当前的事件处理函数
.once——绑定的事件只触发一次
.self——只有在event.target -
按键修饰符
监听键盘事件的时候，我们经常需要判断详细的按键。可以为键盘事件添加按键修饰符。- 例：
@keyup.esc——当esc键弹起的时候触发
@keyup.enter——当enter弹起的时候触发
- 例：
4. 双向绑定指令
v-model: 用来辅助开发者在不操作DOM的前提下，快速获取表单的值。
注：input输入框、textarea、select可以使用这个指令
- v-model指令的修饰符
.number——自动将用户输入值转为数值类型
.trim——自动过滤用户输入字符首尾空白字符
.lazy——在"change"的时而非"input"时更新
5. 条件渲染指令
用来辅助开发者按需控制DOM的显示与隐藏，布尔值真假控制
v-if:每次动态创建或移除元素，实现元素的显示和隐藏
v-show:动态为元素添加display:none样式，来实现元素的显示和隐藏
v-else-if = "判断条件":需要和v-if和v-else搭配使用
结论：
- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能不需要被展示出来，此时v-if性能更好
- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
注：v-else-if和v-else需要和v-if 配合使用
6. 列表渲染指令
v-for:用来辅助开发者基于一个数组来循环渲染一个列表结构
- 参数：
- item——循环的时候每一项
- index ——(可选)循环时每一项的索引值
代码示例(如下):
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{id:1, name: 'Leo'},
{id:2, name: 'Tom'}
]
}
}
}
</script>
结论
- 一定要绑定一个 :key属性（即提升性能，又能防止列表状态紊乱）。
- key的值必须具有唯一性
- 尽量把id作为key的值
- 使用index的值当做key的值没有任何意义
- 官方对key的值类型，是有要求的：字符串或数字类型
五、过滤器(filters)
是vue为开发者提供的功能，常用与文本的格式化。
可以用在两个地方：插值表达式和v-bind属性绑定
过滤器应该被添加到JavaScript表达式的尾部，由“管道符”(|)进行调用
1. 简单使用
过滤器函数，必须被定义到 filters节点之下
代码示例(如下):
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filters过滤器title>
head>
<body>
<div id="app">
<p>message的值为:{{message | capi}}p>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 过滤器函数必须写在 filters节点下
filters: {
//过滤器函数中的形参val,代表 管道符 之前的那个值
capi(val) {
let first = val.charAt(0).toUpperCase()
let other = val.slice(1)
//过滤器函数中必须有返回值
return first + other
}
}
})
script>
body>
html>
2. 过滤器分类
-
私有过滤器
写在vm实例中的，参考上述例子 -
全局过滤器
Vue.filter()方法接收两个参数- 第1个参数，是全局过滤器的"名字"
- 第2个参数，是全局过滤器的处理函数
注:如果全局过滤器和私有过滤器名字重复，采取‘就近原则’，优先使用私有过滤器
3. 过滤器连续调用
{{ xxx | yyy | zzz }}
最终展示的最后一个过滤器的返回值
六、侦听器
1. 什么是watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
- 语法格式
const vm = new Vue({
el:'#app',
data:{username:''},
//所有的侦听器，都应该被定义到 watch 节点下
watch:{
//侦听器本质上是个函数，要监视哪个数据的变化，就把数据名作为方法名即可
uername(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
2. 侦听器格式
-
方法格式的侦听器
缺点：
- 无法在刚进入页面的时候，自动触发
- 如果侦听的是一个对象，对象中的属性发生了变化，不会触发侦听器
-
对象格式的侦听器
优点：
- 可以通过 immediate 选项，让侦听器自动触发
- 可以通过deep 选项，深度监听数据的变化
代码示例(如下):
const vm = new Vue({
el:'#app',
data:{
username:'admin'
},
watch:{
username:{
//侦听器的处理函数
handle(newVal,oldVal){
console.log(newVal,oldVal)
},
//immediate 选项的默认值是false
//immediate 的作用是：控制侦听器是否自动触发一次
immediate:true
}
}
})
深度侦听(deep:true):默认值是false
开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
const vm = new Vue({
el:'#app',
data:{
info:{
username:''
}
},
watch:{
'info.username':{
handler(newVal){
console.log(newVal)
},
immediate:true,
//进行深度侦听，对象内的值发生变化也能侦听到
deep:true
}
}
})
七、计算属性
1. 什么是计算属性
计算属性指的是通过一系列运算之后，最终得到一个属性值
- 语法格式
所有计算属性需要放到 computed 节点之下
代码示例(如下):
const vm = new Vue({
el:'#app',
data:{
r:0,
g:0,
b:0
},
methods:{
},
computed:{
//作为一个计算属性，被定义成了方法格式
//最终，在这个方法中，要返回一个生成好的rgb(x,x,x)的字符串
rgb(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
优点
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值
2. 特点
- 定义的时候，要被定义为’方法’
- 在使用计算属性的时候，当普通属性使用即可
八、vue-cli
1. 什么是单页面程序？
(Single Page Application)简称SPA。
指的是一个web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面中完成的
2. 什么是vue-cli
官网:vue-cli
是vue.js开发的标准工具。简化了程序员基于webpack创建工程化的vue项目的过程
3. 脚手架创建项目
-
安装
打开任意终端窗口，执行命令:npm install -g @vue/cli -
使用
安装完毕后在终端中执行命令vue create 项目名称，创建vue 项目。
手动创建项目
选择项目中的配置项（Linter为代码校验工具，可以选择不安装）
后续按照下图选择即可
4.vue项目目录分析
- assets 文件夹：存放项目中用到的静态资源文件，例如css样式表、图片资源
- components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
- main.js ：项目的入口文件
- App.vue ：项目的根组件
九、组件化开发
根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。
1. 什么是组件化开发
vue是一个支持组件化开发的前端框架
vue中规定，组件的后缀名是.vue。
2. Vue组件的组成部分
每一个vue组件都有三部分构成
- template----->组件的模板结构
- script ------> 组件的Javascript行为
- style ------> 组件的样式
<template>
<div>
这里只能出现一个根元素
</div>
</template>
<script>
//默认导出。这是固定写法！
export default{
//注意：.vue组建中的 data 不能像之前一样，不能指向对象
//组件中的data 必须是一个函数
data(){
//这个 return 出去的 {} 中，可以定义数据
return{
username:'zs'
}
},
methods:{
changeName(){
//在组件中，this就表示当前组件的实例对象
this.username = 'Leo'
}
}
}
</script>
<style lang = "less" scoped></style>
总结
有没有觉得vue很容易上手呀~