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

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

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

常用vue UI 组件库 1) Mint UI: a. 主页: http://mint-ui.github.io/#!/zh-cn b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库 2) Elment a. 主页: http://element-cn.eleme.io/#/zh-CN b. 说明: 饿了么开源的基于 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) 在组件内声明所有的 props 2) 方式一: 只指定名称 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-cli 3) 作用: 从 https://github.com/vuejs-templates 下载模板项目 创建 vue 项目 npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm 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.org 3、安装webpack cnpm install webpack@3.8.1 -g webpack -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&...

计算属性 computed computed用来监控自己定义的变量，该变量不在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...

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