记录一下最近之前学习vuejs的代码
Posted dennylau
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录一下最近之前学习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.vueApp.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>以上是关于记录一下最近之前学习vuejs的代码的主要内容，如果未能解决你的问题，请参考以下文章