美文网首页
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框架知识点与使用指南

    前言: vue可以通过npm管理包进行依赖下载,终端输入vue init webpack Vue-Project即...

  • Vue实例简单实现

    简单实现vue框架实例,实现的目的主要看下几个知识点如何进行的: Vue工作机制 Vue响应式的原理 依赖收集与追...

  • web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js ...

  • 2021总结计划

    技术总结:①主要框架:vue的框架思想、vue3与react小程序框架与部署git提交规范Vue-cli自定义模板...

  • Vue真是太好了 壹万多字的Vue知识点 超详细!

    《Vue真是太好了 壹万多字的Vue知识点 超详细!》 ---- ️️、Vue和其他两大框架的区别 Angular...

  • VUE相关知识点

    VUE相关知识点vue是一个用于构建用户界面的框架,采用MVVM模式(model-view-viewmodel),...

  • vue2.5 + vuex + router + axios +

    用途(快速认识搭建 vue 框架) 此项目是学习 DellLee 的 Vue2.5开发去哪儿网App 搭建的知识点...

  • 前端知识温习

    js知识点 温习js css知识点 温习css jquery温习 自己实现一个jquery vue框架温习 温习v...

  • vue和vue-cli的区别与联系

    vue和vue-cli的区别与联系 vue:是一套框架,用于构建用户界面的渐进式框架。 vue-cli: ...

  • 无标题文章

    1.这个月复习了VUE 的相关知识点 然后将之前不是太懂的知识点补了起来 Vue是国人开发的一款前端框架,他是利用...

网友评论

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

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