vue大杂烩

vue脚手架搭建项目

安装脚手架

 npm install vue-cli -g
 
 查看版本
 vue -V

搭建项目

vue init webpack test

? Project name test
? Project description A Vue.js project
? Author li 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

排坑

//app.vue
删除
<img src="./assets/logo.png">

text-align: center;
margin-top: 60px;

引入jquery

//index.html
<script src="/static/jquery-2.0.3.min.js"></script>

session使用

npm install vue-session --save

//main.js
import session from 'vue-session'
Vue.use(session)

this.$session.set("key",val);
this.$session.get("key");

cookies使用

npm install vue-cookies --save

//main.js
import cookies from 'vue-cookies'
Vue.use(cookies);

this.$cookies.set('key','43242')
let a = this.$cookies.get('key')

重复路由异常

Avoided redundant navigation to current location

// router/index.js
const originalPush = Router.prototype.push;
Router.prototype.push = function (location) {
    return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router)

点击事件穿透

//子元素
@click.stop=""

路由传参

this.$router.push({
	name: path,
	params: {
		names: val
	}
})

let val= this.$route.params.names;

事件

v-on:dblclick 鼠标双击
@mouseover	鼠标移入
@mouseout	鼠标移出

组件&组件通信

<template>
	<top ref="top">
</template>
<script>
	import top from '@/pages/home/top';

  export default {
    components: {
        top
    },
    data() {
      return {
      	
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      router(path) {
        this.$router.push(path); //方法：路由跳转
      },
      use(){
        //组件属性
		let par =this.$refs.top.par
		//组件方法
		this.$refs.top.mothodName()
	  },
      
    }
  }
  
</script>

自定义字体

新建assets/font/font.css

@font-face {
  font-family: 'SpaceMono-Bold';
  src: url('./SpaceMono-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SpaceMono-BoldItalic';
  src: url('./SpaceMono-BoldItalic.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SpaceMono-Italic';
  src: url('./SpaceMono-Italic.ttf');
  font-weight: normal;
  font-style: normal;
}

app.vue

<style>
	@import 'assets/font/font.css';
</style>