(21)打鸡儿教你Vue.js
组件化思想:
组件化实现功能模块的复用
高执行效率
开发单页面复杂应用
组件状态管理(vuex)
多组件的混合使用
vue-router
代码规范
vue-router
<template>
<div>
hello info component
</div>
</template>
<script>
export default {
name: "Info"
}
</script>
<style scoped>
</style>
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/info">Info</router-link>
</div>
<router-view/>
</div>
</template>
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/info',
name: 'info',
component: Info
},
Vuex
单向数据流概念
view actions state
Vuex多个视图依赖,菜单导航
不同视图的行为需要变更同一状态,评论弹幕
vue.js开发的状态管理模式
组件状态集中管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
组件的状态
改变状态的方法集
<template>
<div>
hello info component
<button type="button" @click="add()">添加</button>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'Info',
store,
methods: {
add () {
console.log('dashucoding')
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'about',
store,
data () {
return {
msg: store.state.count
}
}
}
</script>
<template>
<div>
hello info component
<button type="button" @click="add()">添加</button>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'Info',
store,
methods: {
add () {
console.log('dashucoding')
store.commit('increase')
}
}
}
</script>
<style scoped>
</style>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increase () {
this.state.count++
}
},
actions: {
}
})
调式
<script>
import store from '@/store'
export default {
name: 'Info',
store,
methods: {
add () {
console.log('add Event form info!')
// alert('alert form info')
debugger
store.commit('increase')
}
}
}
<template>
<div>
hello info component
<button type="button" @click="add()">添加</button>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'Info',
store,
data () {
return {
msg: 'hello vue'
}
},
methods: {
add () {
console.log('dashucoding')
debugger
store.commit('increase')
},
output () {
console.log('in output')
}
}
}
</script>
<style scoped>
</style>
console.log
alert()
debugger
window对象绑定
<template>
<div>
hello info component
<button type="button" @click="add()">添加</button>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'Info',
store,
data () {
return {
msg: 'hello vue'
}
},
mounted () {
window.vue = this
},
methods: {
add () {
console.log('dashucoding')
debugger
store.commit('increase')
},
output () {
console.log('in output')
}
}
}
</script>
<style scoped>
</style>
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(21)打鸡儿教你Vue.js的更多相关文章
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (26)打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (17)打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- java.lang.ClassNotFoundException: org.springframework.boot.bind.RelaxedPropertyResolver 错误解决
1.今天在搭建SpringBoot整合 pageHelper的时候报错如下 1.1 引入依赖如下: <!-- 分页插件 --> <dependency> <groupId ...
- JavaNetty
Netty的简单使用: import io.netty.bootstrap.Bootstrap; import io.netty.buffer.Unpooled; import io.netty.ch ...
- Java Web 深入分析(11) JVM 体系结构与工作方式
jvm体系 jvm简介 java virtual machine jvm体系详解 jvm工作机制 虚拟机怎么执行代码 jvm为何基于栈 执行引擎 执行引擎过程 java调用栈 总结
- Java File类与IO流
File 类 java.io.File 文件和目录路径名的抽象表示形式, 对文件或目录进行操作 构造方法: File(File parent, String child) : 根据 parent 抽象 ...
- 动画处理<并行和串行>
并行动画 当多个动画定义同时指向某个组件,并使用动画控制器启动时,就产生了并行动画(Parallel Animation).例如我们可以让一个组件: 移动的同时改变大小 旋转的同时边界颜色闪烁 圆形图 ...
- 学习笔记之MongoDB
MongoDB - Wikipedia MongoDB is a cross-platform document-oriented database program. Classified as a ...
- 【spark】spark应用(分布式估算圆周率+基于Spark MLlib的贷款风险预测)
注:本章不涉及spark和scala原理的探讨,详情见其他随笔 一.分布式估算圆周率 计算原理:假设正方形的面积S等于x²,而正方形的内切圆的面积C等于Pi×(x/2)²,因此圆面积与正方形面积之比C ...
- c# String类
- idea中添加web.xml配置文件与tomcat启动中遇到的web.xml文件找不到的问题
1,如何在idea中向war项目中添加web.xml的配置文件 idea通过maven创建war项目时没有指定是webapp导致创建出来的项目没有webapp的文件夹.其实war项目中都是在" ...
- Kubernetes-Istio之Sidecar自动注入
前提: (官方提供) 1):确认使用的是Kubernetes服务器的受支持版本( 1.13.1.14.1.15):kubectl (官方提供,应该是1.13版本以上,我的是1.16版本) kubect ...