vue项目创建流程和使用
vue项目的创建
npm run dev 让项目执行起来
#下载vuex
npm install vuex --save
#下载axios
npm install axios --save
当我们生成项目的时候我们关系的src文件,
创建一个components文件夹,来放置vue的文件,
可以进行创建更多的文件夹进行分类.
每次创建一个组件都需要
<template> </template> <script>
export default{
name:'VnoteList',
data(){
return{ }
}
} </script> <style scoped></style>
data必须是一个函数,且必须return一个对象,
当我们需要引入组件的时候需要有两个步骤:
1.引入当前文件
2.挂载
<script>
import VnoteShow from './VnoteShow'
import Vmark from './Vmark'
export default{
name:'Vnote',
data(){
return { }
},
components:{
VnoteShow,
Vmark,
}
}
</script>
那么在template显示就可以:
<template>
<VnoteShow></VnoteShow>
显示组件的内容
</template>
index.js下的ruouter 路由的使用:
import Vue from 'vue'
import Router from 'vue-router'
import Vmain from '@/components/Vmain'
import Vnote from '@/components/Vnote'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Vmain',
component: Vmain
},
{
path: '/note',
name: 'Vnote',
component: Vnote
},
]
})
如何引用bootstrap?
首先我们需要先下载到我们的项目上,
npm install bootstrap@3 --save
当下在成功的时候我们在package.json里可以看到
在App.vue里我们执行下面的代码,就可以引入我们的bootstrap
<script> import 'bootstrap/dist/css/bootstrap.min.css'
</script>
如何让路由保持状态?
###########html部分########
<template>
<ul class="nav navbar-nav">
<li v-for='(item,index) in routes ' :class="{active:currentIndex == index}" @click='ActiveHandler(item)'>
<router-link :to='item.url'>{{item.title}}</router-link>
</li>
</ul>
</template> #####################js##########
<script>
export default{
name:'Vheader',
data(){
return{
routes:[
{url:'/',title:'我的首页'},
{url:'/note',title:'我的笔记'},
],
currentIndex:0, }
},
methods:{
ActiveHandler(item){
this.currentIndex = item.index;
}
},
created(){
for (var i=0;i<this.routes.length;i++){
if (this.routes[i].url == this.$route.path){
this.currentIndex =i;
return;
}
}
}
}
</script>
created方法是在加载一开始的时候触发,
主要解决了刷新保持选中状态.
***思路***
遍历对象,并对比用户访问的url,如果匹配成功则
this.currentIndex =i;改变当前的索引并跳出循环
this.$route.path会拿到访问的路由
构建表单结构:
如何获取html里的内容,这里我们需要在标签里面设置属性,
再根据上面的数据构建就可以获取html的文本
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
以上是官方文档的介绍:
这个状态自管理应用包含以下几个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的极简示意:
那么白话文来说
vuex就是来管理数据,
1.当前端发送请求到后端取数据,通过vuex这个借口,
2.当前端想拿后端传过来的数据进行渲染,在vuex这个获取
在我个人看来vuex就是进行数据的统一调度.
使用:
先看我们的原理图:数据先到Aciton然后commit到Mutations再来驱动状态从而改变视图
命名规范:mutations里的方法全用大写,而actions的用驼峰式.
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
allList:[]
note:{
title:'',
content:'',
markdown:''
} //这里面的状态跟每个组件的数据属性有关系
},
mutations:{
ADDONENOTE(state,newData){
state.allList=newData;
}
},
actions:{
addOneNote(contenxt){
$.ajax({
url:'',
type:'post',
data:json,
success:function(data){
contenxt.commit('ADDONENOTE',data)
},
error:function(err){
}
})
},
我们只要将整理好的数据通过this.$store.dispatch('方法名',数据)就会触发该流程.上述用的是jquery的ajax技术,但是我们vue一般不用
用到的是axios技术,
axios
初始化的时候获取数据:
//main.js
import Vuex from 'vuex'
import axios from 'axios' Vue.use(Vuex);
Vue.use(axios); const store = new Vuex.Store({
state: {
allCourseList:[] //这里面的状态跟每个组件的数据属性有关系
},
mutations: {
GETCOURSELIST(state,newValue){
state.allCourseList =newValue;
} }, actions:{
GetCourseList(context,){
axios.request({
url:'http://127.0.0.1:8000/api/v2/course/',
method:'GET',
}).then(function(ret){
context.commit('GETCOURSELIST',ret.data)
}).catch(function(ret){
}) }
},
}); //需要挂载
new Vue({
el: '#app',
//注册了的需要在这里挂载
router,
store,
axios,
components: { App },
template: '<App/>'
});
main.js
<script>
import Vheader from './components/Vheader'
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
name: 'App',
components:{
Vheader,
},
mounted(){
this.$store.dispatch('GetCourseList');
} }
</script>
App.vue
<template>
<ul>
<VcourseItem v-for="(item,index) in GetAllList" :data="item"></VcourseItem>
</ul>
</template> <script>
import VcourseItem from './VcourseItem'
export default {
name: "VcourseList",
data() {
return {}
},
components:{
VcourseItem,
},
computed:{
GetAllList(){
return this.$store.state.allCourseList
},
}
}
</script>
vue获取数据
Mutations和Actions
如果我们只用到mutations,那么这只能是个同步操作,用户体验不好,
this.$store.commit('方法名',数据)
设想一个情景,如果用户提交数据卡住了,那么用户将不能再操作该页面的,只有等待同步结束才能继续.
使用actions就是异步的操作. 建议使用.
mounted 和 created
mounted是在项目加载结束后调用的
一般用于初始化数据库里的数据
created是在项目刚加载的时候调用,
一般用于Dom的创建
mounted(){
mounted是在项目加载结束后调用的
}, created(){
created是在项目刚加载的时候调用,
}
props:{
#父向子传值,进行数据验证
}
components:{
#挂载
}
methods:{
#方法存放
}
computed:{
GetAllList(){
return this.$store.state.allCourseList
},
vue项目创建流程和使用的更多相关文章
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- ADF 项目创建流程
ADF 项目创建流程: 1.首先建好应用 2.创建model,UI 3.创建EO,VO,AO, VL 4.设置EO的属性 5.新建lov 6.设置VO的View Accessors,并设置Attrib ...
- Vue项目搭建流程 以及 目录结构构建
Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...
- 1219 Vue项目创建及基础
目录 vue项目 1. 项目创建 cmd创建 可视化创建 2. 项目启动 vue重新构建依赖 pycharm管理vue项目 3. 项目目录介绍 index.html index.js App.vue ...
- vue项目创建与使用
目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命 ...
- vue项目创建
使用命令行工具npm新创建一个vue项目 使用vue开发项目的前期工作可以参考前面写的: Vue环境搭建及node安装过程整理 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. ...
- Vue项目搭建流程
记录一下vue项目的搭建流程. 1.安装node.npm 下载地址为:https://nodejs.org/en/ 设置环境变量,命令行分别输入: node -v npm -v 查看安装是否成功 ...
- @vue-cli的安装及vue项目创建
1.安装 Node.js & Vue CLI @vue/cli3,是vue-进行搭建的脚手架项目,它本质上是一个全局安装的 npm 包,通过安装它,可以为终端提供 vue 命令,进行vue项目 ...
- Vue.js系列(一):Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
随机推荐
- [Functional Programming] Transition State based on Existing State using the State ADT (liftState, composeK)
While sometimes outside input can have influence on how a given stateful transaction transitions, th ...
- 详细解析Spring事务的配置和OpenSessionInview的作用
1.事务的特性 原子性:事务中的操作是不可分割的一部分 一致性:要么同时成功,要么同时失败(事务执行前后数据保持一致) 隔离性:并发互不干扰 持久性:事务一旦被提交,它就是一条持久 ...
- mui 本地打包
第一步:下载HBuilder离线打包Android版SDK 网址:http://ask.dcloud.net.cn/article/38 第二步:导入项目 启动带ADT的eclipse程序,菜单中选择 ...
- java中按字节获得字符串长度的两种方法 Java问题通用解决代码
jdk本身就自带获取字符串字节长度的api了,但字符串如果包含特殊符号或全半角符号或标点符号获取到的结果会有偏差,最好的证据就是新浪微博的字数统计了 // jdk自带的获取字节长度 //注意getBy ...
- html头部转码
学习html是件比较容易的事情,但单单学html语言肯定是不够用的,所以大多数人并没有拿html作为学习核心,而是将html作为javascript.动态语言或者css学习的必经之路.于是很多人并不关 ...
- ubuntu下设置静态ip
直接修改系统配置文件ubuntu的网络配置文件是:/etc/network/interfacesubuntu命令行修改网络配置方法前面auto eth?,让网卡开机自动挂载. 为网卡配置静态IP地址 ...
- 微软“小冰”识狗与人工神经网络(I)
2014年8月21日,微软"小冰"网络机器人推出了一项图像识别技能:"小冰识狗". "小冰"怎么会"识狗"呢? 依据微软 ...
- MongoDB 的聚集操作
聚合引言 聚集操作就是出来数据记录并返回计算结果的操作.MongoDB提供了丰富的聚集操作.可以检測和执行数据集上的计算.执行在mongod上的数据聚集简化了代码和资源限制. 像查询一样,在Mongo ...
- linux内核参数分析
这是原来在51cto写的,现在都转到博客园来了 1.time_wait连接数过多,需要调整内核参数 http://blog.renhao.org/2010/07/setup-linux-kernel- ...
- dockerfile+ubuntu+nginx搭建web环境
准备目录 [root@izchz ~]# mkdir /usr/local/dockerfile1 该目录下准备Dockerfile文件 FROM ubuntu MAINTAINER xbf RUN ...