Contents
5. Vue.js开发基础¶
5.1. 1. 安装Vue.js与脚手架¶
开发简单的网页时，通常导入 Vue 的独立 js 文件即可。
构建大型项目时，通常用 npm 安装 Vue ：
npm install vuenpm 包 @vue/cli 提供了一个命令行工具 vue ，用于创建、构建 Vue 项目。
vue官方网站：https://cn.vuejs.org/
Vue.js的官方示例一般是JS文件，使用<script>标签引入。
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
cdn 加速地址：
如采用.vue文件的方式，首先需要使用如下命令安装vue模块：
5.1.1. 1.1 安装淘宝镜像¶
因为npm比较慢，这里我安装一下国内 淘宝镜像 ，执行指令：
# 使用npm淘宝镜像，避免npm下载速度过慢的问题
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成 淘宝镜像 后可以直接执行以下指令
#查看 cnpm版本号
cnpm -v
5.1.2. 1.2 安装vue-cli¶
vue脚手架 指的是 vue-cli ，它是一个专门为 单页面应用快速搭建繁杂项目的脚手架 ，它可以轻松的创建新的应用程序而且可用于 自动生成vue和webpack的项目模板 。
1.先卸载原来全局安装的vue-cli
cnpm uninstall -g vue-cli
2.安装新版vue-cli
cnpm install -g @vue/cli
3.查看vue-cli版本号
vue --version
或者
vue -V
4.查看webpack版本号
npm info webpack
5.1.3. 1.3 创建项目¶
创建项目 有 2种方式
1.用指令的方式创建项目 ， vue create 后面的英文为 项目名称
vue create vue-demo
2.使用vue ui来创建项目，vue ui是vue-cli提供的可视化的项目管理工具
vue ui
5.1.4. 1.4 相关工具¶
form-create (opens new window)：用于生成 Vue 表单。
element-ui (opens new window)：一个 UI 组件库，基于 Vue 2 ，提供了图标、按钮、表单、标签页等丰富的 UI 组件，由饿了么公司开源。
element-plus ：基于 Vue 3 ，采用 TypeScript 开发。
5.2. 2.告别webpack配置！vue UI¶
推荐使用 vue ui脚手架来创建项目。
https://www.kancloud.cn/wangjiachong/vue_notes/1964087
注意：使用vue-cli构建的项目没有Webpack的相关配置，这并不意味着项目没有使用Webpack，因为vue-cli本身就是一个基于Webpack构建的Vue.js专属构建工具。
5.2.1. 2.1参考如下文献¶
5.3. 3.Vue.js条件渲染¶
条件渲染就是根据不同的条件显示不同的内容。Vue.js中的条件渲染使用v-if命令，该命令判定结果是一个布尔类型，true代表条件判定正确，元素显示在界面中，false代表元素被隐藏。
注意：JavaScript不是一门强类型语言，因此类似于非空字符串、非0数字和Object对象都被认为是true，而0和undefined则被认为是false。
示例：
vueTest.vue
<template>
<div id="app">
<h1 v-if="showItem">显示第一条</h1>
<h1 v-if="noshowItem">显示第一条</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
showItem: true,
noshowItem: false
}
},
created () {
console.log('Hello Vue')
}
}
</script>
<style scoped>
</style>
在main.js中引入该文件，代码如下：
import Vue from 'vue'
import router from './router'
import App from './views/vueTest'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
然后使用npm run dev命令启动开发测试服务器，将会打开一个http://localhost:8080/浏览器页面
注意：本节的测试代码均需在main.js中引入./views/vueTest目录下创建的vue文件
5.4. 4.Vue.js列表渲染¶
Vue.js也提供用于列表渲染的v-for语句，和其他编程语言一样，for提供的迭代功能可以逐条输出一些重复出现的内容。v-for语句需要配合in关键字一起使用，语法如下：
v-for="item in items"
其中，items为已经定义的数据名称和内容，item为使用v-for语句时的变量别名。
示例：
创建一个vue项目
Testforvue.vue
<template>
<div id="app">
<div v-for="city in citys" :key="city">
{{ city }}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
citys: ['beijing', 'shanghai', 'shenzhen', 'guangzhou']
}
}
}
</script>
<style scoped>
</style>
除了循环输出数据本身外，v-for还可以新增index序列号
<template>
<div id="app">
<div v-for="(city,index) in citys" :key="city">
编号:{{index}} 城市：{{ city }}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
citys: ['beijing', 'shanghai', 'shenzhen', 'guangzhou']
}
}
}
</script>
<style scoped>
</style>
除了循环输出数据本身外，v-for还可以输出对象的值
<template>
<div id="app">
<div v-for="(city,index) in citys" :key="city">
<h3>编号:{{ index }}</h3>
<h4>城市：{{ city.city }} 缩写:{{ city.Name }}</h4>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
citys: [
{ city: 'beijing', Name: 'BJ' },
{ city: 'shanghai', Name: 'SH' },
{ city: 'shenzhen', Name: 'SZ' }
]
}
}
}
</script>
<style scoped>
h3, h4 {
text-align: center;
}
</style>
上述代码循环输出一个对象，该对象包含city和Name元素，并且嵌套了
标签
5.5. 5.Vue.js输入监听¶
在所有的Web服务中，输入信息的功能是必须具备的。不管是用户填写表单，还是执行搜索，都需要输入文本框，这些输入文本框在网页中通常称为表单标签。在常见的HTML网页中，表单类标签使用
5.6. 6. Vue.js事件处理-v-on绑定¶
v-on命令作用于所有的DOM，它的主要功能是实现事件的监听。v-on绑定的事件被触发时，将执行已经定义的代码。
在Web中最常见的事件就是按钮的click事件，表单提交以及网页与用户的交互都通过这类按钮事件实现。不仅是按钮的单击事件，包括提到的change事件和input事件等均属于DOM中的事件。Vue.js的这类事件都通过v-on进行绑定。
click事件绑定。
<template>
<div id="app">
<button v-on:click="jump">单击弹窗</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {}
},
// v-on绑定方法
methods: {
jump () {
alert('发生了按钮的单击')
}
}
}
</script>
<style scoped>
</style>
需要注意的是，jump()方法定义在methods对象中，这不是和data平级的方法。
v-on绑定的方法还可以调用定义在methods对象内部的其他方法。例如：
<script>
export default {
name: 'app',
data () {
return {}
},
// v-on绑定方法
methods: {
jump () {
this.jump2()
},
jump2 () {
alert('发生了按钮的单击')
}
}
}
</script>
上述代码的执行效果和前面的代码一致，均会弹出一个窗口。
当然也可以在事件绑定过程中传递参数。
<template>
<div id="app">
<!-- <button v-on:click="jump">单击弹窗</button>-->
<!-- 简写,一般多使用简写-->
<button @click="jump">单击弹窗</button>
<button @click="jump11(11)">{{ name11 }}</button>
<button @click="jump22(22)">{{ name22 }}</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
name11: '单击弹窗11',
name22: '单击弹窗22'
}
},
// v-on绑定方法
methods: {
jump () {
this.jump2()
},
jump2 () {
alert('发生了按钮的单击')
},
jump11: function (num) {
console.log(num)
alert(this.name11 + '参数获得' + num)
},
jump22: function (num) {
console.log(num)
alert(this.name22 + '参数获得' + num)
}
}
}
</script>
<style scoped>
</style>
除了click事件外的其他事件也可以使用相应的方法进行绑定。
将一个标签实现的文本输入框通过v-on命令绑定input()方法，以实现输入内容的实时监听。代码如下：
<template>
<div id="app">
<input placeholder="请在下面输入要显示的内容" v-on:input="textInput" v-model="inputValue"/>
<p>{{ inputValue }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
inputValue: ''
}
},
// v-on绑定方法
methods: {
textInput: function () {
console.log(this.inputValue)
}
}
</script>
<style scoped>
</style>
关于v-on命令的语法可以总结为如下2种形式：
<!-- <button v-on:click="jump">单击弹窗</button>-->
<!-- 简写,一般多使用简写-->
<button @click="jump">单击弹窗</button>