vue2新人入门

vue2新人入门

默认对webpack，sass，npm有一定的了解。
一些vue指令不会说，反正官方文档有，我也懒得抄。
一、超级基础部分
1.全局安装: npm install –globall vue-cli（已全局安装了的不必安装）
2.创建一个基于webpack的模板项目:vue init webpack <你的项目名称>
3.希望样式表仅仅只作用于当前组件，使用< style scoped >
4.Vue的属性绑定语法是v-bind：class实现（省略语法：class）
5.路由导航：vue-Router。

<router-view>//渲染路径匹配的组件，可以内嵌自己的<router-view>
<router-link>//支持用户在具有路由功能的应用中导航

在路由中传参，一般是在参数名之前加上：，然后将参数写在路由的path内

routes: [
  {
    path: '/name/:id',
    name: 'myName',
    component: myName
  }
]

这样之后，就能够用< router-link >中加入一个params的属性来指定具体的参数值

<router-link :to="{name:'myName',params:{'id':1}}">
</router-link>

若是有详情页面，那怎么把：id在读取出来呢？即使用$router.params,他是获取指定参数值的属性

export default{
    created:{
        let nameid = this.$router.params.id
    }
}

(在路由中，从name/1到name/2跳转，原来的组件实例会被复用。也意味着组件的生命周期钩子不会再被调用，比如created，在页面的第二次调用时将失效，所以想要复用组件时，就必须对参数的变化进行响应，达到此目的需要用watch对象，在watch对象中添加对$router的追踪函数：

export default{
    template：.....，
    watch:{
        '$router'(to,from){
            //对路由变化做出响应
        }
    }
}

）
路由嵌套，子路由如下：

routes: [
  {
    path: '/',
    name: 'parent',
    component:parent，
    children:[
        {
            path:'child',
            name:'child',
            component:child,
        }
    ]
  }
]

6.DOM元素绑定，ref=“…”,通过this.$refs来获取。
7.Vue2中约定引入组件名采用大驼峰命名，所以引入的组件在< template >内采用小写
如：FristName=>tmpelate中引用时：< first-name>