前端Vue
司马麟迦
Hello World
展开
-
Vuex的理解
Vuex解决了不同组件之间的数据共享问题,并且做到了数据持久化。据说,Vuex是大项目用起来好,小项目用起来不舒服也就是说不建议用在小项目上。路径到当前项目,安装vuexnpm install vuex --save步骤一src里面新建一个文件夹vuex步骤二vuex的文件夹下创建store.js在store.js引入vue和vuex,并且使用:import Vue from "v...原创 2019-01-25 15:59:56 · 107 阅读 · 0 评论 -
Vue简单创建一个项目(四)
生命周期函数,这写个函数的重大意义在于,他会在组件挂载的时候:mounted(){}请求数据,操作dom组件更新的时候组件销毁的时候为我们做一些事情,做一些想要做的事情,右脚生命钩子,可能意味着想让app这个项目的各个组件之间都钩钩连连得吧,所以名字也不难理解。监听模板:methods:{ setMsg(){ }...原创 2019-06-06 10:20:13 · 217 阅读 · 0 评论 -
Vue简单创建一个项目(五)
所有的项目都是对数据的操作,当今社会发展迅速的原因就是大数据的时代来临了,当后端提供数据接口的时候,我们就要充分利用数据。请求数据的模块:一、官方提供:vue-resource先安装它,在项目文件夹下输入下面的指令:cnpm install vue-resource --save其中**–save**的意思是将他保存到package包文件中.安装好了以后,vue的插件就必须要在...原创 2019-06-06 12:01:05 · 166 阅读 · 0 评论 -
Vue简单创建一个项目(六)
父子组件之间的传值父亲传给儿子:父亲:<v-home :title="title" :run="run" :home="this"></v-home> data:{title:"zhi"},method:{run(s){alert("hello"+s)}}儿子:methods:{},props:['title','run','home']{{title}}...原创 2019-06-06 13:02:25 · 181 阅读 · 1 评论 -
Vue简单创建一个项目(七)
非父子组件之间的传值创建中间人js,随便起个名字,好记的:brothermessage.js内容:import Vue from "vue";var brother = new Vue();export default brother;兄弟A-Home兄弟B-News前提是这两个组件都必须引入brothermessage.jsA->BA:methods:{...原创 2019-06-06 14:02:04 · 141 阅读 · 0 评论 -
Vue简单创建一个项目(八)
Vue的路由实际上就是在APP根组件的挂载组件中做不同的切换,就是动态的去挂载。vue-router(这个和vue-resource一样都是Vue自己的仔)cnpm install vue-router --save在main.js引入:import VueRouter from ‘vue-router’;Vue.use(VueRouter);之前我们做的父子组件都是把子组件作...原创 2019-06-07 13:04:55 · 233 阅读 · 0 评论 -
Vue简单创建一个项目(九)
url链接里面最好用的就是传值了,多会用在页面跳转查看详情什么的,也不涉及到安全的情况,所以动态路由传值就必须要讲一下:比如news页会有很多主题,他们类似于:<a href="details.html?id=1">新闻一</a><a href="details.html?id=2">新闻二</a><a href="details.ht...原创 2019-06-07 14:19:28 · 138 阅读 · 0 评论 -
Vue简单创建一个项目(十)
编程式导航就是用JavaScript来跳转页面<button @click="gotoNews()"></button>methods:{gotoNews(){this.$router.push({path:'/details/111'})}}命名式路由跳转前提条件是路由改写命名规则:{ path: ‘/news’, component: News,n...原创 2019-06-07 21:46:50 · 273 阅读 · 0 评论 -
Vue简单创建一个项目(三)
组件,可以看成是一个可以拿来调用的模块。什么是组件?每一个.vue文件就是一个组件,做项目的时候可以把它们放到src文件夹下的components文件夹下,举例在App.vue中使用:引用方法:import Home from "./components/Home.vue"挂载注册方法:data:{},components:{'v-home':Home}在template模板中使...原创 2019-06-06 10:07:16 · 213 阅读 · 0 评论 -
Vue简单创建一个项目(二)
分析一下简单安装后文件里面都有啥:node_modules:下载好的依赖项src:开发时候用的资源index.html:入口文件package.json:管理项目的各种模块及版本名称作者等信息asset:静态文件的根目录webpackconfig.js可以把我们写的.vue文件编译成浏览器能看得懂的文件。.vue文件就是一个组件包含了html标签<div id="a...原创 2019-06-05 15:32:21 · 253 阅读 · 0 评论 -
windows 的Vue安装及使用
1.首先必须要安装nodejs2.输入命令安装VUEnpm install --global vue-cli3.创建一个文件夹来装vue项目,在该项目路径下输入指令(复杂安装):E:\vuexiangmu&amp;amp;gt;vue init webpack vue-demo013.创建一个文件夹来装vue项目,在该项目路径下输入指令(简单安装):E:\vuexiangmu&amp;amp;gt; vue...原创 2019-01-22 16:39:53 · 451 阅读 · 0 评论 -
Vue的使用理解
感想:首先我是对Vue不太理解的,因为我觉得学这个最难得就是不知道他能干些什么?如果弄明白了他能干什么,那才是入门的第一步,看官方文档就晕,看书看一半也晕,索性我运气好搜了视频,看了一半都是按照官方文档讲的,于是晕了,暴躁起来,这是个什么玩意?最后就告诉自己一件事,那就是你要先知道不要问为什么,直接用就好了,我有点开窍是在组件这一门入的,发现好处就是可以复用公共组件,每个组件都可以命名,绑定数据...原创 2019-01-23 16:27:48 · 186 阅读 · 0 评论 -
Vue的多页面使用
页面当中引用vue.js就行了,有压缩版本和非压缩版本。压缩:https://unpkg.com/vue@2.6.4/dist/vue.min.js非压缩:https://unpkg.com/vue@2.6.4/dist/vue.js原创 2019-02-11 09:54:41 · 313 阅读 · 0 评论 -
vue init webpack vue-demo01复杂安装的详解
终端cmd,在项目中输入下面命令:E:\Vue>vue init webpack vuedemo02接着就会让你输入或者选择一些是不是要的东西? Project name vuedemo02(项目名称)? Project description A Vue.js project(描述,我默认了)? Author simalinjia(作者名称)? Vue build (Use a...原创 2019-02-11 11:50:30 · 2698 阅读 · 0 评论 -
Vue路由的理解
路由我觉得就是管理分配的解释,以前的老八股就是一个页面一个页面的跳,自从有了路由以后就可以一个页面根据不同的路由分配展现不同的内容了。其实我不喜欢这个生词,router,哎…需要注意的是不管你是用的那个路由,你一定要遵循规则,否则用不到。vue 的路由有几个:动态路由:就是根据参数的不同展现不同的内容。现在src里面创建个文件夹,取个名字views引入views文件夹里面的vue组件...原创 2019-02-11 14:09:36 · 667 阅读 · 0 评论 -
Vue的axios使用本地模拟数据
第一步:修改webpack.dev.conf.js配置,在const portfinder = require(‘portfinder’)后面添加下面的话//获取本地数据开始const express =require(‘express’)const app =express()var appData=require("…/mock/goods")var goods=appData.r...原创 2019-02-12 11:19:24 · 908 阅读 · 0 评论 -
Vue简单创建一个项目(一)
战前准备:编程工具: webstorm电脑:Mac电脑必须要先安装 cnpm npm node vue利用IDE工具创建一个工程CreateDao:进入文件夹:cd /Users/simalinjia/WebstormProjects/CreateDao在CreateDao中创建应用sudo vue init webpack-simple vuedemo安装依赖sud...原创 2019-05-30 23:04:46 · 541 阅读 · 0 评论