![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue学习笔记
个人在学习vue.js中做下的笔记
程序员徐小白
程序员徐小白,专注于Java后端研发领域。
同名微信公众号,我会第一时间在上面分享我的学习笔记,还有各种学习资料。
展开
-
vuex中的modules的基本使用
创建modulestore.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count: 1}const mutations={ add(state,n){ state.count+=n }, reduce(state,n){ ...原创 2020-04-19 17:16:35 · 500 阅读 · 0 评论 -
vuex中actions的使用
先创建actions和方法store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count: 1}const mutations={ add(state,n){ state.count+=n }, reduce(state,...原创 2020-04-19 17:00:54 · 3325 阅读 · 0 评论 -
vuex中的getters的使用
通过this.$store.getters来使用store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count: 1}const getters={ count(state){ console.log(state.count) }...原创 2020-04-19 16:34:53 · 868 阅读 · 0 评论 -
vuex中的mutations的两种调用方法
直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button>不需要再进行其他配置通过在methods中注册方法调用//先引入mapMutationsimport {mapMutations} from 'vuex'export defau...原创 2020-04-19 15:46:32 · 12161 阅读 · 0 评论 -
vuex的state中的数据的四种使用方法
store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count: 1}export default new Vuex.Store({ state,mutations})直接通过$store来使用<template> <div...原创 2020-04-19 15:04:12 · 9340 阅读 · 0 评论 -
vuex的基本使用
首先先创建一个store.js安装vue,vuex什么的就不说了这是一个仓库import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//装载数据的一个仓库const state = { count: 1}//修改仓库的方法const mutations={ add(state){ ...原创 2020-04-19 00:30:45 · 112 阅读 · 0 评论 -
Vue实例中的render
1.render的使用定义html模板组件var 组件名称 ={ template:'<p></p>'}定义rendervar vm = new Vue({ el:'#app' render:c=>c(组件名称)})引入到render内的组件会替换掉el中指定的标签2.与components的区别render会覆盖掉Vue实例指...原创 2020-02-13 14:07:17 · 800 阅读 · 0 评论 -
Vue中的.vue文件的使用
需要安装vue-loadernpm i vue-loader vue-template-complier -D然后在配置文件中新增匹配规则{test:/\.vue$/,use:'vue-loader'}1. 定义.vue文件<template><!--这里定义html模板--></template><script>//这里定义...原创 2020-02-13 13:54:37 · 8999 阅读 · 2 评论 -
Vue实例中computed的使用
1.定义在computed中可以定义一些属性,这些属性叫做计算属性,这些属性是一个方法,当需要使用计算属性时,直接把属性当作数据的名称使用,就会调用对应的方法去计算出一个数据在引用计算属性时,一定不要加(),而应该将它当成不同数据来使用只要计算属性的方法内部,任何data中的发生了变化,就会立刻调用函数,重新计算计算属性计算属性的求值结果会被缓存起来,方便下次使用,如果计算属性中的数据发...原创 2020-02-12 21:22:49 · 858 阅读 · 0 评论 -
Vue实例中watch的使用
1.作用这个属性可以监听data中制定数据的变化,然后触发watch中对应的函数进行处理是Vue实例中的属性2.使用var vm=new Vue({ el:'#app', data:{ 一个数据:'' }, watch:{ //这个函数有两个参数 //newVal改变后的值 //oldVal改变前的值 '一个数据':fuction(){ //对数据变化...原创 2020-02-12 20:58:23 · 471 阅读 · 0 评论 -
vue中路由的命名视图实现经典布局
就是通过vue-router将组件渲染到页面中定义页面模板对象var header={template:'<p>header</p>'}var left={template:'<p>left</p>'}var main={template:'<p>main</p>'}定义路由对象,注册到Vue实例中var...原创 2020-02-12 18:13:23 · 202 阅读 · 0 评论 -
Vue中的路由嵌套
使用children属性实现路由的嵌套创建模板对象.js文件var father={template:'#temp'}var frist={template:'<p>第一个---{{$route.params.id}}</p>'}var second={template:'<p>第二个---{{$route.query.id}}</p>...原创 2020-02-12 17:46:04 · 106 阅读 · 0 评论 -
Vue中的路由传参
1.通过query获取参数创建路由对象,将路由对象注册到Vue实例中去var 页面模板对象={template:'<p>第一个</p>'}var router=new VueRouter({ routes:[ {path:'/监听的路由链接地址',component:页面模板对象} ]})var vm=new Vue({ ...原创 2020-02-12 16:33:10 · 168 阅读 · 0 评论 -
Vue中路由router的基本使用
1.vue-router的安装普通安装先下载vue-router.js导入,要先导入vue.js包<script src="vue-router.js"></script>webpack安装安装命令:npm install vue-router导入,要先导入vueimport VueRouter from'vue-router'启用Vue...原创 2020-02-12 15:55:32 · 218 阅读 · 0 评论 -
Vue中的组件传值
默认情况下,components属性中的组件无法访问data中的数据和methods中的方法1.通过props属性来实现父组件向子组件传值定义子组件var vm=new Vue({ components:{ coml:{ template:'<p>{{parentmsg}}</p>' } }})定义父数据var vm=new Vu...原创 2020-02-11 14:41:48 · 315 阅读 · 0 评论 -
vue中组件的切换方式
方式一使用v-if和v-else实现切换定义组件Vue.component('myTag1',Vue.extend({ template:'<p>tag1</p>'}))Vue.component('myTag2',Vue.extend({ template:'<p>tag2</p>'}))增加flagvar...原创 2020-02-10 22:25:36 · 798 阅读 · 0 评论 -
Vue.component的属性
Vue.component(‘组件名称’,{})中的属性1.template作用:用来定义组件的html模板使用:直接接字符串Vue.component('组件名称',{template:'<p>aaa</p>'})2.data作用:定义一个在组件中使用的数据定义:Vue.component('组件名称',{ data:fuction(){ ...原创 2020-02-10 20:01:35 · 7696 阅读 · 0 评论 -
vue中组件的定义方法
作用:拆分Vue实例的代码,能够让我们以不同的组件来划分不同的功能模块,直接调用对应的组件即可 方便ui组件的重用与模块化的区别:模块化是从代码逻辑的角度进行划分的,代码的没一层结构就是一个模块,业务逻辑层,server层等一般是后端,保证每个模块的职能单一组件化是从ui界面的角度进行划分的,每一个单独的标签元素的模板就是一个组件一般是前段,方便ui组件的重用!!注意:在使用组件时...原创 2020-02-10 18:51:15 · 2598 阅读 · 0 评论 -
Vue中的动画
1.过渡类名实现动画四个时间点:v-enter,v-enter-to,v-leave,v-leave-to入场时元素从v-enter变化到v-enter-to的状态,退场时元素从v-leave变化到v-leave-to作用:使页面中的元素出现和消失不会很突兀,加一个过渡效果使用:用transition标签把需要被动画控制的元素包裹起来transition标签自带了v-enter,v-...原创 2020-02-10 13:57:33 · 142 阅读 · 0 评论 -
JSONP的实现原理
1.使用原因为了保证浏览器的安全性,禁止ajax进行跨域访问(协议不同,域名不同,端口号不同)2.原理<script标签不受跨域影响可以通过动态创建<script标签,让服务器端返回一个方法调用(一般会传回一个参数),调用页面中的js方法<script>//提前定义一个js方法function js方法名(data){//该data是请求接口后传回来的一...原创 2020-02-09 15:17:26 · 148 阅读 · 0 评论 -
vue-resource发起异步请求
除了vue-resource之外,还可以使用’axios‘的第三方包实现数据的请求 测试url请求资源地址:get:http://vue.studyit.io/api/getlunbopost:http://vue.studyit.io/api/postjsonp:http://vue.studyit.io/api/jsonp因为跨域失败访问不到,不过同域的可以直接访问.html文件来检...原创 2020-02-09 14:28:13 · 235 阅读 · 0 评论 -
Vue实例的生命周期函数
概念: 从Vue实例创建,运行,销毁期间,总是会伴随各种各样的事件 生命周期钩子=生命周期函数=生命周期事件使用:var vm=new Vue({beforeCreate(){}})1.创建期间的生命周期函数beforeCreate(){}作用:在Vue实例在未完全创建之前会执行将new Vue()对象中的data和methods等注入到Vue实例中时机:Vue实例默...原创 2020-02-09 12:05:35 · 222 阅读 · 0 评论 -
vue中钩子函数的参数
el含义:指令所绑定的元素binding含义:一个对象,包含了该指令的一些信息name(指令名)value(指令的绑定值,指令用‘=’连接的值,会进行计算)oldValue(指令绑定的前一个值,仅在update和cupdate中生效)expression(绑定值的字符串形式)arg(传给指令的参数,指令用‘:’连接的值)modifiers(绑定的修饰符,对象的形式为{.a:tr...原创 2020-02-08 22:03:41 · 686 阅读 · 0 评论 -
vue中的过滤器
1.vue的全局过滤器作用:将数据传入到方法中进行操作可使用的范围:插值表达式中和v-bind表达式中页面中的所有Vue实例对象控制的区域使用:{{data中的数据名称 | 过滤器的名称}}过滤器的定义语法(创建):Vue.filter('过滤器名称',fuction(data){//第一个参数是过滤器的管道符前的数据//从第二个参数开始,就是在调用过滤器时传入的参数//方法...原创 2020-02-08 17:32:01 · 541 阅读 · 0 评论 -
forEach,some,findIndex,filter的简单使用
都能对数组进行循环遍历1.forEach特点:无法停止使用:list.forEach(item=>{})2.some特点:可以通过return true停止使用:list.some(item=>{if(item=="1")return true; })3.findIndex特点:找到对应项的索引使用:list.findIndex((item,ind...原创 2020-02-07 22:57:35 · 249 阅读 · 0 评论 -
在Vue中使用样式
可以通过不同的形式使用css样式需要使用v-bind1.数组使用::class="[’’,’’]"格式:[‘css1’,‘css2’]在数组中填入样式的名称可以使用插值表达式,与data中的数据进行绑定(在data中定义一个boolean数据来使用三元表达式true?‘css1’:'css2’或对象{‘css’:‘true’},或直接将样式名称写入到data中)2.对象使用:...原创 2020-02-06 16:39:47 · 178 阅读 · 0 评论 -
vue中的事件修饰符
在触发事件后面加上就可以使用事件修饰符可以串连1…stop(停止)作用:阻止冒泡冒泡:默认会有冒泡,就是如果点击子元素,会从子元素标签上的事件先开始触发,然后到父元素的事件触发加了.stop的触发事件,会阻止自身引发其他事件的触发2…prevent(防止)作用:阻止默认行为默认行为:a标签跳转,表单提交等等,html标签自带的行为.prevent可以取消这种默认行为3…ca...原创 2020-02-06 15:30:32 · 169 阅读 · 0 评论 -
Vue中的一些指令
1.v-cloak作用:防止闪烁使用步骤:1.给插值表达式所使用的标签加上v-cloak属性2.定义样式[v-cloak]{display:none;}2.v-text作用:渲染数据,跟插值表达式作用一样跟插值表达式的区别:1.v-text无闪烁问题2.插值表达式只会替换占位符,v-text会自动覆盖元素中的原来内容3.v-html作用:将数据转换为html格式与v...原创 2020-02-05 18:35:23 · 167 阅读 · 0 评论