（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')debuggerstore.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')debuggerstore.commit('increase')},output () {console.log('in output')}}
}
</script><style scoped></style>

console.logalert()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')debuggerstore.commit('increase')},output () {console.log('in output')}}
}
</script><style scoped></style>

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774

（21）打鸡儿教你Vue.js相关推荐

（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 ...
（29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器实现阅读器的基础功能字号选择,背景颜色有上一页,下一页的功能设置字号,切换主题,进度按钮电子书目录 ...
（1）打鸡儿教你Vue.js
当今世界不会Vue.js,前端必定路难走一个JavaScript MVVM库以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...
（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 重点看,重 ...
（15）打鸡儿教你Vue.js
组件化vue.js 组件单向绑定组件双向绑定组件单次绑定创建组件构造器注册组件使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
（13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

（21）打鸡儿教你Vue.js

代码规范

vue-router

Vuex

调式

请点赞！因为你的鼓励是我写作的最大动力！

（21）打鸡儿教你Vue.js相关推荐

最新文章

热门文章