记录一下最近之前学习vuejs的代码

main.js
import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(ElementUI);

//创建组件
import New1 from './components/New1';
import Home1 from './components/Home1';
//配置路由
const routes = [
  { path: '/news', component: New1 },
  { path: '/home', component: Home1 }
]
//实例化vueRouter
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

new Vue({
  el: '#app',
  //挂在路由
  router,
  render: h => h(App)
})

// <router-views></router-views> 放在App.vue

App.vue
<template>
  <div id="app">
  <router-link  to="/home"> 首页</router-link>
  <router-link  to="/news"> 新闻页</router-link>
  <p>
  <router-view></router-view>
  <p>
  <button @click='ajax'>ajax</button>
    <v-news></v-news>
    <v-home></v-home>
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential {{title}} Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  <h3 v-for="list in lists">{{list}}</h3>
  <h1 v-bind:title="curos">移上去看看</h1>
  <h1 :title="msg">移上去看看2</h1>
  <hr>
  绑定html
  {{h2}}
  <div v-html="h2"></div>
  <div v-text="h2"></div>

  绑定class

  <h3 v-for="list in lists" v-bind:class="{red:is_red}">{{list}}</h3>
  <input v-model="msg">
  <button v-on:click="getmsg()">获取megs</button>
  <button v-on:click="setmsg()">setmegs</button>
  <div ref="b">aaaaa</div>
  </div>
</template>

<script>
import News from './components/News';
import Home from './components/Home';
import storage from './model/storage.js';
console.log(storage);
export default {
  name: 'app',
  data () {
    return {
      msg: '你好 vue',
      title: 'denny',
      curos:'title~~~',
      lists:[
        'one ','two ','three '
      ],
      is_red:true,
      h2:'<h3>woshi h3</h3>'
    }
  },
  methods:{
    ajax(){
    var url = 'https://wx.haigoustore.com/flag/hot-title';
    this.$http.get(url).then((response)=>{
      console.log(response)
      this.lists = response.body.data
    },(err)=>{
      console.log(err)
    })
    },
    getmsg(){
      alert(this.msg)
    },
    setmsg(){
    console.log(this.$refs.b.value);
    this.$refs.b.style.color='red'
    this.msg="改变"
    storage.set({1212:44444444444})
    }
  },
  mounted(){
    this.ajax();
  },
  components:{
  'v-news':News,
  'v-home':Home
  }
}

</script>

<style>
.red{
  color:red;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

components/Header.vue
<template>
<div>
<button @click="run1t()">222222222222222222222</button>
我是头部组件{{ttt}}
</div>
</template>
<script>
export default{
	data:function(){
		return {ttt:"ttttt1"}
	},
	props:['title','run1t']
}
</script>

components/Home.vue
<template>
<div>
    <h2 @click="run()">首页组件{{mgs}}</h2>
	<hr>
	<br>
	<v-header :title="title" :run1t="run1"></v-header>
	<br>

	<button @click="emitMsg"> 给news组件广播数据</button>
	------------------------
</div>

http://61.130.7.220:8023/MWGate/wmgw.asmx/MongateCsSpSendSmsNew?userId=J51129&password=100777&pszMobis=19979568255&pszMsg=323232323&iMobiCount=1&pszSubPort=*&MsgId=string
</template>

<script>
import Axios from 'axios';
import Header from './Header';
import vueEvent from '../model/vue_event';
export default{
	name:"ddd",
	data:function(){
		return {
			mgs:"dddddddddddd",
			title:"home的title"
		}
	},
	components:{
	'v-header':Header
	},
	methods:{
	emitMsg:function(){
		vueEvent.$emit('to-news', this.title);
	},
	run1:function(){
	alert('biubiubiu')
	},
	run:function(){
	alert(1111);
	var api = 'https://wx.haigoustore.com/flag/hot-title';
	Axios.get(api).then((resp)=>{
		console.log(resp)
	}).catch((err)=>{
		console.log(err)
	})
	}
	}
}
</script>
<style scoped>
h2{
	color:red;
}
</style>

components/Home1.vue
<template>
<div>
    <h2>首页组件1</h2>
    <el-button>默认按钮</el-button>
<el-time-select
  v-model="value1"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</el-time-select>




<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '111'
      };
    }
  }
</script>
<style scoped>
</style>

components/Life.vue
<template>
<div>my life is so cool</div>
</template>

components/New1.vue
<template>
<div>
    <h2>新闻组件2</h2>
</div>
</template>

<script>
</script>
<style scoped>
</style>

components/New.vue
<template>
<div>
    <h2>新闻组件</h2>
    <v-life></v-life>
</div>
</template>

<script>
import  Life from './Life';
import vueEvent from '../model/vue_event';
export default{
	components:{
		'v-life':Life
	},
	mounted(){
	console.log('mounted start');
		vueEvent.$on('to-news', function(data){
		console.log(data)
		})
	}
}
</script>
<style scoped>
</style>

model/storage.js
var storage={
	set(value){
	 	console.log(JSON.stringify(value));
	}
}

export default storage;

import Vue from 'vue'

var vueEvent = new Vue()

export default vueEvent

基于Vue的Ui框架


	饿了么公司基于vue开的的vue的Ui组件库


		Element Ui    基于vue  pc端的UI框架  


		MintUi         基于vue 移动端的ui框架



http://element.eleme.io/


element UI的使用：



	1.找官网  http://element.eleme.io/#/zh-CN/component/quickstart

	2.安装  cnpm i element-ui -S         -S表示  --save

	3.引入element UI的css 和 插件

		import ElementUI from 'element-ui';
		import 'element-ui/lib/theme-chalk/index.css';
		Vue.use(ElementUI);

			
	

	4、*webpack.config.js  配置file_loader      http://element.eleme.io/1.4/#/zh-CN/component/quickstart


		  {
			test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
			loader: 'file-loader'
	          }



	5.看文档直接使用。




element UI组件的单独使用（第一种方法）：


	1、cnpm install babel-plugin-component -D    


	2、找到.babelrc 配置文件
		把

		{
		  "presets": [
		    ["env", { "modules": false }],
		    "stage-3"
		  ]
		}


		改为  注意：
		
		
		{
		  "presets": [["env", { "modules": false }]],
		  "plugins": [
		    [
		      "component",
		      {
			"libraryName": "element-ui",
			"styleLibraryName": "theme-chalk"
		      }
		    ]
		  ]
		}

	3、
	import { Button, Select } from 'element-ui';

	Vue.use(Button)
	Vue.use(Select)


element UI组件的单独使用（第二种方法）：



	import { Button, Select } from 'element-ui';

	Vue.use(Button)
	Vue.use(Select)
	

	引入对应的css

		import 'element-ui/lib/theme-chalk/index.css';

	如果报错： webpack.config.js  配置file_loader

		  {
			test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
			loader: 'file-loader'
	          }


	

	1、必须要安装nodejs


	2、搭建vue的开发环境 ，安装vue的脚手架工具   官方命令行工具

		npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）

	
	3、创建项目   必须cd到对应的一个项目里面
			
		vue init webpack vue-demo01

		cd  vue-demo01 
		
		cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
		
		npm run dev

https://router.vuejs.org/


vue路由配置：


	1.安装 

	npm install vue-router  --save   / cnpm install vue-router  --save


	2、引入并 Vue.use(VueRouter)   (main.js)
 
		import VueRouter from 'vue-router'

		Vue.use(VueRouter)

	
	3、配置路由

		

		1、创建组件 引入组件


		2、定义路由  （建议复制s）

			const routes = [
			  { path: '/foo', component: Foo },
			  { path: '/bar', component: Bar },
			  { path: '*', redirect: '/home' }   /*默认跳转路由*/
			]

		3、实例化VueRouter

			const router = new VueRouter({
			  routes // （缩写）相当于 routes: routes
			})

		4、挂载

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


		
		5 、根组件的模板里面放上这句话   <router-view></router-view>         




		6、路由跳转
		<router-link to="/foo">Go to Foo</router-link>
		 <router-link to="/bar">Go to Bar</router-link>