vue笔记2
vue项目目录
<pre>
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ └── main.js // Webpack 预编译入口
</pre>
工程目录下的 App.vue为主页面
其中template 写 html,script写 js,style写样式
注:1、一个组件下只能有一个并列的 div,也就是template下只能有一个直接div子元素
2、数据data要写按如下显示的 写在 return 里面
<script type="text/ecmascript-6">
import star from '../star/star.vue';
export default {
props: {
seller: {
type: Object
}
},
data() {
return {
detailShow: false
};
}
};
</script>
子组件调用父组件中的值需要用props
<template>
<div>
<div class="parent">
<p>父组件</p>
<p v-text="userInfo.userName"></p>
<router-link to='/parent/child'></router-link>
<router-view :message="userInfo"></router-view> //这里传参数userInfo给子组件,子组件用message调用
</div>
</div>
</template> <script>
export default {
data () {
return {
userInfo: {
userName: '阿水12344',
age: 12
}
}
}
}
</script>
<template>
<div class="child">
<p>子组件</p>
<p v-text="message.age"></p>
</div>
</template> <script>
export default {
props: ['message'] // 子组件获取父组件的数据
}
</script>
重点:
父组件:
1. <router-view :message="userInfo"></router-view> 子组件:
1. <p v-text="message.userName"></p>
2. props: ['message']
补充:
1. 当message改名为user-info(带“-”的形式)时,子组件调用“userInfo“驼峰法 <router-view :user-info="userInfo"></router-view>
<p v-text="userInfo.userName"></p>
props: ['userInfo'] 2. 子组件获取时可设置类型,如:设置为布尔型 props: {
active: {
type: Boolean
}
}
Vuex使用方法
1)创建store文件夹--》store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
count: 0,
showModal: false
},
//Vuex 中,mutation 都是同步事务:
mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
},
//Vuex 中,Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作
//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation
actions = {
increment: ({ commit }) => commit('increment'),
decrement: ({ commit }) => commit('decrement'),
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit('increment')
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('increment')
resolve()
}, 1000)
})
}
},
//就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
getters = {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}
export default new Vuex.Store({
state
})
store.js
2)在main.js中引用
import store from './store/store'
new Vue({
el: '#app',
router,
store,//添加store
components: { App },
template: '<App/>',
render: h => h(App),
mounted (){
pos()
}
})
3)在组件中调用
import store from '@/store/store'
export default{ store
}
使用时直接调用{{$store.state.count}} (当store.js中count值发生变化时,页面会自动刷新)
4)父组件可以使用 props 把数据传给子组件。
5)子组件可以使用 $emit 触发父组件的自定义事件。
子组件:
<template>
<div class="train-city">
<span @click='select(`大连`)'>大连</span>
</div>
</template>
<script>
export default {
name:'trainCity',
methods:{
select(val) {
let data = {
cityname: val
};
this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件
}
}
}
</script>
父组件:
<template>
<trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。
<template>
<script>
export default {
name:'index',
data () {
return {
toCity:"北京"
}
}
methods:{
updateCity(data){//触发子组件城市选择-选择城市的事件
this.toCity = data.cityname;//改变了父组件的值
console.log('toCity:'+this.toCity)
}
}
}
</script>
promise:所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then
方法可以接受两个回调函数作为参数。
第一个回调函数是Promise
对象的状态变为resolved
时调用,
第二个回调函数是Promise
对象的状态变为rejected
时调用。
其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise
对象传出的值作为参数。
npm安装插件
npm install-
-save
-
-save 会把依赖包名称添加到 package.json 文件 dependencies 键下
dependencies中存放的是项目中依赖的插件
另一个是 npm install –save-dev
-
-save-dev 则添加到 package.json 文件 devDependencies 键下
devDependencies是开发时依赖的环境,最终打包时 dependencies和devDependencies中的文件都会一起打包
绑定行内属性及点击事件时加判断总结
<a :class='[item.status=="yes" ? `btn-primary` : `btn-danger`]' :title="item.status=='yes' ?'取消' :'监测'" @click="item.status=='yes' ?seeManage(item.id,'delete') :seeManage(item.id,'on')">
:class="{'active': navId === 0}"
:class="['tab col-sm-4',tab.num2 ? 'current':'disabled']"
<div :class="[{'cbp-spmenu-push-toright':nav.left},'main-content cbp-spmenu-push']">
<div :class="['collapse navbar-collapse',{'in': nav.inMenu}]">
<router-link tag="li" to="/site" v-show="navId == 1"></router-link>
<button id="showLeftPush" class="{active:nav.left}" @click="nav.left = !nav.left"></button>
路由配置传多参
<router-link :to="{ name:'tamperingInfo', query: {sid: item.sid,id:item.id,url:item.url} }" tag="a" class="btn btn-success btn-xs md-trigger" title="详情"><i class="fa fa-info"></i></router-link>
{对应路由配置
path: 'tamperingInfo',
name: 'tamperingInfo',
component: tamperingInfo
}
vue笔记2的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记(有点乱)
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- Tomcat源码分析——类加载体系
前言 Tomcat遵循J2EE规范,实现了Web容器.很多有关web的书籍和文章都离不开对Tomcat的分析,初学者可以从Tomcat的实现对J2EE有更深入的了解.此外,Tomcat还根据Java虚 ...
- 验证是否是正整数,是否是mail,是否是正确的身份证
/// <summary> /// 通用验证类 /// </summary> class DataValidate { /// <summary> /// 验证正整 ...
- 个人开源项目之异步Http线程池框架
项目开源于:https://github.com/HouZhiHouJue/AsyncHttpThreadPool 示意图:
- C# 转换Json类
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.R ...
- 数据结构(三)--- B树(B-Tree)
文章图片代码来自邓俊辉老师的课件 概述 上图就是 B-Tree 的结构,可以看到这棵树和二叉树有点不同---"又矮又肥".同时子节点可以有若干个小的子节点构成.那么这样一棵树 ...
- nodejs文件上传组件multer使用
多图上传,发送端: var express = require('express') var rp = require('request-promise') var fs = require(&quo ...
- JavaScript内置对象与原生对象【转】
原文:https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化 ...
- SSM maven框架下载简易版
1.前台一个a标签,写个地址就行了 例如 <a href="${pageContext.request.contextPath}/fileDownLoad">前去下载& ...
- Java集合 之Map(HashMap、Hashtable 、TreeMap、WeakHashMap )理解(new)
HashMap 说明: 在详细介绍HashMap的代码之前,我们需要了解:HashMap就是一个散列表,它是通过“拉链法”解决哈希冲突的.还需要再补充说明的一点是影响HashMap性能的有两个参数:初 ...
- python查看当前路径
1.os模块 import os print os.getcwd() #获取当前工作目录路径 print os.path.abspath('.') #获取当前工作目录路径 print os.path. ...