![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
Swingzzz
这个作者很懒,什么都没留下…
展开
-
【vue学习】vue 实现路由
vue 实现路由1. 安装routernpm install vue-router -snpm install2. 设计路由界面src下新建views文件夹,新建Home.vue、Products.vue<template> <div>home </div></template><script>export default {}</script><style></style>原创 2020-11-17 19:54:07 · 173 阅读 · 0 评论 -
【vue学习】vue axios
【vue学习】vue axios安装vue axiosnpm install --save axios vue-axios安装依赖npm install在main.js中引入在项目中使用axios模块import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios,axios)发送请求发送get请求 registfn: function ()原创 2020-11-16 19:11:50 · 104 阅读 · 0 评论 -
各组件之间的参数传递
各组件之间的参数传递父传子通过子组件的props部分,来指明可以接受的参数,父组件通过在标签中写明参数的键值对来传递参数。props两种写法://第一种props:['参数1','参数2']//第二种props:[ '参数1':{ type:String, required:true, default:'XX' }]子传父改进版的参数传递从下往上的事件发射sub1.vuedoClick:function(){ this.$原创 2020-10-28 18:17:16 · 978 阅读 · 0 评论 -
在Vue组件中使用多个Vue组件搭建一个页面
在Vue组件中使用多个Vue组件搭建一个页面预设页面结果全局注册是在main.js中,通过import和Vue.conponent进行组件注册的。import Vue from 'vue'import App from './App.vue'import Header from './components/Header.vue'import Content from './components/Content.vue'import Button from './components/But原创 2020-10-28 17:28:24 · 4071 阅读 · 0 评论 -
【vue学习】vue对象的操作
【Vue学习】vue对象的操作1.可以通过一个Vue对象操作另一个Vue对象<body> <div id="app1"> {{title}} <input type="button" @click="toUpCase" value="toUpCase"/> {{toLowCase}} </div> <div id="app2"> <input typ原创 2020-09-30 15:52:47 · 1127 阅读 · 0 评论 -
【vue学习】vue改变样式
【vue学习】Vue改变样式css样式 <style> .mydiv{ width:400px; height:50px; background-color: gray; } .red{ background-color: red; } .yellow{ background-color原创 2020-09-29 16:55:44 · 199 阅读 · 0 评论 -
【vue学习】 computed、watch属性
【vue学习】 computed和watchcomputed 计算属性一些常用的函数,可以缓存起来,在调用时直接使用缓存中的过程(结果),以此来提高效率。注意:computed里虽然存放的是函数,但是在调用时,computed里的东西是一个属性。代码:<body> <div id="app"> {{getCurrentTime()}} <br> {{getCurrentTime1}}原创 2020-09-29 16:53:00 · 76 阅读 · 0 评论 -
【vue学习】6.天气app-天知道
【vue学习】6.天气app-天知道vue页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie原创 2020-09-28 14:52:27 · 772 阅读 · 1 评论 -
【vue学习】5.axios+vue
【vue学习】5.axios+vue引入js<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>代码<!DOCTYPE html><html lang="en"><head> <met原创 2020-09-27 16:29:31 · 86 阅读 · 0 评论 -
【vue学习】4.axios学习使用
【vue学习】4.axios学习使用axios 基础Q: 什么是 axios?A: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。使用:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>get、post 请求学习<!DOCTYPE html><html lang="en"><head> &l原创 2020-09-27 16:28:21 · 150 阅读 · 0 评论 -
【vue学习】3.本地应用——显示切换,属性绑定
【vue学习】3.本地应用——显示切换,属性绑定v-for作用:根据数据生成列表结构<body> <!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <ul> <!-- 索引index 从0开始 -原创 2020-09-27 15:52:52 · 184 阅读 · 0 评论 -
【vue学习】3.本地应用——显示切换,属性绑定
本地应用——显示切换,属性绑定v-show作用: 根据表达式的真假切换元素的显示状态,原理修改元素的display,实现显示隐藏<body> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <原创 2020-09-17 16:56:55 · 116 阅读 · 0 评论 -
【vue学习】2.本地应用——内容绑定,事件绑定
本地应用——内容绑定,事件绑定v-test作用: 设置标签的文本值<body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <h2 id="app-2" v-text="message"> </h2> <script> var app2 = new Vue({ el:原创 2020-09-17 16:55:47 · 91 阅读 · 0 评论 -
【vue学习】1.vue基础
Vue基础安装<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者:<!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>模板#html部分<div id="ap原创 2020-09-17 16:53:55 · 66 阅读 · 0 评论