首页 > 其他分享 >vue从入门到精通

vue从入门到精通

时间:2024-09-29 17:50:20浏览次数:11  
标签:function 精通 vue 入门 ProductList name Vue 路由 页面

一、什么是vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层

数据与视图各司其责,通过绑定建立联系

二、vue集成步骤

1、引入js

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript" src="js/axios.js"></script>

<script type="text/javascript" src="js/vue-router.js"></script>

2、初始化密码

var app = new Vue({

el: '#app', // 应用ID

data: { // 应用数据

users: [{id:1, name:"张三"},{id:2, name:"李四"}]

},

methods: { // 应用方法

query: function() {

}

}

});

3、绑定页面

<div class="container" id="app">

<div class="row">

<table class="table table-bordered table-striped table-hover">

<caption>用户列表</div>

<thead>

<th>ID</th>

<th>名称</th>

</thead>

<tbody>

<tr v-for="(user,index) in users">

<td>{{user.id}}</td>

<td><span>{{user.name}}</span></td>

</tbody>

</table>

</div>

</div>

ajax请求默认是异步的,不等待请求结束;

同步执行是当前行不执行完就不会执行下一行

三、vue的路由功能

1、路由组件装载html

(1)组件.js

// Ajax取得HTML,赋值给组件的template

var productListHtml = "";

$.ajax({

url: "productListVue.html",

async: false, // 必须是同步的

type: "get",

success: function(result) {

productListHtml = result;

}

});

(2)、定义组件

const ProductList = {

data: function() {

return {

products: []

}

},

methods: {

query: function() {

const that = this; // 改名this

}

},

template: productListHtml,

mounted: function(){ // 钩子,页面加载之后

this.$nextTick(function () {

// 路由页面装载完之后进行初始化动作

})

}

}

2、路由父子页面参数传递

// 路由页面的配置,path, name , component

const routes = [

{ path: '/productList', name: 'ProductList', component: ProductList }

]

// 跳转页面并传递参数

this.$router.push({

name: "ProductList",

component: ProductList,

params: {

keywords: "abc"

}

});

// 路由子页面接收参数

data: function() {

return {

keywords: this.$route.params.keywords

}

}

标签:function,精通,vue,入门,ProductList,name,Vue,路由,页面
From: https://blog.csdn.net/weixin_42795092/article/details/142639014

相关文章

  • kettle从入门到精通 第八十九课 ETL之kettle kettle jms activemq使用教程
     场景:群里有小伙伴求助jmsactivemq如何使用kettle进行消费数据,之前连接过kafka,rabbtimq,想着activemq应该也没啥难度,结果低估了activemq。盘他!!!插曲:ActiveMq有两个版本:ActiveMQ Classic和ActiveMQArtemis两个版本,kettle中的jms插件连接activemq只支持ActiveMQArtemis,结果......
  • 数据库入门不再难:克服学习障碍的实用技巧与演示
    文章目录摘要引言常见的学习困难及解决方法理解抽象的数据库概念SQL语句的构建与优化理解事务与并发控制实用的学习技巧与工具推荐推荐学习资源数据库设计与实践的常用技巧实战演练常见问题解答总结未来展望参考资料摘要数据库学习对于初学者来说,往往会面临诸多......
  • 修改vue打包后的结构
    当一个项目需要在调用另一个项目作为子项目时,即两个vue项目,在nginx中配置两处前端,可能就需要区分两个vue项目打包后的地址1.在dist后再加一层子文件夹如childrenmodule.exports={publicPath:"children"outputDir:"dist/children",//用于放置生成的静态资源(js、cs......
  • vue中使用decimal.js对前端数值类型进行高精度计算
    需求背景:由于一些场景我们需要在前端JavaScript进行数值计算,且对精度要求比较严谨,而前端数值是浮点类型,直接使用计算可能会产生一系列的精度问题,常见的浮点运算问题,比如精度损失等;所以例如涉及到一些金额计算等,需要进行高精度处理。解决方案:(1)可以把数值计算部分逻辑交给后端接口......
  • 基于django+vue+Vue《大学计算机》课程思政资源共享平台【开题报告+程序+论文】-计算
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,高等教育领域正经历着深刻的变革。《大学计算机》作为培养大学生信息素养与计算思维能力的核心课程,其教学质量直接......
  • vue快捷开发(组件的使用)
    可以写一个主界面的view,在左侧侧边栏加一个导航栏,通过导航栏的按钮点击来切换不同的界面,组件的使用小细节(1)在view代码中①在导航栏上面加上按钮,点击按钮实现组件的展示(此处的showContent就是在界面右侧展示出组件) ②在script中导入不同的内容组件 注意组件的导入方式......
  • 基于Java+Springboot+Vue开发的大学竞赛报名管理系统源码+开发文章1.3万字
    项目简介该项目是基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践......
  • springboot+vue+elementui大文件分片上传
    工具类方法:/***大文件分片上传*@paramfileName文件名*@paramfile文件*@paramfileKey文件key*@paramshardIndex当前分片下标*@paramshardTotal分片总量*/publicstaticvoidbigUpload(StringfileNam......
  • 基于SPRINTBOOT+VUE文献资料检索系统
    文未可获取一份本项目的java源码和数据库参考。1选题背景   随着世界一体化和经济全球化席卷世界,越来越多的高校认识到,利用信息技术的发展来改变对文档、文献的运作方法和管理模式,提高高校的管理效益和生产效益,从而提高高校经济效益,增强高校竞争力是高校发展的趋势。......
  • 2024最新高分源码基于SpringBoot+Vue+uniapp的办事大厅政务预约系统(源码+lw+部署文档
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......