vuejs框架学习
更好的自己520
这个作者很懒,什么都没留下…
展开
-
Vue.js基础总结(三)
一:全局组件和局部组件父和子,使用的父,被用的是子父需要声明子组件,引入子组件对象,声明方法如下:引入子组件对象 在app.vue中 import headerVue from './xxx.vue'components:{ headerVue:headerVue}<header-vue></header-vue>全局组件,使用更为...原创 2018-06-10 19:32:30 · 146 阅读 · 0 评论 -
Vuex总结
vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用。这么说吧,将vue想作是一个js文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。vuex里面都有些什么内容?const store = new Vuex.Store({ state: { name: 'weish', ...转载 2018-05-30 13:42:43 · 188 阅读 · 0 评论 -
vue2.0入门及实战开发(七)
编程导航this.$router.go(-1) 根据浏览器记录来前进和后退前进 1 后退 -1this.$router.push(直接跳转到某个页面显示) push参数:字符串/xxx 对象: {name: 'xxx',query:{id:1},params: {}}&amp;lt;button @click=&quot;goMusic&quot;&amp;gt;跳转到音乐&amp;lt;/button原创 2018-06-06 13:22:56 · 171 阅读 · 0 评论 -
export ,export default 和 import 区别 以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都...转载 2018-05-29 11:39:16 · 448 阅读 · 0 评论 -
Vue.js开发环境配置
第一步:首先去nodejs官网(https://nodejs.org/en/)下载最新的node包(个人而言喜欢用最新的,就像女朋友,我喜欢是处女一样)下面截图是最新的node安装包,不要下错了哦(其实也不会错啦,我相信现在没有谁的电脑会是32位的!!)下载完成以后,眼睛闭着一路next安装即可。 我尝试过,你默认安装完成以后,系统环境变量会自动把node的安装路径加到path里。如...转载 2018-06-05 12:21:41 · 589 阅读 · 0 评论 -
vuex中mapState、mapGetters、mapActions、mapMutations的使用
第一步:创建store文件,添加index.js文件第二步:安装Vuex环境npm install vuex –save,引入以下内容import Vue from'vue'import Vuex from'vuex'import axiosfrom'axios'第三步:将Vuex作为一个插件Vue.use(Vuex)第四步:定义一个容器let store=new Vu...转载 2018-05-23 20:46:48 · 2300 阅读 · 0 评论 -
Vuex中mapState的用法
import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'import getters from './getters'Vue.use(Vuex)const state = { userInfo: { phone: ...转载 2018-05-23 20:36:11 · 1733 阅读 · 0 评论 -
Vuex的源码分析
mapStateimport { mapState } from 'vuex'export default { // ... computed: mapState({ // 箭头函数可以让代码非常简洁 count: state => state.count, // 传入字符串 'count' 等同于 `state => state.count`...转载 2018-06-04 14:58:29 · 176 阅读 · 0 评论 -
Vue.js之增删操作
&lt;li v-for="(hero,index) in heros" :key="index" :class="{'A':'red','B':'blue','C':'green','D':'pink'}[hreo.score]"&gt;{{hero.name}},{{hero.score}} &lt;button @click=&quo原创 2018-06-04 11:19:55 · 160 阅读 · 0 评论 -
methods和computed总结
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。 而使用 methods ,在重新渲染的时候,函数总会重新调用执行...转载 2018-06-03 18:55:30 · 1363 阅读 · 0 评论 -
Vue.js中路由导航的两种方法
一:<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:// 字符串<router-link to="apple"> to apple</router-link>// 对象<router-link :to="{path:'apple'}"> to apple&l转载 2018-06-03 10:00:46 · 891 阅读 · 0 评论 -
router-link动态赋值
A:router路由配置export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home, children:[ {path:'home1',component:Home1}, {path:'home...转载 2018-06-03 09:42:29 · 15549 阅读 · 0 评论 -
Vue.js之排序和添加购物车操作
项目之按销量价格排序操作<el-tabs v-model="activeName" @tab-click="priceFun" > <el-tab-pane label="按销量排序" name="hot"></el-tab-pane> <el-tab-pane label="按价格由高到低&quo原创 2018-06-02 22:49:45 · 1805 阅读 · 0 评论 -
VUE 关于理解$nextTick()的问题
Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM。this.$nextTick()官方介绍:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。DOM<div id="app"> <p r...转载 2018-06-02 18:35:03 · 1686 阅读 · 0 评论 -
Vue.js项目之登录注册查询功能
<template> <div class="headerContainer"> <el-header> <!-- <el-span>基于二维码的商品管理系统</el-span> --> <!-- <el-button type="primary&q原创 2018-06-02 18:18:27 · 2588 阅读 · 0 评论 -
vue-resource的get和post方法
Vue-resource作为插件的形式存在,通过XMLHttpRequest或JSONP发起请求并处理响应,在开发中也非常常见,下面用vue-resource来请求booksget:在vue中新增ready对象,当页面加载完成时就去请求new Vue({ el: '#app', ready: function() { this.$http.get('book.json转载 2018-05-06 19:55:22 · 883 阅读 · 0 评论 -
Vue.js 快速入门
转自博客: https://segmentfault.com/a/1190000003968020转载 2018-05-06 17:02:52 · 634 阅读 · 0 评论 -
Vue.js+Echart结合
<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div></template><script> import echarts from 'echar转载 2018-05-30 14:21:34 · 14495 阅读 · 0 评论 -
vue.resource 、axios、ajax 异步通信
1、vue 支持开发者引入 jquery 使用 $.ajax()1、首先,在 package.json 中添加 jQuery,然后 npm install"dependencies": { "jquery": "^3.2.1", },2、在 webpack.config.js ( 这边用的 vue-cli-simple 脚手架 ) // 增加一个plugins...转载 2018-05-30 15:12:46 · 312 阅读 · 0 评论 -
关于Vuex的全家桶状态管理(一)
安装 npm install vuex --save在main.js 主入口js里面引用store.jsimport Vue from 'vue'import App from './App'import router from './router'import store from './vuex/store' //引用store.jsVue.config....转载 2018-05-30 16:25:05 · 291 阅读 · 0 评论 -
Vue.js基础总结(二)
可用过滤器实现某些文本的格式化 过滤器可以用在两个地方: 插值表达式和v-bind表达式定义格式化时间<td>{{item.ctime | dateFormat('yyyy-MM-DD')}}</td>//全局的过滤器,进行时间的格式化Vue.filter('dateFormat',function(dateStr,pattern){ //根...原创 2018-06-09 22:47:15 · 145 阅读 · 0 评论 -
Vuex总结(三)
1.mapStatestate的mapState的辅助函数主要是为了解决当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。例如当我在store.js中的state对象里面声明了以下几个属性const store = new Vuex.Store({ state: { orderItem: [], //订单的食物列表 orderFee: 0, /...转载 2018-06-17 12:28:27 · 222 阅读 · 0 评论 -
Vuex总结(二)
vuex的使用1.组件中通过dispatch事件触发actions eg: methods: { 事件名: function() { this.$store.dispatch("键值名", 需要存储的值); }, }2.通过actions进行commit提交给mutation eg:action.js ...转载 2018-06-17 12:25:27 · 105 阅读 · 0 评论 -
Vuex总结(一)
&lt;script&gt; Vue.use(Vuex); var myStore = new Vuex.Store({ state:{ //存放组件之间共享的数据 name:"jjk", age:18, num:1 }, mutatio...转载 2018-06-17 12:17:01 · 365 阅读 · 0 评论 -
Vue.js增删案例
品牌管理案例数据的增删&amp;lt;div class=&quot;panel panel-primary&quot;&amp;gt; &amp;lt;div class=&quot;panel-heading&quot;&amp;gt; &amp;lt;h3 class=&quot;panel-title&am原创 2018-06-09 14:09:21 · 267 阅读 · 0 评论 -
router-link传参及参数的使用
1.路径:http://localhost:8081/#/test?name=1&lt;router-link:to="{path:'/test',query:{name:id}}"&gt;跳转&lt;/router-link&gt;id是参数使用this.$route.query.id2.路径:http://localhost:8081/#/test/1&lt;rout转载 2018-06-02 15:38:49 · 2960 阅读 · 0 评论 -
Vue.js之CSS过渡
.xxx-enter-active { transition: all .3s ease;}.xxx-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.xxx-fade-enter,.xxx-leave-active { transform: translateX(10px);}这...原创 2018-06-16 10:29:07 · 242 阅读 · 0 评论 -
Vue.js总结(二)
1:存储状态,也就是变量const state = { name: 'weish', age: 22};2:我们一般使用getters来获取state的状态,而不是直接使用stateexport const name = (state) => { return state.name;}3:export const SET_NAME = ‘S...原创 2018-06-02 00:15:20 · 383 阅读 · 0 评论 -
Vue2.0 render:h => h(App)解析
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法}).$mount('#app')render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来vue.2.0的渲染过程: 1.首先需要了解这是 es...转载 2018-06-01 23:52:05 · 722 阅读 · 0 评论 -
Vue.js框架总结(一)
1:Vue实例中的data属性使用 https://blog.csdn.net/fengjingyu168/article/details/72900624为什么在大型项目中需要使用return返回数据呢? 因为不适用return包裹的数据会在项目的全局可见,会造成变量污染,使用return包裹的数据中变量只在当前组件中生效,不会影响其他组件2:为什么在export defau...原创 2018-06-01 23:15:32 · 262 阅读 · 0 评论 -
Vue.js基础总结(一)
一:v-cloak、v-text、v-html&lt;div id="app"&gt; {{msg}} //插值表达式会出现闪烁问题&lt;/div&gt;[v-clock]{ display:none; // 解决插值表达式的闪烁问题}&lt;p v-clock&gt;{{msg}}&lt;/p&gt;原创 2018-06-08 17:31:55 · 265 阅读 · 0 评论 -
Webpack的用法
若报错:You need an appropriate loader to handle this file type在webpack.config.js中加入vue的解析解析vue{ test:/\.vue/$, loader:'vue-loader',}webpack找人来理解你写的单文件代码vue-loader,vue-template-compiler,代码...原创 2018-06-07 23:33:34 · 288 阅读 · 0 评论 -
vue-cli脚手架的搭建
1:检查node版本 在安装vue的环境之前,安装NodeJS环境是必须的,可以使用node -v指令来检查2:安装vue-cli 先全局安装vue-cli,使用指令npm install -g vue-cli,之后就可以使用命令vue init&lt;template-name&gt;&lt;project-name&gt;来进行脚手架的安装 ,做完后使用vue指令检查一下是...转载 2018-05-31 15:40:49 · 115 阅读 · 0 评论 -
vue-router: 嵌套路由
模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <转载 2018-06-06 15:09:42 · 153 阅读 · 0 评论 -
Vue.js多视图的使用
比如使用多视图,可以将网站页面封装header、footer、navbar等公共部分, 遇到修改公共部分的文案信息等数据的时候,不再需要逐一修改每个页面;只需要修改各个不同文件引用的唯一对应的相同视图文件即可完成所有不同页面效果的自动同步更新, 从而更便捷,更省时,更省力地去管理网站的不同部分。总结说明:以前可以一次性放一个坑对应一个路由和显示一个组件 a. 一次行为 = 一个坑...转载 2018-06-06 15:01:56 · 1107 阅读 · 0 评论 -
关于Vuex的全家桶状态管理(二)
1:mutations触发状态 (同步状态)<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia"转载 2018-05-30 16:29:43 · 194 阅读 · 0 评论 -
Vue.js2.0中子组件修改父组件传递过来的props
如果非得需要修改传入的prop为对象的属性,又不想破坏原对象,可以深拷贝这个对象,ES6提供的Object.assign({},prop)的返回值就是一个全新的对象,操作这个新对象不会影响旧对象,如果不用ES5就自己递归实现拷贝器。代码 1:给computed属性设置get和set方法,并利用Object.assign()深度克隆对象可以完美解决修改props传值问题computed:{原创 2018-04-26 11:11:05 · 7381 阅读 · 1 评论 -
Vue.js的指令简单总结
HTML页面: <div id="app">{{message}}</div>页面中的数据就是data中的数据模版指令:控制模块的内容v-text (控制元素的文本内容) eg: <p v-text="a"></p> --> a 是data中的av-html(控制元素的内容,包括内部结构 )eg:<p v-html="a"></p>控制模块隐藏 v-if eg:<p v-转载 2018-04-20 12:44:58 · 154 阅读 · 0 评论 -
Vue.js之组件注册
<h4>注册全局组件</h4><div id="app-1"> <my-component></my-component></div><script>//注册 全局 组件 Vue.component('my-component',{ //选项 template:'<div>这是全局注册组件</div>' })//创建根实例 v转载 2018-04-19 19:42:22 · 347 阅读 · 0 评论 -
Vue.js之Prop基本用法
使用Prop传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。 prop是父组件用来传递数据的一个自定义属性。子组件需要显示的地用props选项声明”prop”Vue.component('child',{ props:['message'], template:'<span>{...转载 2018-04-19 19:22:16 · 1247 阅读 · 0 评论