Vue笔记1

Vue.js总结

vue的一些特点

  • 轻量级的前端界面框架
  • 组件化

vue的三大模块

  • 数据渲染/数据同步
  • 组件化/模块化
  • 其他功能:路由、ajax、数据流

一些方法

  1. v-bind:title="message" 将数据绑定到元素的title中,鼠标悬停到元素时才会显示message
  2. v-if="seen" 控制元素的显示或隐藏,true为显示/false为隐藏,隐藏后不占dom位置,相当于display:none;
  3. v-for=“item in items” 动态遍历生成元素

一些绑定方式

常用的三种绑定事件的方法

v-on绑定事件

@click鼠标事件

v-bind可以绑定变量或方法


一些指令

  1. v-html='valueIncludeHtml' 指令可以运行包含html元素的值,在浏览器页面中不会再看到html元素

模板语法

  1. 插值使用双大括号{{ value }}

vue组件

Parent -> Pass Props -> Child 父传递到子

Child-> Emit Events -> Parent 子传递到父

  1. 全局组件和局部组件
  2. 父子组件通讯-数据传递
  3. Slot插槽

传递静态字符串







传递动态变量







vue路由介绍

什么是前端路由?

路由是根据不同的url地址展示不同的内容或页面

前端路由大致可分为4类

  1. 动态路由匹配
  2. 嵌套路由
  3. 编程式路由
  4. 命名路由和命名视图
  1. 动态路由匹配

    如: /goods/:goodsId 动态路由,必须要输入goods开始,后面加一个动态的数字或字符串

    // router/index.js文件
    export default new Router({
      mode: 'history', /* 指定路由模式 */
      routes: [
        {
          path: '/goods/:goodsId',   /* 动态路由模式 */
          name: 'Goods',
          component: Goods
        }
      ]
    })
    
    // 访问时可以输入  localhost:8080/goods/156
    
    
    
    
    
    

  2. 嵌套路由

    嵌套路由就是在一个页面中有多个路由链接,可以切换到不同的页面或内容而无需刷新(路由嵌路由).

    下面的案例中在商品列表中嵌套了两个子路由

    1. 通过 http://localhost:8080/goods/image访问图片
    2. 通过 http://localhost:8080/goods/title访问标题
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    import Vue from 'vue'
    import Router from 'vue-router'
    import Goods from '@/views/GoodsList'
    import Img from '@/views/Image'
    import Tit from '@/views/Title'
    
    // 如果在一个模块化工程中使用vue-router,必须要通过 Vue.use() 明确地安装路由功能
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/goods',
          name: 'Goods',
          component: Goods,
          children: [
            // 在children里面的path中不能出现绝对路径符合/
            // 如错误{ path: '/title', component: Tit }的path中多了斜杠
            { path: 'image', name: Img, component: Img },
            { path: 'title', component: Tit }
          ]
        }
      ]
    })
    

  3. 编程式路由

    通过js来实现页面的跳转,目前有3种方法可以实现跳转

    $router.push.('name');
    $router.push.({path:'name'});
    $router.push.({path:'name?id=123'})或$router.push.({path:'name', query:{a:123}});
    

  4. 命名路由和命名视图

    给路由定义不同的名字,根据名字进行匹配

    给不同的router-view定义名字,通过名字进行对应组件的渲染

    
    

什么是后台路由?

history

js中有一个全局的对象history 记录着用户的操作历史,history.length 记录着已经操作了多少步

其实vue-router就是对history的一个封装

  1. 当前页面刷新 history.go(0)
  2. 前进一页 history.go(1)
  3. 后退一页 history.go(-1)
  4. 当前页面刷新 history.back(0)
  5. 后台一页 history.back(1)
  6. 改变页面 history.pushState(描述,标题,地址)

路由的模式

路由的模式有两种

  • mode: 'history'
  • mode: 'hash' 会有一个#号出现在url中
// router/index.js文件中指定路由模式

import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List'     /*@指的是src根目录*/

// 如果在一个模块化工程中使用vue-router,必须要通过 Vue.use() 明确地安装路由功能
Vue.use(Router)

export default new Router({
  mode: 'hash',    /* 指定路由模式 */
  routes: [
    {
      path: '/',
      name: 'lists',
      component: List
    }
  ]
})

生成生产环境代码

会用 npm run build 命令可以生成成产环境的代码,即浏览器支持的代码,会在根目录中生成一个dist 文件夹,里面就是生成环境所使用的代码。

特别注意

在template中的错误

在任何的 .vue 文件,template模板中只能有一个根元素,如果出现两个或两个以上的根元素都会出现语法错误

  • 错误的写法

    
    
    
    

  • 正确的写法

    
    
    
    

引入组件/注册组件/使用组件








路由中的传参区别

要注意一个问题。router跟route有所不同

router是路由对象,所有在js中使用的路由对象

route是单个路由对象。

  1. 动态路由的传参:通过 $route.params.goodrId 属性拿到值

    routes: [
        {
          path: '/goods/:goodsId',   /*动态路由可以通过$route.params.goodrId拿到goodsId的值*/
          name: 'Goods',
          component: Goods
        }
     ]
    

  2. 通过问号传参:

    // 在methods里面调用某个方法,方法里面调用页面跳转
    this.$router.push({path:'/car?goodrId=123'});
    
    // 使用 $route.query.goodsId可以拿到goodsId的值
    

vue组件的data

在每一个 Vue 组件中的data


你可能感兴趣的:(Vue笔记1)