道者编程


vue笔记

一:关闭ESlint 语法检测

找到\build目录下的webpack.base.conf.js文件,把下图的注释掉:

Eslint检测语法,出发点是好的,但有些变态,诸如代码中不能存在多行空行,tab键不能使用,必须换成两个空格,等等都会报错

二:引入外部静态文件

1:修改src目录下的main.js文件,加入公用css:

import '../static/css/reset.css' 
import '../static/css/style.css'

2:单页面(vue页面)加载js

import ab from '../../static/js/ab.js' 
import {ab} from '../../static/js/ab.js' 
import '../../static/js/ab.js' //此和script加载一样,不过要通过挂载到页面才能调用

前面两个export导出之后 才能用import导入;也就是ab.js文件里面必须要有export;import后面有个大括号,这是什么意思:

如果ab.js中用的是export,那么import必须用{},如果ab.js中的是export default,那么import 后面不需要{},export 之后加上default意指默认接口的意思,所以只能有一个。具体可以看看es6

export default:

/*
export default
ab.js文件中中的方法abc */
function abc()
{
  alert(123)
}export default abc

//vue中引用
import abc from '../../static/js/ab.js' 
abc()

 export:

/*
export
ab.js文件中中的方法abc */
function a()
{
  alert(123)
}

function b()
{
  alert(456)
}
export {a,b} //多个


//vue中引用
import {a,b} from '../../static/js/ab.js' 
a()
b()

 3:全局引入第三方库,以jquery为例

npm install jquery --save //(--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依
 修改build目录下的webpack.base.conf.js,加入

var webpack = require("webpack")
module.exports的最后加入

 plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })

然后运行即可:

npm run dev

三:后台数据交互

和后台的数据交互用axios 

1:安装axios

npm install axios -S
npm install --save axios vue-axios //更新依赖包
 然后在src/main.js加入

import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:90" //接口地址
Vue.prototype.$axios = axios

2:使用

export default {
data(){
  return {
    items:[], //定义,否则会报错,items填充到vue页面中
  }
},
created:function(){ //create这个方法只执行一次
  this.fetchDate();
},
methods:{
  fetchDate() {
    this.$axios.get("/api/news?ID=123",{ //往后台发送一个GET id
    }).then((res) => { 
      this.items = res.data //后台响应的数据 res是一个对象,res.data才是后台的json数据
    })
    catch(function(err){
      console.log(err)
    })
  }
},
watch: {//监控路由变化
  // 如果路由有变化,会再次执行该方法
  "$route": "fetchDate"
 }
}

 以上加入到script标签里面

3:数据渲染

接第2步操作,

这里有个地方要注意:

(1):vue页面中的html必须在template内

(2):每个组件只有一个根元素,比如:


四:路由

1:修改src\router\index.js文件

先通过import把文件加载进来,然后routes下添加路由规则,

再到/src/main.js中加入:


2:路由切换

router-view 通过这个标签实现

App.vue作为入口文件,所有路由其实都是在id=app这里切换。

五:模板中加载公用文件

开发中,一些公用模板,比如头部,尾部,一般单独分离开,各个页面包含进去即可。

首先在src\components 添加一个common目录,此目录专门存放公共模块

1:页面单独加载,比如我在Home.vue页面加载,首先在Home.vue中操作js

import 先把这个两个模板加载进来,然后通过components挂载

挂载后页面就可以调用了

放到你认为合适的位置即可

2:全局统一加载

实现方式:在App.vue下加载


3:路由加载

未完,待续……


最新评论:
我要评论:

看不清楚


链接