个人笔记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;
