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的 ...
随机推荐
- python36异步任务 获取ip地址的地理位置
# encoding: utf-8 import asyncio import requests import functools url = "http://ip.zxinc.org/ap ...
- [转]Format a ui-grid grid column as currency
本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 Yo ...
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...
- 教你用大功率路由器覆盖3平方公里的WiFi广告
一步一步教你用大功率路由器,不需要互联网宽带,实现覆盖3平方公里的WiFi广告路由器 相信大家对WiFi广告路由器已经不再陌生了,但是广告距离太近了,用处不大.那么,有没有一种简单的办法将WiFi广告 ...
- VMwear安装Centos7详细过程
1.软硬件准备软件:推荐使用VMwear,我用的是VMwear 10镜像:CentOS7 硬件:因为是在宿主机上运行虚拟化软件安装centos,I3CPU双核.硬盘500G.内存4G以上. 2 ...
- poj 3104 dring 二分
Drying Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7684 Accepted: 1967 Descriptio ...
- 原型链中的prototype、__proto__和constructor的关系
先来看一张图,这张图可以说是围绕以下代码完整的描述了各对象之间的关系.接下来我们来看看如何一步步画出这张图. function Foo(){}; var foo = new Foo(); 首先,明确几 ...
- PHP在foreach中对$value赋值无效,应该用 ‘键’ 或者 &$value的形式
首先我们看下这段代码: foreach ($data as$value) { $value['name'] = 'Hehe'; } $data中原始的数据为: array(1) { [0] => ...
- RHEL5.X 重启网卡出现./network-functions: line 78: .: ifcfg-eth0: file not found
错误信息: 红帽RHEL5.5系统,重启网卡报错 [root@localhost network-scripts]# service network restart Shutting down int ...
- LeetCode 533----Lonely Pixel II
问题描述 Given a picture consisting of black and white pixels, and a positive integer N, find the number ...