个人笔记vue单文件组件的开发方式

一，vue单文件组件的开发方式

1.安装vue脚手架（命令行）  只需要安装一次  （全局 任意目录）

cnpm install --global vue-cli

2.创建项目

①cd 到一个项目里面

②.vue  init  webpack  项目名称

③.cd  项目名称

④.cnpm install

⑤.npm run dev 运行项目

⑥打包npm run build

演示：

①.cd 到一个目录里面

②vue init  webpack-simple vuedemo01

③.cd  vuedemo01

④.cnpm install

⑤.npm run dev 运行项目

⑥注意：npm install  出现问题  删掉 node_modules 重新 npm install / cnpm install试下 重新创建一个项目在试试 看什么错误。

二，vue路由

1，安装

      cnpm  install  vue-router --save

2，引入

      import VueRouter from 'vue-router'

      Vue.use(VueRouter);

3，定义组件引入组件

例如： import home from './components/home.vue';

4，配置路由

例如：{path:'/home', component:home},

{path:'*',redirect:'/home'}（ 配置 默认路由）

配置 子路由

{path:'/dd',component:dd,

    children:[

    {path: 'd01', component:d01},

    {path: 'd02', component:d02},

    {path: '/',redirect:'/dd/d01'}

]

},

5.实例化VueRouter

const router=new VueRouter({   routes })

6.挂载到vue实例

new Vue({

  el: '#app',

  router,   render: h => h(App)

})

7，视图定义

<router-view></ router-view>

8，路由调转

<router-link to='/home'></ router-link>

js: this.$router.push('/home');

this.$router.push({ name: 'newscontent', params: { aid: 497 }})

9，动态路由的传值

①在配置路由的时候像这样

{path:'/order/xq/:id', component:xq},

②在路由 调转时

<router-link :to="'order/xq/'+item._id"></ router-link>

< router-link to="'order/xq/123> </router-link>

③获取值

var id=this.$route.params.id;

this.$route.query;  /*get传值*/

三，引入组件

①例如：elm的 mint-ui的插件

cnpm install mint-ui --save

import Mint from 'mint-ui';

Vue.use(Mint);

import 'mint-ui/lib/style.css'

上面的例子在main.js引入（方便）

②在script标签中（在那用就在那引入）

import swipe from './swipe.vue'

import infiniteScroll from './infinite-scroll.vue'

export default {

  name: 'app',

  data () {

    return { }   },

components:{

  'v-swpie':swipe,

  'infinite-scroll':infiniteScroll

  },methods:{

//写方法

},

mounted(){

//页面加载完执行的方法

} }

在template 标签中

<v-swpie></ v-swpie>

<v-infinite-scroll></ v-infinite-scrol>

四，请求数据（以 vue-resource 为列）

cnpm install vue-resource --save

import VueResource from 'vue-resource';

Vue.use(VueResource);

this.$http.get(url).then((data)=>{

console.log(data);

  })    注：(get和jsonp一样)

this.$http.post(url,json).then((data)=>{

console.log(data)

          })

vue 获取dom节点

<div  ref='leftdata'></div>

var leftDom=this.$refs.leftdata;