标签：

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=http://www.mamicode.com/"./assets/logo.png"> <h1>{{ msg }}</h1> <h2>Essential {{title}} Links</h2> <ul> <li><a href=http://www.mamicode.com/"https:/vuejs.org" target="_blank">Core Docs</a></li> <li><a href=http://www.mamicode.com/"https:/forum.vuejs.org" target="_blank">Forum</a></li> <li><a href=http://www.mamicode.com/"https:/chat.vuejs.org" target="_blank">Community Chat</a></li> <li><a href=http://www.mamicode.com/"https:/twitter.com/vuejs" target="_blank">Twitter</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href=http://www.mamicode.com/"http:/router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href=http://www.mamicode.com/"http:/vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href=http://www.mamicode.com/"http:/vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href=http://www.mamicode.com/"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> :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框架 element UI的使用： 1.找官网 #/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 #/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的代码