vue 入坑初级指南

2016-09-17 11:01:00
hainuo
原创 2156
摘要:vue入坑初级指南 vue-resource vue-router 在es6下的使用方式
#readme > ps 20161122此文撰写之前,尤雨溪并没有发布2.0的vue 所以多少与当前的2.0有所不同,请大家放弃1.0直奔2.0 这样可以省时省力高效,还是建议大家多看英文文档,毕竟英文文档更新最及时 中文的算了吧,我在用的时候遇到很多坑更新不及时的问题尤为严重# 0x01 安装```shellnpm install vue-cli -g```# 0x02 初始化项目 ```shellvue init webpack myapp```# 0x03 运行项目```shellcd myapp npm run dev```#0x04 发起http请求> 此处可以使用fetch方法,但是担心在别的浏览器中不能用故而使用resource```shellnpm install --save vue-resource```对文件`src/main.js`修改 ```javascriptimport VueResource from 'vue-resource';Vue.use(VueResource);```在`src/App.vue`中使用```html<\script> export default {method:{ login: () => { this.$http.get(url).then(callback) }}}<\/script> ```#0x05 引入vue-router```shellnpm install --save vue-router```修改`src/main.js````javascriptimport VueRouter from 'vue-router'Vue.use(VueRouter)//new Vue({// el: 'body',// components: { App },// });router=new VueRouter();router.start(App,'body');```调用方式```html<\script> export default {replace: false,method:{ login:() => { this.$router.go('/bar'); }}}<\/script> ```> ps: 当直接对dom的body节点进行操作时必须做这个处理,设置`replace`为`false`,不然报错。在chrome中的vue扩展将无法使用。# 其他小技巧 一```html
12323
<\script> export default {data:() => { return { showClass: 'hide'}},method:{ onclick:() => { this.showClass=='hide'?(this.showClass)='':(this.showClass='hide') }}}<\/script> ```# 其他小技巧二```html <\script> export default {import {input} from 'vuestrap';export default{ components:{ bsInput:input, }}} ```> ps: 在html中的使用`-`链接的两个字符在`script`中要用驼峰命名法替换,并去掉`-`。
发表评论
拾 乘 玖 =
评论通过审核后显示。