美文网首页
Vue框架知识点与使用指南

Vue框架知识点与使用指南

作者: 小凡_7d37 | 来源:发表于2019-07-21 21:43 被阅读0次

    前言:

    vue可以通过npm管理包进行依赖下载,终端输入vue init webpack Vue-Project即可初始化项目,需要根据个人需要选择一些vue的依赖:

    Vue启动步骤

    进入新建的项目后,可以如下的目录结构:

    目录结构

    其中build文件夹包含项目构建相关代码,config文件包含项目相关配置,src文件包含需要开发的目录(assets放置一些图片,compents放置组件文件,router包含文件路径,App.vue是项目入口文件,main.js是项目的核心文件),static是静态资源目录。

    基础语句:

    Vue构造器有一个el参数,它是DOM元素的id,包含data中定义的属性,以及method中定义的函数;在html中通过输出{{}}引出。

    if语句 循环语句

    高阶属性:

    计算属性computed用于处理复杂逻辑,监听属性watch响应数据变化,事件监听可以使用事件处理器v-on,v-model实现双向数据绑定。

    v-model实现select下拉表双向绑定

    组件:

    注册一个全局属性的语法格式为:Vue.component(tagName, options),其中tagName为组件名,options为配置名;全局属性所有实例都可以使用,局部组件只能单个实例使用。Props是父组件传递给子组件的自定义属性,但如果想从子组件把属性值传递回父组件可以使用:使用 $on(eventName) 监听事件、使用 $emit(eventName) 触发事件。

    props属性

    路由与映射:

    vue实现路由功能需要安装vue-router:cnpm install vue-router,<router-link> 是设置导航链接的一个组件:

    vue-router

    要与后端接口交互,可以通过axios组件或者vue-resource实现;其中axios的格式为axios.get().then(response=>).catch(error),vue-resource的格式为this.$http.get().then(res),均能实现post和get等多种请求。

    相关文章

      网友评论

          本文标题:Vue框架知识点与使用指南

          本文链接:https://www.haomeiwen.com/subject/qdgeaxtx.html