vue 基本操作

最新推荐文章于 2023-12-13 16:45:53 发布

原创最新推荐文章于 2023-12-13 16:45:53 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文档详述了Vue.js项目的搭建流程，包括环境配置、项目创建、依赖安装及运行，介绍了属性绑定、组件间通信、路由设置、ajax请求等核心功能。适合初学者快速上手Vue开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 npm(cnpm/yarn)

2.执行npm install vue-cli -g 全局安装

3.执行vue init webpack(webpack-simple) 项目名创建项目,webpack-simple是精简版

4.到项目目录下面，执行npm install 初始化vue的依赖包

5.在项目目录下面执行npm run dev 运行项目

6.属性绑定和基本操作语法参见官网

https://cn.vuejs.org/v2/api/

7.三种父子组件传参

o1, 组件上的props属性传参父组件引入子组件，在子组件上加属性赋值传参

o2,子组件通过this.$parent获取父组件的属性和值

o3,通过bus推送和监听数据传参

在main.js中创建vue实例前

//在生成vue实例前，给Vue的原型上添加一个bus属性，这个属性是vue的实例，
//之后创建的vue实例都具有bus这个属性

Vue.prototype.bus = new Vue();

通过this.bus.$emit('接受者','内容')和this.bus.$on('接受者',function(data){

})发送和接受消息

8.路由

o1,安装路由插件 npm install vue-router --save

o2,main.js中引入vue-router,在Vue实例前使用Vue.use()初始化加载

import VueRouter from 'vue-router'

Vue.use(VueRouter);//install 实例化VueRouter到vue上，之后创建的Vue实例都可以使用路由

o3,穿件路由，如下

let routes=[
  {path:'/home',name:'home',desc:'组件一',component:Home,isP:true},
  {path:'/pc',name:'pc',desc:'组件二',component:PC,isP:true},
  {path:'/content',name:'content',desc:'组件二的子组件',component:PContent,isP:false}
];


//初始化路由数据
let router=new VueRouter({routes});




new Vue({
  el: '#app',
  router:router,
  render: h => h(App)
})

o4,路由传参

o4.1,path路径后面通过:参数名（或者:tags+），<router-link to=''/content/参数值"></router-link>或者<router-link to=''/content?参数名=值&参数名值"></router-link>，接受页面通过this.$router.params.参数名或者this.$router.query.参数名

o5，动态路由，可以通过ajax方法初始化路由数据，通过this.$router.addRoute和this.$router.addRoutes方法添加路由，以及更新路由，删除路由操作，具体参见官网api。

9.ajax请求操作，此使用vue官方ajax插件

安装插件 npm install vue-resource --save

在main方法中引入，并用Vue.use方法装载

import VueResource from 'vue-resource'

//install 实例化VueResource到vue上，之后创建的Vue实例都可以使用http
Vue.use(VueResource)

操作使用，this.$http来进行ajax请求操作(在main.js中可以直接使用Vue.http)，具体参见官网api