精华内容
下载资源
问答
  • Vue.js in Action

    2019-04-17 16:39:05
    Vue.js in Action Before you dive into learning how to make Vue.js applications, let’s talk about a few things you should know first. In this book we’ll look at everything you need to know to become...
  • 今天小编就为大家分享一篇关于Vue核心概念Action的总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 主要介绍了VUE UPLOAD 通过ACTION返回上传结果操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE

    千次阅读 多人点赞 2018-12-04 16:53:47
    VUE学习vue-router安装vue-router编写vue-router的配置文件使vue-router配置生效配置多级路由 vue-router vue-router是用作前端路由的。 安装vue-router npm install vue-router --save 编写vue-router的配置文件 ...

    vue-router

    vue-router是用作前端路由的。

    安装vue-router

    npm install vue-router --save
    

    编写vue-router的配置文件

    在src目录下新建一个router的配置文件router.js (名字自定义):

    // 导入vue
    import Vue from 'vue'
    // 导入vue-router
    import Router from 'vue-router'
    // 导入需要路由的组件
    import Hello from './components/hello/Hello'
    
    // 设置vue-router组件全局使用
    Vue.use(Router)
    
    // 配置组件路由参数信息
    const routes = [
    		{
    			// 组件路由路劲
    			path: '/hello',
    			// 要路由的组件
    			component: Hello,
    			// 取别名,名字自定义
    			name: 'Hello'
    		}
    	]
    
    // 构建路由配置对象
    const router = new Router({
    	routes 
    })
    
    // 导出配置
    export default router
    
    

    使vue-router配置生效

    在main.js中,导入上面配置好的路由信息

    import Vue from 'vue'
    import App from './App'
    // 导入router的配置
    import router from './router'
    
    new Vue({
    // 使配置生效
      router,
      render: h => h(App)
    }).$mount('#app')
    
    

    重启项目,通过ip+端口+ /hello 就能访问到对应的Hello组件了。

    配置多级路由

    import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from './component/Hello'
    import Hi from './component/hi'
    
    //全局使用router
    Vue.use(Router)
    
    const routes = [{
    	{
    		path: '/hello',
    		component: Hello,
    		name: 'Hello',
    		// 每个路由都有一个children标签,用于配置子路由
    		children: [
    			{
    				path: '/hi',
    				component: Hi,
    				name: 'Hi'
    			}
    		]
    	}
    }]
    
    const router =  new Router({
    	routes
    })
    
    export default routes
    

    子路由,其实 就是路由下的一个children属性,在children属性是一个数组,可以配置多个路由,在这个属性中的路由中,还可以配置children属性,达到配置多级路由的效果。

    使用vue-router

    配置好路由信息后,可以通过router-link制作导航,to属性对应配置的path的路径。router-view用来加载(显示)要路由的模板。

    <!--配置路由路径-->
    <router-link to="/hello">hello</router-link> 
    <!--配置路由模板显示地址-->
    <router-view></router-view>
    

    也可以通过路由配置中的name属性实现跳转:

    <!-- to前面一定要写:,只是一个对象,name: 定义的名字,这样就会跳转到指定name的组件上-->
    <router-link :to="{name: 'Hello'}"></router-link>
    <router-view></router-view>
    

    在组件中传值

    注意的是,to前面一定要有:,to的值是一个对象,并且属性是name, params:

    <router-link :to="{name: 'hi', params: {username: 'tom', age: 18} }"></router-link>
    

    在组件中接收参数要用到**$route**:

    <p>   {{ $route.name }}   </p>
    <p>   {{ $route.params }}   </p>
    

    在不同页面加载不同的组件

    配置路径对应的组件,配置router:

    import Vue from 'vue'
    import Router from 'vue-router'
    import Student from './views/Students'
    import Teacher from './views/Teacher'
    
    Vue.use(Router)
    
    const routes = [{
        path: '/user',
        // /user路径下对应了两个组件
        components: {
          Student,
          Teacher
        }
    }]
    
    const router = new Router({
      routes,
      mode: 'history'
    })
    
    export default router
    
    

    使用时,在router-view中指定要显示的是哪个组件:

    <template>
      <div id="app">
        app
        <hr>
        <router-link to="/user">load</router-link>
        <hr>
        <!--通过name属性指定当前router-view要显示的组件-->
        <router-view name="Teacher"></router-view>
        <hr>
        <router-view name="Student"></router-view>
      </div>
    </template>
    

    通过url传递参数

    在定义路由时,要指定传递的url参数名。

    const routes = [{
        path: '/user',
        components: {
          Student,
          Teacher
        }
    }, {
    // 指定参数名,参数名后面加(),里面写正则表达式,可以匹配路径
      path: '/hello/:id(\\d+)/:name',
      component: Hello
    }]
    

    路径跳转:

    <!-- 最终路径显示成:http://192.168.56.1:8081/hello/122/xx -->
     <router-link to="/hello/122/xx">URL</router-link>
     <hr>
     <router-view></router-view>
    

    在组件中获取参数:

    <p>  {{$route.params.id}} </p>
    <p>  {{$route.params.name}} </p>
    

    路由重定向

    路由重定向只需要在路由配置里面加redirect就可以了,重定向也可以携带url参数:

    	{
    		path: '/hi/:id',
    		redirect: '/hello/:id'
    	}
    

    为路径去别名

    使用路由时在router-link的to属性中可以写hi,也可以写/hello,注意不要对根路径/取别名:

    	{
    		path: '/hi',
    		redirect: '/hello',
    		alias: '/hello';
    	}
    

    路径*匹配

    如果有个路径匹配不到,跳转到404页面,注意路径是从上向下匹配的,* 这个匹配应该放到路由最后:

    	{
    		path: '*',
    		component: FileNotFound
    	}
    

    路由独享守卫

    路由钩子函数、守卫,可以控制路由的访问,只要beforeEnter :

    {
        path: '/hello',
        component: Hello,
        name: 'hello',
        // 定义路由信息的时候指定
        beforeEnter (to, from, next) {
          console.log("去到", to.fullPath);
          console.log("来自", from.fullPath);
          // 当调用next()或者next(true)的时候,路由正常跳转
          next(true);
        }
      }
    

    组件内守卫

    钩子函数(守卫)写在组件中, beforeRouteEnter进入路由前,beforeRouteLeave离开组件前:

    // 在组件中
    export default {
        name: 'Hello',
        beforeRouteEnter(to, from, next) {
          console.log("去", to.fullPath)
          console.log("来自", from.fullPath)
          next(true)
        },
        beforeRouteLeave(to, from, next) {
          console.log("去", to.fullPath)
          console.log("来自", from.fullPath)
          next(true)
        }
      }
    

    全局守卫

    前置钩子函数:

    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // ...
    })
    

    后置钩子函数,不接受next,不会改变导航本身:

    router.afterEach((to, from) => {
      // ...
    })
    

    动态路由

    this.$router.push()

    <!--绑定一个事件,调用toHello方法-->
    <button @click="toHello">load</button>
    <script>
      export default {
        name: "App",
        methods: {
          toHello() {
          	// 在toHello方法中调用push()方法,方法接收一个参数,路由地址
            this.$router.push('/hello')
          }
        }
      }
    </script>
    

    this.$router.go()

    <button @click="toHello">load</button>
    <script>
      export default {
        name: "App",
        methods: {
          toHello() {
          	// 在toHello方法中调用go()方法,方法接收一个参数,历史记录数,-1表示回退一个历史记录,-2表示回退2个历史,同理整数表示前进
            this.$router.go()
          }
        }
      }
    </script>
    

    this.$router.repalce()

    <button @click="toHello">load</button>
    <script>
      export default {
        name: "App",
        methods: {
          toHello() {
          	// 在toHello方法中调用replace()方法,方法接收一个参数,路由地址,比如当前是路由时/a,我们触发这个方法执行,跳转到/hello,replace方法会替换/a,变成/hello,/a不出现在历史记录中,所以回退的时候不会回退到/a
            this.$router.replace('/hello')
          }
        }
      }
    </script>
    

    Vuex

    简单使用

    安装vuex

    npm install vuex --save
    

    在src下新建store.js

    // 引入vue
    import Vue from 'vue'
    // 引入vuex
    import Vuex from 'vuex'
    
    // 使用vuex
    Vue.use(Vuex)
    
    // 声明状态
    const state = {
      count: 1
    }
    
    // 声明变化 
    const mutations = {
     // 这里对状态中的count修改
      add(state) {
        state.count++
      },
      reduce(state) {
        state.count--
      }
    }
    
    // 创建vuex数据仓库,需要state和mutations两个属性
    const store = new Vuex.Store({
      state,
      mutations
    })
    
    // 暴露仓库
    export default store
    
    

    在组件中引用:(this.$store.commit() 接受mutations中定义的函数,会将接收的函数执行)

    <template>
      <div>
      	<!--调用当前实例的store属性,取出state状态中的count-->
         Count: {{this.$store.state.count}}<br/>
         <!--this.$store.commit接收一个mutations中定义的函数,用户操作state中的数据,这里不能用this调用-->
        <button @click="$store.commit('add')">+</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="$store.commit('reduce')">-</button>
      </div>
    </template>
    <script>
    	// 引入数据仓库
      import store from './store'
    
      export default {
        name: 'Count',
        // 作为当前vue实例属性
        store
      }
    </script>
    
    

    使用vuex的state中的属性

    方式一: 通过$store.state.xxx访问,xxx就是你要访问的数据

    <template>
      <div>
         Count: {{$store.state.count}}<br/>
      </div>
    </template>
    <script>
    	// 引入数据仓库
      import store from './store'
    
      export default {
        name: 'Count',
        // 作为当前vue实例属性
        store
      }
    </script>
    

    方式二:通过计算属性访问,其实也是调用了$store.state.xxx

    <div>
    	{{ count }}
    </div>
    <script>
     import store from './store'
    export default {
       name: 'Count',
       computed: {
       // 计算属性中使用
         count() {
           return this.$store.state.count;
         }
       },
       store
     }
    </script>
    

    方式三:vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。

    <template>
      <div>
        Count:{{ count }}<br/>
      </div>
    </template>
    <script>
      import store from './store'
      // 获取mapState
      import { mapState } from 'vuex'
    
      export default {
        name: 'Count',
        // 映射到组件
        computed: mapState(['count']),
        store
      }
    </script>
    
    

    上面的方式不能自己写其他计算属性了,如果要写其他计算属性,可以用下面的写法:

    computed: {
         localComputed() { 
    
         },
         // 映射
          ...mapState({
            count: 'count'
          })
        },
    

    修改state中的状态

    修改状态state需要用到mutations属性,mutations中定义函数,函数的第一个参数时默认的,为state,第二个参数可以是一个对象。可以通过state获取state中的属性

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
      count: 3
    }
    
    // 定义操作state的函数
    const mutations = {
    	// 第一个参数是默认的,之后的参数是自定义的
      add(state, n) {
        state.count += n
      },
      reduce(state, obj) {
        state.count = state.count + obj.n + obj.m
      }
    }
    
    const store = new Vuex.Store({
      state,
      // 在mutations中定义一些函数操作state
      mutations
    })
    

    调用定义的函数操作state:

     <button @click="$store.commit('add', 10)">+</button>
     <button @click="$store.commit('reduce', {n: 10, m: 20})">-</button>
     <script>
      import store from './store'
      import { mapState } from 'vuex'
    
      export default {
        name: 'Count',
        store
      }
    </script>
    

    使用mapMutations:

    <template>
      <div>
        Count: {{$store.state.count}}<br/>
        <button @click="add(11)">+</button>
        <button @click="reduce({n: 10, m: 20})">-</button>
    
      </div>
    </template>
    <script>
      import store from './store'
      // 引入mapMutations
      import { mapMutations } from 'vuex'
    
      export default {
        name: 'Count',
        // 传入方法名即可
        methods: mapMutations(['add', 'reduce']),
        store
      }
    </script>
    
    

    为了能自定义方法,也可以这样写:

    <template>
      <div>
        Count: {{$store.state.count}}<br/>
        <button @click="add(11)">+</button>
        <button @click="reduce({n: 10, m: 20})">-</button>
    
      </div>
    </template>
    <script>
      import store from './store'
      import { mapMutations } from 'vuex'
    
      export default {
        name: 'Count',
        methods: {
        	// 自定义方法
          my() { },
          // mapNuutations的用法
          ...mapMutations(['add', 'reduce'])
        },
        store
      }
    </script>
    
    

    getters

    设置getters

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
      count: 3
    }
    
    const mutations = {
      add(state, n) {
        state.count += n
      },
      reduce(state, obj) {
        state.count = state.count + obj.n + obj.m
      }
    }
    
    // 定义getters
    const getters = {
      count(state) {
        return state.count += 100
      }
    }
    
    
    const store = new Vuex.Store({
      state,
      mutations,
      // 使用getters
      getters
    })
    
    export default store
    
    

    使用getters:

    <template>
      <div>
      	<!--要通过这种方式 访问-->
        Count: {{count}}<br/>
      </div>
    </template>
    <script>
      import store from './store'
      // 引入getters
      import { mapMutations, mapGetters } from 'vuex'
    
      export default {
        name: 'Count',
        methods: {
          my() { },
          ...mapMutations(['add', 'reduce'])
        },
        // 在计算属性中使用..
        computed: {
        	// 使用getters
          ...mapGetters(['count'])
        },
        store
      }
    </script>
    
    

    action异步执行

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
      count: 3
    }
    
    // 定义方法
    const mutations = {
      add (state, n) {
        state.count += n
      },
      reduce (state, obj) {
        state.count = state.count - obj.n - obj.m
      }
    }
    
    // 声明action,声明要异步执行的函数
    const actions = {
    // 传入的是context对象
      add (context) {
        context.commit('add', 0.1)
      },
      // 或者是{commit}
      reduce({commit}, n) {
        commit('reduce', n )
      }
    }
    
    const store = new Vuex.Store({
      state,
      mutations,
      actions
    })
    
    export default store
    
    

    使用:

    <template>
    	Count: {{count}}<br/>
        <button @click="add">+</button>
        <button @click="reduce({n: 1, m :2})">-</button>
    </template>
    <script>
      import store from './store'
      // 导入
      import { mapActions, mapState } from 'vuex'
    
      export default {
        name: 'Count',
        methods: {
          my () {
          },
          // 使用
          ...mapActions(['add', 'reduce'])
        },
        computed: {
          ...mapState(['count'])
        },
        store
      }
    </script>
    
    展开全文
  • ActionCableVue是针对VueJS的易于使用的Action Cable集成。 :rocket: 安装 npm install actioncable-vue --save // Vue 2.x import Vue from 'vue' ; import ActionCableVue from 'actioncable-vue' ; import App ...
  • Vue

    2020-04-22 15:37:29
    Vue概述 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。

    Vue概述

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。
    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:数据和 DOM 已经被建立了关联,所有东西都是响应式的。
    当data中msg的数据发生改变,h1标签中的数据也会响应式的进行改变

    <body>
    	<div id="box">
    		<h1>{{msg}}</h1>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg:'Hello Vue',
    	}
    });
    

    声明式渲染:只需要声明在哪里需要做什么?不需要关心具体怎么实现的
    命令式渲染:需要以具体代码表达在哪里做什么?它是如何实现的

    在使用Vue框架时,需要在项目中引入Vue
    导入文件或者通过网页链接导入

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    Vue语法

    Vue实例的创建

    用Vue函数创建一个Vue实例

    /*el:进行渲染的元素
      data:数据*/
    new Vue({
    	el:'#box',
    	data:{
    		msg:'Hello Vue',
    	}
    });
    

    模板语法

    <body>
    	<div id="box">
    		<!-- {{}}:模板语法,用于数据的展示 -->
    		<h1>{{msg}}</h1>
    		<!-- 模板语法可以进行一些运算 -->
    		<h1>{{(30+50)*10/20}}</h1>
    		<h1>{{5>1}}</h1>
    		<h1>{{1+2>0?'大于':'小于'}}</h1>
    		<!-- 模板语法也可以调用JS的方法和属性 -->
    		<h1>{{msg.length}}</h1>
    		<h1>{{msg.startsWith('a')}}</h1>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg:'abc'
    	}
    });
    

    将数据显示到页面上

    <body>
    	<div id="box">
    		<!-- 通过{{}}显示数据 -->
    		<h1>{{msg1}}</h1>
    		<!-- v-text:设置元素文本内容,相当于{{文本内容}} -->
    		<h1 v-text="msg2"></h1>
    		<!-- v-html:设置元素html内容 -->
    		<h1 v-html="msg3"></h1>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg1:'Hello Vue1',
    		msg2:'Hello Vue2',
    		msg3:'<s>Hello Vue3</s>'
    	}
    });
    

    绑定事件

    <body>
    	<div id="box">
    		<!-- v-on:给元素绑定事件 -->
    		<button type="button" v-on:click="show1()">按钮1</button>
    		<!-- 事件绑定的简写方式 -->
    		<button type="button" @click="show2()">按钮2</button>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{},
    	// methods:存放事件的处理函数
    	methods:{
    	// 函数可传入参数event事件对象,并使用其属性和方法
    	// 调用preventDefault()方法阻止事件默认行为
    	// 调用stopPropagation()方法组织事件冒泡行为
    		show1:function(){
    			alert("abc");
    		},
    		show2:function(){
    			alert("123");
    		}
    	}
    })
    

    Vue中阻止事件默认行为和冒泡行为的特有方式

    <body>
    	<div id="box">
    		<div id="div1" @click="show1()" style="height:100px;width: 100px;background: red;">
    			<!-- 阻止事件冒泡行为 -->
    			<div id="div2" @click.stop="show2()" style="height:50px;width:50px;background:yellow;">
    				
    			</div>
    		</div>
    		<!-- 阻止事件默认行为 -->
    		<a href="https://www.baidu.com" @click.prevent="show1()"></a>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{},
    	methods:{
    		show1:function(){
    			alert("aaa");
    		},
    		show2:function(){
    			alert("bbb"); 
    		}
    	}
    })
    

    绑定属性

    <body>
    	<div id="box">
    		<!-- v-bind:用于绑定data中的属性数据-->
    		<img v-bind:src="imgurl">
    		<a v-bind:href="hrefurl">百度</a>
    		<!-- 简写 -->
    		<a :href="hrefurl">百度</a>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		imgurl:"img/picture.png",
    		hrefurl:"https://www.baidu.com"
    	}
    });
    

    修改绑定的数据

    切换图片

    <div id="box">
    	<img :src="imgurl1" >
    	<button type="button" @click="change()">切换图片</button>
    </div>
    
    new Vue({
    	el:'#box',
    	data:{
    		//imgurl1:'img/picture1.png'
    		imgurl1:'img/ali.png'
    	},
    	methods:{
    		change:function(){
    			// this代表创建出的Vue实例
    			// 通过修改imgurl1数据来改变图片
    			this.imgurl1="img/baidu.png"
    		}
    	}
    })
    

    表单绑定

    <body>
    	<div id="box">
    		<!-- v-model:绑定表单数据 -->
    		<input type="text" id="text1" v-model="msg"/>
    		<input type="text" id="text2" v-model="msg"/>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg:'abc'
    	}
    })
    

    数据的双向绑定:
    如果改变text1中的数据,text2中的数据也会被改变
    因为text1中的数据会返回到Vue中data中,更新msg的值,所以text2中的数据也来自data中的msg,所以也会改变

    收集表单中数据

    <body>
    	<div id="box">
    		<!-- @submit.prevent:阻止表单默认提交的行为 -->
    		<form action="123.html" method="get" @submit.prevent="submitData()">
    			<!--required:h5提供的属性,表单必须填入值  maxlength:最大字符的长度  -->
    			用户名:<input type="text" name="username" required="required" placeholder="请输入用户名" maxlength="20" v-model.trim="username" /><br>
    			密码:<input type="password" name="password" required="required" v-model.trim="password" /><br>
    			性别:<input type="radio" name="gender" value="1" v-model="gender" /><input type="radio" name="gender" value="0" v-model="gender" /><br>
    			爱好:<input type="checkbox" name="hobby" value="run" v-model="hobby" /> 跑步
    			<input type="checkbox" name="hobby" value="game" v-model="hobby" /> 玩游戏
    			<input type="checkbox" name="hobby" value="sing" v-model="hobby" /> 唱歌
    			<br>
    			学历:
    			<select name="edu" v-model="edu">
    				<option value="1">小学</option>
    				<option value="2">中学</option>
    				<option value="3">大学</option>
    			</select>
    			<textarea rows="" cols="" v-model="desc">
    
    			</textarea>
    			<input type="submit" value="提交" />
    		</form>
    	</div>
    </body>
    
    new Vue({
    	el: '#box',
    	data: {
    		username: '',
    		password: '',
    		// 填入radio中的value值,该radio就会被默认选中
    		gender: '1',
    		// 多选框的选项以数组形式存储在data中
    		// 如果需要默认选中一些选项,在数组中存储选项对应的value值
    		hobby: [],
    		edu: '1',
    		desc: '个人描述'
    	},
    	methods: {
    		submitData: function() {
    			var jsonObj = {
    				'username': this.username,
    				'password': this.password,
    				'gender': this.gender,
    				'hobby': this.hobby,
    				'edu': this.edu,
    				'desc': this.desc
    			}
    		}
    	}
    })
    

    我们也可以将表单中的数据直接收集到JSON对象中

    <body>
    	<div id="box">
    		<form action="123.html" method="get" @submit.prevent="submitData()">
    		<!-- v-model.trim:去除用户输入的首尾空白字符 -->
    			用户名:<input type="text" name="username" required="required" placeholder="请输入用户名" maxlength="20" v-model.trim="formData.username" /><br>
    			密码:<input type="password" name="password" required="required" v-model.trim="formData.password" /><br>
    			<input type="submit" value="提交" />
    		</form>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		formatData:{
    			username:'',
    			password:''
    		}
    	},
    	methods:{
    		submitData: function() {
    
    		}
    	}
    })
    

    对于收集来的数据我们在提交时将这些数据发送给后台,这些操作我们在submitData函数中完成,如何发送Ajax请求在之后讲解

    计算属性

    在computed中方法包含getter和setter两个方法
    getter方法用于获取计算过后的数据
    setter方法用于监听函数返回值的变化

    <div id="box">
    	姓名:<input type="text" name="name" id="name" placeholder="请输入姓名" v-model="name"/>
    	年龄:<input type="text" name="age" id="age" placeholder="请输入年龄" v-model="age"/>
    	个人信息:<input type="text" name="msg" id="msg" v-model="msgShow"/><br>
    	<!-- 也可以过通过{{}}来获取msgShow函数中getter方法的返回值 -->
    	{{msgShow}}
    </div>
    
    new Vue({
    	el:'#box',
    	data:{
    		name:'',
    		age:''
    	},
    	computed:{
    		msgShow:{
    			// 初始化时,get函数会被调用一次
    			// 当name和age的数据变化时,get函数就会被调用
    			get:function() {
    				return this.name+' '+this.age;
    			},
    			set:function(newValue){
    				// 如果不进行处理,name和age数据的值不会改变
    				console.log(newValue+"set");
    				// 为了保证数据的统一,需要同步改变name和age的数据
    				var msgs=newValue.split(' ');
    				this.name=msgs[0];
    				this.age=msgs[1];
    			}
    		}
    	}
    })
    

    侦听器

    watch:侦听属性值的变化

    <body>
    	<div id="box">
    		姓名:<input type="text" name="name" id="name" placeholder="请输入姓名" v-model="name"/>
    		年龄:<input type="text" name="age" id="age" placeholder="请输入年龄" v-model="age"/>
    		个人信息:<input type="text" name="msg" id="msg" v-model="msg"/><br>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		name:'',
    		age:'',
    		msg:''
    	},
    	watch:{
    		// 当属性值改变时,函数执行,可以获取新值和旧值
    		name:function(newValue,oldValue){
    			this.msg=newValue+" "+this.age;
    		},
    		age:function(newValue){
    			this.msg=this.name+" "+this.age;
    		},
    		msg:function(newValue){
    			var msgs=newValue.split(' ');
    			this.name=msgs[0];
    			this.age=msgs[1];
    		}
    	}
    });
    

    绑定class选择器的样式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.aClass{
    				background: yellow;
    			}
    			.bClass{
    				font-size: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box">
    			<!-- 绑定选择器时使用英文单引号将选择器名称包裹起来,否则会去找Vue实例中data中的数据 -->
    			<!-- 绑定一个类选择器样式 -->
    			<h1 :class="'aClass'">标题1</h1>
    			<!-- 绑定多个类选择器样式,使用数组来存储选择器名称 -->
    			<h1 :class="['aClass','bClass']">标题2</h1>
    			<!-- 通过绑定data中的数据来绑定class选择器的样式,注意不需要用单引号包裹 -->
    			<h1 :class="[backgroundClass,fontSizeClass]">标题3</h1>
    		</div>
    		
    	</body>
    	<script type="text/javascript">
    		new Vue({
    			el:'#box',
    			data:{
    				backgroundClass:'aClass',
    				fontSizeClass:'bClass'
    			}
    		})
    	</script>
    </html>
    

    绑定style属性

    <body>
    	<div id="box">
    		<!-- font-size需要改写成fontSize -->
    		<h1 :style="{'color':'red','fontSize':'80px','fontStyle':'italic'}">标题1</h1>
    		<!-- 绑定Vue中的属性数据 -->
    		<h1 :style="{'color':a,'fontSize':b}" @click="changeStyle(flag=!flag)">标题2</h1>
    		<!-- 绑定一个或多个JSON对象中的属性 -->
    		<h1 :style="myJson2">标题3</h1>
    		<h1 :style="[myJson1,myJson2]">标题4</h1>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		a:'blue',
    		b:'50px',
    		myJson1:{
    			'color':'yellow'
    		},
    		myJson2:{
    			'fontSize':'120px'
    		}
    	},
    	methods:{
    		changeStyle(flag){
    			if(flag){
    				this.a='gray';
    				this.b='200px';
    			}else{
    				this.a='pink';
    				this.b='100px';
    			}
    		}
    	}
    })
    

    按键修饰符

    <body>
    	<div id="box">
    		<!-- 可以通过按键的键码或者别名来监听该按键是否被按下 -->
    		<input type="text" @keypress.enter="show1()"/>
    		<input type="text" @keypress.97="show2()" />
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		flag:true
    	},
    	methods:{
    		show1(){
    			alert("Enter键被按下了");
    		},
    		show2(){
    			alert("\"a\"被输入了");
    		}
    	}
    })
    

    元素的显示与隐藏

    <body>
    	<div id="box">
    		<!-- v-show:底层通过display属性来操作,值为true则元素显示,值为false则元素不显示 -->
    		<div id="div1" v-show="isShow">
    			
    		</div>
    		<!-- 通过show函数改变isShow的值 -->
    		<button type="button" @click="show()">隐藏/显示</button>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		isShow:true
    	},
    	methods:{
    		show(){
    			this.isShow=!this.isShow;
    		}
    	}
    })
    

    条件渲染

    #div1{
    	height: 200px;
    	width: 200px;
    	background: red;
    }
    #div2{
    	height: 200px;
    	width: 200px;
    	background: yellow;
    }
    
    <body>
    	<div id="box">
    		<!-- v-if:底层通过反复删除添加元素 -->
    		<!-- 如果isShow为true显示div1,为false显示div2 -->
    		<div id="div1" v-if="isShow">
    			
    		</div>
    		<div id="div2" v-else="">
    			
    		</div>
    		<button type="button" @click="show()">隐藏/显示</button>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		isShow:true
    	},
    	methods:{
    		show(){
    			this.isShow=!this.isShow;
    		}
    	}
    })
    

    多重条件

    <body>
    	<div id="box">
    		<!-- v-show:不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换
    			 v-if:它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
    			 v-if有更高的切换开销,而v-show有更高的初始渲染开销。
    			 因此,如果需要非常频繁地切换,则使用v-show 较好;如果在运行时条件很少改变,则使用v-if较好。-->
    		<input type="text" placeholder="请输入成绩" v-model="score"/>
    		<h1 v-if="score>=0&&score<60">不及格</h1>
    		<h1 v-else-if="score>=60&&score<75">及格</h1>
    		<h1 v-else-if="score>=75&&score<90">良好</h1>
    		<h1 v-else-if="score>=90&&score<100">优秀</h1>
    		<h1 v-else>成绩不合法</h1>
    		
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		score:0
    	},
    })
    

    列表渲染

    <body>
    	<div id="box">
    		<ul>
    		<!-- 用v-for指令基于一个数组来渲染一个列表 -->
    		<!-- 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性 -->
    		<!-- 参数:item:被迭代的数组的元素
    				  key:如果被迭代的为键值对集合,则第二个参数为当前元素的键名
    				  index:当前元素的索引-->
    			<!-- 参数和key和属性key没有关系 -->
    			<li v-for="(ele,index) in arr" :key="index">
    				{{index}}:{{ele}}
    			</li>
    		</ul>
    		<ol>
    			<li v-for="(value,key,index) in myJson" :key="key">
    				{{key}}...{{value}}...{{index}}
    			</li>
    		</ol>
    		<ul>
    			<li v-for="(jsonObj,index) in jsonArr" :key="index">
    				{{jsonObj.username}}...{{jsonObj.password}}
    			</li>
    		</ul>
    	</div>
    </body>
    
    new Vue({
    	el: '#box',
    	data: {
    		arr: [10, 20, 30, 40, 50, 60],
    		myJson: {
    			'username': 'abc',
    			'password': '123'
    		},
    		jsonArr: [{
    				'username': 'aaa',
    				'password': '111'
    			},
    			{
    				'username': 'bbb',
    				'password': '222'
    			},
    			{
    				'username': 'ccc',
    				'password': '333'
    			}
    		]
    	}
    })
    

    数组更新检测
    变异方法:Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

    <body>
    	<div id="box">
    		<ul>
    			<li v-for="(jsonObj,index) in jsonArr" :key="index">
    				{{jsonObj.username}}...{{jsonObj.password}}
    				<button type="button" @click="updateData(index)">修改数据</button>
    			</li>
    		</ul>
    	</div>
    </body>
    
    new Vue({
    	el: '#box',
    	data: {
    		jsonArr: [{
    				'username': 'aaa',
    				'password': '111'
    			},
    			{
    				'username': 'bbb',
    				'password': '222'
    			},
    			{
    				'username': 'ccc',
    				'password': '333'
    			}
    		]
    	},
    	methods: {
    		updateData: function(index) {
    			var jsonObj = {
    				'username': 'ddd',
    				'password': '123'
    			}
    			this.jsonArr[index]=jsonObj;
    			// 如果不调用变异方法,视图数据将不会更新
    			this.jsonArr.reverse();
    			this.jsonArr.reverse();
    		}
    	}
    })
    

    过滤器

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
    格式化文字
    将小写字母改为大写字母

    <body>
    	<div id="box">
    	<!-- 格式: 
    		在双花括号中:{{ message | capitalize }}
    		在v-bind中:<div v-bind:id="rawId | formatId"></div> 
    		使用过滤器时传递参数:{{ message | capitalize(参数) }}
    		使用多个过滤器:{{ message | capitalize1 | capitalize2 }}-->
    		<h1>{{msg|toUpper}}</h1>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg:'abcde'
    	},
    	filters:{
    	// value(原数据)可作为参数传入函数
    		toUpper:function(value){	
    			return value.toUpperCase();
    		}
    	}
    });
    

    形参默认值

    // 如果调用函数时没有传入参数,参数默认值为'abc'
    function(value='abc'){
    	
    }
    

    v-clock

    这个指令保持在元素上直到关联实例结束编译

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			[v-clock]{
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box">
    			<!-- 当元素未被渲染时,页面上展示的是{{msg}},不利于用户体验 -->
    			<!-- 当元素未被渲染时,h1的display为none,页面上就不会展示{{msg}}
    			而当元素被渲染后,v-clock属性会消失,使用该属性的选择器设置的样式就会失效 -->
    			<h1 v-clock>{{msg}}</h1>
    		</div>
    	</body>
    	<script type="text/javascript">
    		new Vue({
    			el:'#box',
    			data:{
    				msg:'abcde'
    			},
    			// 延迟数据的加载,用于模拟现象
    			beforeCreate:function(){
    				alert("abc");
    			}
    		})
    	</script>
    </html>
    

    生命周期函数

    注意:在生命周期函数中,不要使用ES6的箭头函数

    Vue实例的生命周期:
    在这里插入图片描述

    使用$mount(el)函数挂载元素

    var vm=new Vue({
    	data:{
    		
    	},
    })
    vm.$mount('#box');
    

    案例1:
    页面元素每秒在显示和隐藏间切换一次,并提供一个按钮停止切换

    <body>
    	<div id="box">
    		<h1 v-show="flag">闪烁</h1>
    		<button type="button" @click="stop()">stop</button>
    	</div>
    </body>
    
    var vm=new Vue({
    	el:'#box',
    	data:{
    		flag:true,
    		timeID:0
    	},
    	methods:{
    		stop:function(){
    			// 销毁Vue对象
    			this.$destroy();
    		}
    	},
    	// 等待页面元素挂载完毕,调用mounted函数
    	mounted:function(){
    		// 不能在setInterval方法的参数函数中取flag的值,因为此时的this不代表Vue对象
    		var th=this;	//获取Vue对象
    		this.timeID=window.setInterval(function(){
    			console.log("定时器正在运行");	//通过在控制台打印数据证明定时器在运行
    			th.flag=!th.flag;
    		},1000);
    	},
    	// Vue对象销毁之前,调用beforeDestroy函数
    	// 在销毁Vue对象时,需要销毁定时器,否则定时器还在继续运行
    	beforeDestroy:function(){
    		clearInterval(this.timeID);
    	}
    });
    

    所有生命周期函数

    <body>
    	<div id="box">
    		{{msg}}
    		<button type="button" @click="destroyVue()">销毁</button>
    		<button type="button" @click="updateMsg()">更新</button>
    	</div>
    </body>
    
    new Vue({
    	el:'#box',
    	data:{
    		msg:'数据...'
    	},
    	methods:{
    		updateMsg:function(){
    			this.msg="更新后的数据...";
    		},
    		destroyVue:function(){
    			this.$destroy();
    		}
    	},
    	beforeCreate:function(){
    		// beforeCreate...
    		// 数据:undefined
    		// 渲染元素:undefined
    		console.log("beforeCreate...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	created:function(){
    		// created...
    		// 数据:数据...
    		// 渲染元素:undefined
    		console.log("created...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	beforeMount:function(){
    		// beforeMount...
    		// 数据:数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("beforeMount...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	mounted:function(){
    		// mounted...
    		// 数据:数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("mounted...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	beforeUpdate:function(){
    		// beforeUpdate...
    		// 数据:更新后的数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("beforeUpdate...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	updated:function(){
    		// updated...
    		// 数据:更新后的数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("updated...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	beforeDestroy:function(){
    		// beforeDestroy...
    		// 数据:更新后的数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("beforeDestroy...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	},
    	destroyed:function(){
    		// destroyed...
    		// 数据:更新后的数据...
    		// 渲染元素:[object HTMLDivElement]
    		console.log("destroyed...");
    		console.log("数据:"+this.msg);
    		console.log("渲染元素:"+this.$el);
    	}
    });
    
    展开全文
  • Vue Floating Action Button :red_heart::red_heart::red_heart::red_heart: a beautiful Floating Action Button :red_heart::red_heart::red_heart::red_heart: 支持iconfont以及material icons Features 支持多种...
  • vue el-upload 上传文件 action 跨域

    千次阅读 2019-12-19 18:22:00
    问题:直接在action中写后端地址会出现跨域问题 解决:用http-request指定具体上传方法 el-upload代码如下,action中随便写,反正用不到 <el-upload class="avatar-uploader" action="string" :show-file-...

    问题:直接在action中写后端地址会出现跨域问题

    解决:用http-request指定具体上传方法

    el-upload代码如下,action中随便写,反正用不到

    <el-upload
                class="avatar-uploader"
                action="string"
                :show-file-list="false"
                :http-request="uploadImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.picUrl" :src="form.picUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
    // 上传图片方法
        uploadImage(param){
          const formData = new FormData()
          formData.append('file', param.file)
          uploadAvatar(formData).then(response => {
            console.log('上传图片成功')
            this.form.picUrl = process.env.VUE_APP_BASE_API + response.imgUrl
          }).catch(response => {
            console.log('图片上传失败')
          })
        },

    上述代码中uploadAvatar方法如下

    // 文件上传
    request({
        url: '/system/file/upload',
        method: 'post',
        data: data
      })

    照片上传前校验代码如下

    // 资质照片上传前校验
        beforeAvatarUpload(file) {
          const isPic = file.type.indexOf('image') >= 0;
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isPic) {
            this.$message.error('资质照片只能为图片格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
          }
          return isPic && isLt2M;
        },

    附加:上传方法为传递自定义参数 

    :http-request="(param) => uploadImage(param,4)"

    其中4为自定义参数

    展开全文
  • vue form action post 方式提交

    千次阅读 2020-05-23 13:19:58
    form action="testform" method="post" @submit="submit($event)"> </form> submit: function(event) { event.preventDefault();//validate fail return true;//validate success return true or ...
    <form action="testform" method="post" @submit="submit($event)">
    </form>

     

     

    submit: function(event) {
        event.preventDefault();//validate fail
        return true;//validate success return true or false
    }

     

    展开全文
  • vue-action:行动-源码

    2021-03-17 11:14:50
    行动 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • VUE UPLOAD 通过ACTION返回上传结果

    千次阅读 2020-04-07 18:11:36
    通过Upload 的action方法返回不了结果,可以通过on-success方法中获取返回结果 <Uploadaccept=".xls,.xlsx":action="uploadUrl":on-success="onSuccess":on-error="handleError":before-upload="beforeUpload...
  • Vue教程23:Vuex异步Action

    千次阅读 2019-01-01 22:58:05
    https://github.com/chencl1986/vue-tutorial 该节教程代码可通过npm start运行devServer,在http://localhost:8080/#/index查看效果 运行服务端请cd server,node server.js。 创建一个测试数据文件user.txt ...
  • 如何在 vuex action 中获取到 vue 实例

    千次阅读 2018-11-06 22:58:00
    问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message ...以下action.js 中的this不指向Vue,因此以下代码会报错。Vuex 框架原理与源码分析 //action.js export const ...
  • 使用vue+webpack构建项目(二) 引入vuex vue-resource vue-router 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation // 区别 mutation 必须同步执行 Action 提交的是 mutation,而不是直接变更状态。 Action ...
  • 下载mint ui 的源码,拷贝action-sheet.vue  从Demo 找到这个Action Sheet 运行效果 下载解压这个mint-ui-master 找到action-sheet.vue文件    2&gt;使用这个Action-Sheet组件    编写代码...
  • vue 动态修改el-upload 的action

    千次阅读 2019-10-09 16:36:48
    action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: <!-- HTML部分代码 --> <el-upload :action="UploadUrl()" :on-...
  • 由于upload组件在上传的时候会先执行上传操作,然后在执行修改action 通常在before-upload设置action时会失败 例如这次坑是父组件传值给上传组件,带有参数和访问地址,需要动态的实现上传 方案一 方案二 ...
  • vue-x action 的相互调用

    千次阅读 2018-09-08 22:16:00
    实现方式:分发 Action Action 通过store.dispatch方法触发: store.dispatch('increment') 转载于:https://www.cnblogs.com/tongbiao/p/9610837.html
  • 行动中的Vue.js 在行动书中使用vue.js完成的宠物店。 测试网络服务器以加载json文件 npm $ npm install http-server -g $ http-server -p 8000 Python $ python -m SimpleHTTPServer 8000
  • 2020年Vue面试题汇总

    万次阅读 多人点赞 2020-02-03 16:46:20
    2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识——理论篇 1、对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少。 Vue可能有些方面是不如React,不如Angular,...
  • 由于使用commit是同步的,所以也就有了使用“异步”的action的诞生 1.store.js//配置仓库第十五行到第二十三行配置action, import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new ...
  • 你是否临下班前接到开发一个FAB组件的需求? 是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的FAB组件...项目地址: https://github.com/a62527776a/vue-floating-action-b...
  • Vue中找不到action类型

    2017-07-25 18:20:00
    resolved: ...it should be actions but i writed action i am aways careless 中文终于好了 名字写错了应该是actions 我写成了 action 转载于:https://www.cnblogs.com/grows/p/7235749.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,282
精华内容 14,912
关键字:

actionvue

vue 订阅