内容简介：使用vue Cli这里使用webStrom生成vue文件
使用vue Cli
这里使用webStrom生成vue文件
主文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: function (createElement) {
return createElement(App);
}
})
使用渲染函数，Vue文件导入，挂载到appDom节点上
路由
这里使用vue全家桶的route https://router.vuejs.org/zh/
根据Url 分发视图
这个需要好好学。。。。
Vue中最重要的一块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
const Foo = {
template: '<div>foo</div>',
}
const Bar = {
template: '<div>bar</div>'
}
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
const router = new VueRouter({
routes: routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
动态路由匹配
会进行匹配，参数值会进行替换
嵌套路由
状态管理
这里使用vuex
所有分散的共享数据由状态管理器保管
使用vuex
当store中状态发生变化，视图重新渲染
改变store中的状态进行提交
state维护应用层状态。。
在项目中使用vuex
使用脚手架搭建出vuex
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
驱动映射的数据源 -> 声明state映射到视图，-> actions 响应变化，形成闭环
加数器
创建目录如下
定义数据仓库
// 加数器模块
export default {
namespaced: true, // 独立命名空间
// 维护应用层状态，确保应用有唯一数据源
state: {
count: 0
},
// 唯一数据源的缓存值 定义获取数据的方法
getters: {
tenTimesCount: (state, getters, rootState, rootGetters) => {
console.log(state, getters, rootGetters, rootState);
return state.count * 10;
}
},
// 定义修改数据的方式
mutations: {
addCount: (state, num) => {
// 若num值为空赋值为1
state.count += num || 1
}
},
// actions 提交mutations 执行异步操作
actions: {
addCountAsync: (context, num) => {
// 这里异步执行
setInterval(() => {
// 提交mutations
context.commit('addCount', num || 100)
}, num || 100)
}
}
}
导出数据仓库
// 输出文件
import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/counter'
Vue.use(Vuex)
// 导出实例化仓库
export default new Vuex.Store({
modules: {
count: count
}
})
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 项目组合、项目集、项目管理实践经验及思考
- 项目管理：如何避免项目延期？
- 【Vue项目总结】后台管理项目总结
- 【Vue项目总结】项目nginx部署
- 分享一个vue项目“脚手架”项目
- 项目管理基础：什么是项目管理？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
