npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互
13.8 npm(nodejs package manager)
使用命令行安装包: 1. cd切换到项目目录下，执行初始化操作 npm init/npm init -y 2. 安装其他依赖包 npm install jquery npm install jquery@1.11.13 npm install jquery -g 全局安装 npm install bootstrap@3 -D 开发环境下 marked包安装和使用 npm install marked -D npm install vuex -D 3. 卸载包 npm uninstall 包名 4. 更新npm npm install npm@latest 5. npm安装包慢的解决办法： 1.安装cnpm包 ：https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 配置npm源为阿里源 npm config set registry https://registry.npm.taobao.org/
在当前项目下生成文件：node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script> $.each([11,22,33], function(k,v){ console.log(k,v) }) </script> </body> </html>
13.9 webpack
为什么要有webpack？
1. JS中不存在模块化的概念
2. 安装和使用
npm install webpack -g --> 全局安装
npm install webpack-cli -g
3. webpack进阶：https://webpack.js.org/
在当前项目下生成文件：dist(包含main.js,将项目下的依赖关系文件打包保存在main.js文件中)、node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)
x.js:
var alex = 'sb';
var login = true;
module.exports = {alex}
y.js:
var obj = require('./x')
var jquery = require('jquery')
console.log(obj); //sb
jquery.each([11,22,33,44], function(k,v){
console.log(k,v)
})
main.html:
<body> <script src="./dist/main.js"></script> </body>
13.10Vue组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <component-a></component-a> <ComponentB //父组件向子组件通信 v-for="a in aList" v-bind:url="a.url" v-bind:title="a.title" ></ComponentB> <p> 被选了{{num}}次！</p> <!--子组件向父组件通信--> <ComponentC v-for="name in nameList" v-bind:name="name" v-on:do="foo" ></ComponentC> <table> //组件的is属性 <!-- <ComponentB></ComponentB> 此时组件中template中的tr会显示在table外--> <tr is="ComponentB"></tr> //此时组件中template中的tr会显示在table中的tbody中 </table> </div> <script src="./node_modules/vue/dist/vue.js"></script> <!--通过npm导入vue.js--> <script> //全局注册组件：定义一个名为button-counter的新组件 Vue.component('button-counter', { /* data: { count: 0 } */ data: function (){ //data 必须是一个函数,不能直接是对象，组件复用时会影响到其他实例 return { count: 0 } }, template: '<button v-on:click="count++">你点了我 {{ count }} 次。</button>' }) //局部注册组件：局部注册的组件在其子组件中不可用，如果你希望ComponentB在ComponentA中可用，需声明 const ComponentA = { components: { ComponentB }, template: `<a href='https://www.sogo.com'>点我</a>`, data: function(){ return { } } } //父组件向子组件通信 const ComponentB = { //template: `<a> <slot></slot></a>`,通过插槽slot分发内容 //template: ` <tr><slot></slot></tr>`,组件的is属性 template: `<p><a v-bind:href='url'>{{title}}</a></p>`, props: { //在子组件中使用props声明将url、title传入组件template并显示 url: String, //对传值进行校验 title: { type: String, required: true } }, data: function(){ return { } } } //子组件向父组件通信 const ComponentC = { //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件 template: `<button v-on:click='$emit("do")'>{{ name }}</button>`, props: { //使用props声明将name传入组件template并显示 name }, methods: { do(){ } } } var vm = new Vue({ el: '#app', components:{ //局部注册组件需要在components中声明 'component-a': ComponentA, ComponentB, ComponentC }, data: { num:0, nameList: ["技师A", '技师B', '技师C'], aList: [ { url: 'https://www.sogo.com', title: 'sogo' }, { url: 'https://www.luffycity.com', title: 'luffycity' }, { url: 'http://www.oldboyedu.com/', title: 'oldboy edu' }, ] }, methods: { foo(){ this.num += 1; } } }) </script> </body> </html>
13.11Vue脚手架开发工具
1. 安装 npm install -g vue-cli 2. 使用 查看安装的vue-cli版本：vue -V 查看帮助：vue --help 查看支持的模板：vue list 3.创建Vue项目 webpack简单模板：vue init webpack-simple app01 webpack模板：(使用Bootstrap时候要用这个):vue init webpack vueapp01 ? Project name vueapp01 '回车确认' ? Project description A Vue.js project '回车确认' ? Author Lmy <1592187014@qq.com> '回车确认' ? Vue build (Use arrow keys) ? Vue build (standalone) > Runtime + Compiler: recommended for most users '回车确认' Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-router? 'Yes' ? Use ESLint to lint your code? 'No' ? Set up unit tests No '(设置单元测试)' ? Setup e2e tests with Nightwatch? 'No' '（用夜视器设置e2e测试?）' ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) '（npm）' > Yes, use NPM '回车确认' Yes, use Yarn No, I will handle that myself 。。。。（ vue-cli · Generated "vueapp01".）。。。。（Installing project dependencies ...）。。。。 Project initialization finished!。。。。。。 '''To get started: cd vueapp01 npm run dev''' C:\untitled>cd vueapp01 C:\untitled\vueapp01>npm run dev '(启动前端服务)'' Your application is running here: http://localhost:8080' 停止项目：Ctrl + C 4.在当前项目下安装bootstrap C:\untitled\vueapp01>npm install bootstrap@3.3.7 -D 或者 npm install bootstrap@3.3.7 --save-d '安装开发环境下的bootstrap，并将依赖关系写入package.json中'
13.12Vue Router的使用
两个组件（Vue Router内置组件）：
<router-link to="/foo">Go to Foo</router-link> #默认渲染成a标签 <router-view></router-view> #路由视图，组件显示位置
制作组件路由：
components/Home.vue
<template> <div> <h1>这是home页面</h1> //vue文件中，组件template一定要用div包裹所有标签 </div> </template> <script> export default { name:'Home', } </script> <style> </style>
components/Note.vue
<template> <div> <h1>这是note页面</h1> </div> </template> <script> export default { name:'Note', } </script> <style> </style>
router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home.vue' //从组件导入，@代表src import Note from '@/components/Note.vue' Vue.use(Router) export default new Router({ mode:'history', //去掉URL中的'#' routes: [ //设置组件路由对应关系 { path: '/home', name: '我的home页面', component: Home }, { path: '/note', name: '我的note页面', component: Note } ] })
Apple.vue：
<li><router-link to="/home">link home版</router-link></li> <li><router-link to="/note">link note版</router-link></li> <router-view></router-view>
或
<router-link to="/home" tag="li" #指定生成li标签 active-class="active" #指定标签被点击时的样式 > <a href="">link home版</a> </router-link> <router-link to="/note" tag="li" active-class="active" > <a href="">link note版</a> </router-link> <router-view></router-view>
或
<router-link v-for="(item,index) in allRouters" v-bind:to="item.path" tag="li" active-class="active" v-bind:key=index > <a href="">{{ item.name }}</a> </router-link> <router-view></router-view> <script> import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App', // 计算属性 computed:{ allRouters(){ // 当前Vue实例注册的所有路由 return this.$router.options.routes } } } </script>
main.js:
import Vue from 'vue' import App from './App' import router from './router' //导入路由对象 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //注册路由对象 components: { App }, template: '<App/>' })
13.13Vuex的使用
store.js:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 开一家商店 export default new Vuex.Store({ state: { count:0 }, mutations:{ //提交 mutation来更改 Vuex 的 store 中的状态 increment(state){ state.count+=1 } } })
main.js:
import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //注册路由对象 store, //向vue实例注册我的商店 components: { App }, template: '<App/>' })
NoteItem.vue:
<template> <div class="list-group-item" v-on:click="foo" > {{n}} </div> </template> <script> export default{ name:'NoteItem', props:{ n:String }, methods:{ //v-on监听事件使用method foo(){ //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击 // this.$emit('plus') //使用子组件向父组件传值时使用$emit，使用vuex时注释此项 //this.$store.state.count+=1 //使用vuex,在被点击时修改store中的count this.$store.commit('increment') //使用vuex,在被点击时提交事件increme } } } </script> <style> </style>
NoteList.vue:
<template> <div> <div class="list-group"> <!-- #父组件向子组件传值，将循环数据使用v-bind传给子组件，子使用props接收并使用，后替换NoteItem --> <NoteItem v-for="(note,index) in noteList" v-bind:n='note' v-bind:key='index' v-on:plus='p'> <!-- #子组件向父组件传值，使用v-on监听$emit传递的事件 --> </NoteItem> <p>计数器:{{count}}</p> </div> </div> </template> <script> import NoteItem from '@/components/NoteItem' export default { name:'NoteList', components:{ NoteItem }, data:function() { return { noteList: [ '第一项','第二项','第三项' ], //count:0 //使用子组件向父组件传值时使用data，使用vuex时注释此项 } }, methods:{ //v-on监听事件使用method p(){ //console.log(this.count); this.count+=1 } }, computed:{ //使用vuex时使用此项,要用return返回 count:function() { return this.$store.state.count } } } </script> <style> </style>
Vue组件之间的通信:
父组件->子组件：子组件中要使用：props声明我接收的变量
子组件 -> 父组件：1.子组件 通过this.$emit('事件名') 向父组件抛出事件
2.父组件 通过v-on:事件名='方法名' 监听子组件的事件从而触发一个修改数据的方法
13.14使用Django前后端交互
1.django做后端,(先导入pip3 install django-cors-headers)在Django的settings文件中配置：
#允许跨域请求的IP（因为vue默认8080端口，Django默认8000端口） #授权白名单 CORS_ORIGIN_WHITELIST=( 'http://localhost:8080', 'http://127.0.0.1:8080' )
views.py:
from app01 import models from django.http import JsonResponse def note_list(request): ret = {"code": 0} data = list(models.Note.objects.all().values("id", "title", "content", "markedcontent")) ret["data"] = data return JsonResponse(ret) #返回json字符串
2.vue作前端，使用axios发送请求并接受后端的数据（安装：npm install axios）
App.vue:
<script> import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App', data: function () { return {} }, // 计算属性 computed: { // 当前Vue实例注册的所有路由 allRouters() { return this.$router.options.routes } }, beforeMount(){ //在挂载前执行store.js中的playNote函数接受后端数据 this.$store.commit('playNote') }, } </script>
store.js:将接收到的数据放进商店
import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' //导入axios Vue.use(Vuex) export default new Vuex.Store({ state: { count:0, notelist:[] }, mutations:{ addnote_store(state,data){ //捕获NoteEdit传到store的数据用data接收 state.notelist.push(data) }, playNote(state,data){ //在挂载DOM之前向后端获取数据 axios.get('http://127.0.0.1:8000/api/notes/') //访问note_list视图函数的路由 .then(function (response) { //response接收包含json字符串(ret)在内的数据 //console.log(response.data.data); state.notelist=response.data.data //后端返回到response中的数据(ret)以data命名 }) .catch(function (error) { //获取后端数据失败打印错误信息 console.log(error); }); } }, actions:{ //方法一：直接将新添加的数据使用 addnote_store添加到 notelist:[] addnode_post(context,data){ //异步操作store // 发送 POST 请求 var data=qs.stringify(data) //发送json类型 axios({ method: 'post', url: 'http://127.0.0.1:8000/api/add/', data: data, }) .then(function (response) { console.log('插入数据'); console.log(response); context.commit('addnote_store',response.data.data) // {id: 3, title: "第三条笔记", content: "", markdownContent: ""} //此处只让后端在数据库中添加数据，不添加到notelist:[] }) .catch(function (error) { console.log(error); }) }, } })
NoteList.vue:取出商店里的数据，交给template进行渲染
<template> <div class="list-group"> <NoteItem v-for="(note,index) in noteList" v-bind:n='note' v-bind:key='index' </NoteItem> </div> </template> <script> import NoteItem from '@/components/NoteItem' export default { name:'NoteList', components:{ NoteItem }, data:function() { } }, computed:{ //使用vuex时使用此项 count:function() { return this.$store.state.count }, noteList:function(){ //使用vuex获得store的数据 return this.$store.state.notelist } } } </script>
NoteItem.vue:
<template> <div class="list-group-item" v-on:click="foo" > {{n.title}}{{n.content}} </div> </template> <script> export default{ name:'NoteItem', props:{ //props指定接收父组件传递的数据 n:Object }, methods:{ //v-on监听事件使用method foo(){ //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击 // this.$emit('plus') //使用子组件向父组件传值时使用$emit，使用vuex时注释此项 //this.$store.state.count+=1 //使用vuex,在被点击时修改store中的count this.$store.commit('increment') //使用vuex,在被点击时提交事件increme } } } </script>
