3月2日学习内容整理：Vue框架之组件间的通信，npm的使用
一、npm的使用
1、npm就类似于python的pip一样，就是一个模块管理工具，模块就是一个js文件
2、npm init 初始化npm，生成package.json文件，这个文件就是用来控制我们使用npm下载包的
3、用npm下载包： npm install 包名 --save
4、必须在项目的目录下
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
二、组件间的通信
》》》要使用vue-router插件
创建出一个项目以后，在main.js中
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' // 使用vue-router // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) Vue.use(VueRouter) // 1.定义路由组件 import Home from './Home.vue' import Course from './Course.vue' // 2. 定义路由 // 每个路由应该映射一个组件 // 创建router实例，将定义的路由配置添加进去 const router = new VueRouter({ mode: 'history', routes:[ {path:'/',component:Home}, {path:'/course',component:Course} ] }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 new Vue({ el: '#app', router, render: h => h(App) })
对应的组件
App.vue：
必须用export default
这个为主组件，data代表对象属性，这里要用函数来表示，必须return一个对象
components代表声明组件
import Header from './Header' 引入的这个Header必须和对应的标签保持一致
<template> <div id="app"> <Header></Header> </div> </template> <script> import 'bootstrap/dist/css/bootstrap.min.css' import Header from './Header' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, components:{ Header } } </script> <style> img{ width: 24px; height: 24px; } </style>
Header.vue:
<template> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="./assets/logo.png"> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li v-for='(item,index) in urlArray' :class="{active:currentIndex===index}" @click='currentUrl(index)'> <router-link :to="item.url">{{item.name}}</router-link> </li> </ul> <form class="navbar-form navbar-right"> <button type="submit" class="btn btn-info">注册</button> <button type="submit" class="btn btn-success">登录</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </nav> </template> <script> export default { name: 'Header', data () { return { urlArray:[ {url:'/',name:'首页'}, {url:'/course',name:'课程'}, {url:'/luffy',name:'luffy学位'}, {url:'/news',name:'深科技'}, {url:'/oldBoy',name:'老男孩'}, ], currentIndex:0 } }, methods:{ currentUrl(index){ this.currentIndex = index } } } </script> <style scoped> img{ width: 24px; height: 24px; } </style>
Course.vue:
<template> <div id="course"> <img src="./assets/course.png"> </div> </template> <script> export default { name: 'Course', data () { return { } } } </script> <style> img{ width: 100%; height: 100%; } </style>
Home.vue:
<template> <div id="home"> <img src="./assets/home.png"> </div> </template> <script> export default { name: 'Home', data () { return { } } } </script> <style> img{ width: 100%; height: 100%; } </style>
@@@老师笔记：：：
如何使用npm,npm全称：node package manger 使用npm 1.执行npm init 初始化项目 自动生成一个package.json的文件 2.npm install jquery --save 下载相应的jquery的包，并自动的生成node_modules的文件夹到该文件夹下 3.npm uninstall jquery --save 卸载jquery的包 有时候我们会讲我们的写好的项目代码上传到github上，但github只允许上传100兆以上的项目，这时候node_modules在上传的时候会被 忽略。但是package.json管理着我们当前项目需要的包，那么我们从github上下载当前项目中，安装readme的文档提示做需求即可，一般需要npm instal vue中的数据流 ===》自上而下 组件之间的通信：1.父组件往子组件传值 2.子组件往父组件传值 3.同级组件之间的传值 1.父组件往子组件传值：使用自定义属性，子组件一定要验证自定义的属性的类型
props:{
属性名：类型
} 2.子组件往父组件传值：使用自定义事件
this.$emit('addonecity',"深圳")
(方法名，参数) 这个方法名就是对应的父组件的事件名，参数就是父组件事件对应的函数的参数
3.同级组件之间的传值：官方建议使用vuex,第三天会讲 vue+vue-router 来创建单页面应用 单页面应用的网站：知乎、稀土掘金、少数派、网易云、饿了么移动端、豆瓣等等 使用vue-router <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> JavaScript // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在，应用已经启动了！
