huangpf_vcx

vuex 结构分析Vuex项目实战mian.js/*入口JS */import Vue from 'vue'import App from './App.vue'import store from './store'import './base.css'// 创建vm/* eslint-disable no-new */new Vue({ el: '#app', components: {App}, // 映射组件标签 template: '<App

vuex 理解vuex 是什么1) github 站点: https://github.com/vuejs/vuex2) 在线文档: https://vuex.vuejs.org/zh-cn/3) 简单来说: 对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)状态自管理应用1) state: 驱动应用的数据源2) view: 以声明方式将 state 映射到视图3) actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法).

嵌套路由子路由组件News.vueMessage.vue配置嵌套路由: router.jspath: '/home', component: home, children: [{ path: 'news', component: News }, { path: 'message', component: Message }]路由链接: Home.vue<router-link to="/home/news">News&l

Vue-router1) 官方提供的用来实现 SPA 的 vue 插件2) github: https://github.com/vuejs/vue-router3) 中文文档: http://router.vuejs.org/zh-cn/4) 下载: npm install vue-router --save相关 API1) VueRouter(): 用于创建路由器的构建函数new VueRouter({ // 多个配置项})2) 路由配置routes: [{ //

常用vue UI 组件库1) Mint UI:a. 主页: http://mint-ui.github.io/#!/zh-cnb. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库2) Elmenta. 主页: http://element-cn.eleme.io/#/zh-CNb. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库Mint UI下载: npm install --save mint-ui实现按需打包1. 下载 npm install --

vue 项目中常用ajax 库vue-resource vue 插件 非官方库 vue1.x 使用广泛axios 通用的 ajax 请求库 官方推荐 vue2.x 使用广泛vue-resource 的使用在线文档https://github.com/pagekit/vue-resource/blob/develop/docs/http.md下载npm install vue-resource --save// 引入模块import VueResource from 'vu...

props使用组件标签时<my-component name='tom' :age='3' :set-name='setName'></my-component>定义MyComponent 时1) 在组件内声明所有的 props2) 方式一: 只指定名称 props: ['name', 'age', 'setName']3) 方式二: 指定名称和类型props: { name: String, age: Number, setNmae:

vue 文件的组成1) 模板页面 <template> 页面模板 </template>2) JS 模块对象 <script> export default{ data() { return {} }, methods: {}, computed: {}, com.

使用 vue-cli 创建模板项目说明1) vue-cli 是 vue 官方提供的脚手架工具2) github: https://github.com/vuejs/vue-cli3) 作用: 从 https://github.com/vuejs-templates 下载模板项目创建 vue 项目npm install -gvue-cli vue initwebpack vue_democd vue_demonpm installnpm run dev访问: http://loc

简介Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，简单的来说路由跳转路由就是局部刷新。使用路由需要一个额外的库： vue-router.min.js简单的路由1、申明三个模板( html 片段 )2、定义路由3、创...

准备环境1、安装node，完成以后输入 node -v查看版本号2、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org3、安装webpackcnpm install [email protected] -gwebpack -v查看版本号4.安装vue-cli脚手架构建工具npm instal...

全局注册通过vue.component来注册组件Vue.component('my-component-name', { // ... 选项 ...})局部注册全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的...

简单示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ co...

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div&...

计算属性computedcomputed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值。可以比较以下两种方式，当表达式比较复杂的时候可以使用computed来进行计算。<div id="div1"> ...

v-bind 做属性绑定可以使用v-bind进行属性绑定， v-bind:href可以简写成 :href<div id="div1"> <a v-bind:href="page">http://www.baidu.com</a> <a :href="page">http://www.baidu.com</a>&...

条件语句v-if通过toggle函数切换show的值。 通过v-if 语句，当show 是true的时候，显示当前元素<div v-if="show"> 默认这一条是看得见的</div>完整代码<script src="js/vue.min.js"></script><div id="div1"> &lt...

什么是VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。入门案例我们要把一个 json对象的数据，显示到一个元素上去。如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML...