![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 77
无忧勾勾
这个作者很懒,什么都没留下…
展开
-
1.创建vue项目
创建vue项目npm install vue-cli -gvue init webpack vue_democd vue_demonpm installnpm run dev访问:http://localhost:8080/在package.json中,修改dev里面的内容,加个 –open,在终端输入 npm run dev后可以直接打开浏览器vue的标准模板...原创 2018-08-19 15:00:13 · 176 阅读 · 0 评论 -
2写vue的基本步骤
vue的基本步骤vue的代码都放在生成的src里面,src下有:App.vue是根组件,main.js和components(里面放其他组件)先在components中定义一个组件名,在里面写内容,下面以HelloWorld.vue为例:<template> <div class="hello"> <h1>{{ msg }}</h...原创 2018-08-19 15:02:57 · 862 阅读 · 0 评论 -
3打包生成dist文件夹并发布到服务器
打包生成dist文件夹并发布到服务器打包生成dist文件夹: npm run build 发布1:使用静态服务器工具包 安装serve npm install -g serve serve dist 访问:http://localhost:5000 发布2:使用动态web服务器(tomcat)修改配置:webpack.prod.conf.js...原创 2018-08-19 15:04:51 · 12964 阅读 · 0 评论 -
4.案例交互
写vue页面:拆分组件静态组件(无交互)动态组件: 初始化数据交互传数据,自动收集收据:v-model 监听事件 :@click组件通信:<list :comments="comments"/> //传的是值<list comments="comments"/> //传的是文本接收属性: 1. props:[‘comments...原创 2018-08-20 12:38:05 · 409 阅读 · 0 评论 -
5组件间通信方法
组件间通信1. props:在主组件中写的事件需要传到子组件时需要:主组件APP.vue中传递一个addTodos方法时: <Header :addTodos="addTodos"/>在Header.vue中接收addTodosprops:{ addTodos:Function}2. 自定义事件 $on(‘事件名’,回调函数)$emit...原创 2018-08-20 12:47:55 · 235 阅读 · 0 评论 -
6路由3步骤
定义路由组件(在src/views中定义)注意:其他组件分类:路由组件写在views或者pages文件夹下,非路由组件写在components文件夹下映射路由:在router里面的index.js中映射路由(也就是定义一个路由器)使用路由,在App.vue中写 ...原创 2018-08-20 12:48:50 · 225 阅读 · 0 评论