验证是否安装成功
打开DOS命令界面:
出现版本号,说明安装成功
1.使用nodejs安装vue
安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npm install--global vue-cli)
2.检查是否安装成功
3.创建一个空的文件
4.如下选择,生成vue-test文件夹
例:生成vue-test目录结构如下图:
5.安装node_modules模块,进入vue-test文件夹 npm install
生成node_modules模块
6.执行npm run dev
浏览器打开如下页面
(备注:如果已经有vue文档,只需进行5、6步即可)
二、组件化注册引用
1.新建一个vue文件(testZujian.vue),页面里随便写点内容,例如:
2.在其他页面引入,例如,我要在testPage页面引入testZujian
运行结果如图:
没引入前
引入后
三、
let res = await let.$axios.get( ' 后端给的接口' )
this.datable=res.data.datable
res把请求回来的data里的datable数据赋给 等号前面的datable
四、刷新数据
async datable(){ //得到数据函数
let res = await this.$axios.get( ' 请求数据接口' )
this.datable=res.data.datable
}
五、删除
async del(){
let res = await this.$axios.get( ' 删除接口,后台给的' )
this.datable()
}
页面与页面之间传参
table.vue(表格列表页——点击修改)
bianji.vue(编辑页面——form表单,得到table里给传过来的值)
table.vue 要传参的页面:
如下:在methods:{ 写修改的方法}
两种方法传参,
第一种传参 name 与 结合使用params ,第二种传参 path 与 query结合使用 ,区别:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
1、this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
2、this.$router.push({path:'路由命名', query:{ 参数名:参数值 } })
接收参数的页面 bianji.vue
1、this.$route.params.参数名
2、this.$route.query.参数名字
直接用class名字也可以,如:
用params与name传参时需要配置路由 页面配置 index.js
配置name
取消按钮返回到列表页
零碎知识点
1. 一个vue页面里
<template>
这个第一级下只能有一个<div></div>,不可以有兄弟级</template>
2. 页面由
<template></template>
<style></style>
<script></script>
组成
<script>
export default {
components:{},
created(){/* 这里放一些数据,类似于初始化的数据 */ },
data() {
return {/* 放一些返回的数据 */}
},
methods:{/* 这里放一些方法什么的 */}
}
</script>
3. 关于vue的目录
build 是配置发版的文件夹
dist 是打包自动生成的文件夹
mock 是和后台交互时的数据,可以造一些假数据放这里
assets 放公共文件的
4、加: 的是动态的,不是常量
5、mounted() 初始化方法
6、main.js引入想用的UI (iview类似于element)
7、created有DOM节点,methods没有DOM节点
8、async 与 await 必须一起出现