精华内容
下载资源
问答
  • Laravel8Vue:Laravel 8逐步和Vue 3示例
  • Vue D3 V5示例 Vue D3 V5 Examples npm: v6.7.0 节点: v11.10.0 版本: v2.6.6 d3: v5.12.0 在线预览 项目设置 npm install npm运行皮棉和npm运行发球 npm run dev 编译和热重装以进行开发 npm run serve ...
  • VueUse Vue3示例 + 的 :globe_with_meridians: :package: :package: 安装 克隆此存储库 yarn yarn dev 在浏览器中打开 执照
  • Vue画布示例-源码

    2021-02-13 18:15:23
    Vue画布示例
  • vue配置示例

    2019-02-21 22:27:20
    这个是vue基础培训的例子,上传方面自己随时下载下来进行学习
  • Vue3 TodoList示例 技术栈 vue3.0 恶作剧 尾风
  • vue tidolist示例

    2018-04-28 12:57:34
    其中,el是vue实例化的选项,提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。 template,作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载...
  • spring vue简单示例

    2018-10-24 12:32:26
    spring boot +vue简单教程,包含一些用户管理、菜单等基础功能。
  • vue简单示例.zip

    2020-03-25 21:29:55
    vuejs的一些简单的入门demo案列,便于vue的入门学习 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API ...
  • 为了学习vue,照着官方网站的示例敲了一遍,当然有些自己的想法写在了里面,但是基本都是官方基础的内容,仅供初级入门学习。
  • Weui设计Vue示例 目录 vue2 vue2目录示范了如何使用Vue 2和Weui Design Vue 2建造Weui示例页面,包含如下功能: 基于Weui Design Vue建造 基于vue-router的单页面应用 技术栈:Vue2,Weui Design Vue 2,Vue Cli,...
  • vue入门示例(一)

    万次阅读 多人点赞 2019-08-21 15:33:58
    为了让广大后端人员更快的理解上手vue,我们先不适用ide和vue-cli等工具,先采用手动引入js的方式,从一个最简单的例子开始,循序渐进 1. 到官网下下vue.js vue官网 我们这里使用开发版,它包含了许多警告提示信息 ...
    • 为了让广大后端人员更快的理解上手vue,我们先不适用ide和vue-cli等工具,先采用手动引入js的方式,从一个最简单的例子开始,循序渐进

    1. 到官网下下vue.js
    vue官网
    我们这里使用开发版,它包含了许多警告提示信息
    在这里插入图片描述

    新建一个文件夹把vue.js放进去,然后创建一个html文件命名为index.html

    2. 第一个hello world

    编辑index的内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="hello">
        <title>hello</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="app">{{msg}}</div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello world"
            }
        })
    </script>
    </body>
    </html>
    

    稍后我们在解释里面的各个意思,先使用浏览器打开index.html可以看到页面显示 hello world。

    3. 挂载点、实例与模板
    在这里插入图片描述
    这里挂载点是指vue和div的绑定关系
    模板就是绑定的标签里面的内容
    实例就是vue实例,将模板的内容交给vue来管理

    4. 验证模板就是div里的内容
    vue提供了template标签,修改代码
    在这里插入图片描述
    注意template由于vue的校验限制不能直接写{{msg}},必须写到标签里,所以我们加一个h1标签。
    刷新页面,同样显示hello world。

    5. v-text与v-html
    v-text与v-html可以指定标签内的内容,继续修改代码
    在这里插入图片描述
    刷新页面依然可以显示 hello world
    再次改成v-html效果也一样,那这两者有什么区别呢?
    将data中的数据修改一下

    data: {
                msg: "<h1>hello world</h1>"
            }
    

    刷新页面显示:<h1>hello world</h1>
    将标签改为v-html,刷新页面可以正常显示大号的:hello world
    所以两者的区别就是v-html会解析html标签。

    6. 点击事件
    vue的点击事件:@click (也可以使用v-on:click),我们当然是使用简写啦
    数据绑定:前面我们已经会使用插值表达式{{msg}}使div中的内容和vue实例中的data里面的msg绑定到一起,所以改变data里面的msg的值,div里面的内容也会跟着改变,这就是数据绑定
    在这里插入图片描述
    每个vue实例都有一个methods属性用来定义函数,使用@click绑定一个名字为handlerClick的方法,方法内没出发一次点击事件,把之前msg的内容后面拼接一个click字符串。
    刷新页面看效果,每点击一次后面就会多一个click
    在这里插入图片描述

    7. 属性绑定和数据双向绑定
    定义一个input标签,让input标签和vue实例中data的value属性绑定
    在这里插入图片描述
    刷新页面
    在这里插入图片描述
    其中v-bind:value="value"也可以使用简写 :value=“value” ,我们平时就使用简写。
    在input框下添加代码<div>{{value}}</div>
    刷新页面改变输入框的值可以看到下面的内容并没有随着一起变
    在这里插入图片描述
    所以使用:value的方式绑定属性只是一种单向绑定,只有vue实例里的值改变能引起页面的变化,而页面的变化不能同步到vue实例。要想实现这个功能可以使用双向绑定,将input标签代码改为<input v-model="value"/>
    再次刷新页面
    在这里插入图片描述

    8. 计算器属性和监听器也叫侦听器
    打印姓名示例,先创建两个双向绑定的input标签,然后定义一个fullName,我们希望使用fullName输出姓+名,当然你也可以使用{{firstName}}{{lastName}}的写法,但是我们还是推荐使用计算器属性,稍后我们再说原因

    <div id="app">
        <div>{{msg}}</div>
        姓:<input v-model="firstName"/>
        名:<input v-model="lastName"/>
        <div>{{fullName}}</div>
    </div>
    

    在这里插入图片描述
    computed就是vue对象的计算器属性,里面是一个带返回值的函数,{{xx}}会先取data里面的属性,如果没有就查找计算器属性里面的方法名。
    运行效果
    在这里插入图片描述
    computed计算器属性相当于加了一层缓存,只有当里面用到的变量值变化时才会重新计算,否则从缓存获取,所以应该尽量使用computed,不应使用{{}}{{}}的方式。
    侦听器:负责监听绑定数据的变化,触发一个函数
    例:添加一个计数器,记录姓和名的变化次数
    在这里插入图片描述

    9. v-if、v-show、v-for

    v-if 控制标签及其内容的显示和不显示
    v-show 控制标签及其内容的显示和隐藏
    区别:if是通过添加dom和删除dom实现显隐,show是通过给标签添加隐藏属性显隐。if会删除标签show不会
    如:

    <div id="app">
        <div v-if="flag">{{msg}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello world",
                flag: false
            }
        })
    </script>
    

    hello world将不显示,此功能可以结合@click事件控制目标的显示和隐藏,大家可以自己写一下
    v-for:
    用来循环遍历
    在这里插入图片描述
    item相当于数据项内容,index是遍历的下标。
    在这里插入图片描述

    10. todo List 功能实现
    我们来完成一个功能,输入框录入文字,点击提交,录入的文字以列表形式追加在输入框下
    在这里插入图片描述
    代码如下
    在这里插入图片描述

    11. 组件,全局组件与局部组件,父组件向子组件传值
    上面的例子我们可以单独吧li标签抽取出来作为组件。
    在这里插入图片描述
    局部组件定义在vue对象里面,全局组件使用Vue.component定义,组件其实也是一个vue实例,new Vue里面有的属性组件里也可以写,比如methods。
    向组件内传值需要定义

    props: ['xxx'],
    

    组件内才可以直接用{{xxx}}

    12.todo List 实现删除功能
    在这里插入图片描述
    emit传多个参数:
    在这里插入图片描述

    展开全文
  • SEI-范例 SEI的小Vue代码示例。 使用jsonplaceholder.com进行模拟API调用。 npm安装 npm运行发球
  • Pinia的Vue 3示例 用法 yarn yarn dev 然后使用检查。 有关的
  • 支持NativeScript-Vue-示例 该项目是个人维护项目,由于能量有限,需要支持。 欢迎星,您的星是我最大的支持! NSVue示例 使用NativeScript-Vue构建的本机应用程序 用法 # Install dependencies npm install # ...
  • 这是在Vue.js中使用Websockets的基本示例2您可以在此处找到后端项目Build Setup#安装依赖项yarn install#serve wit这是在Vue.js中使用Websockets的基本示例2您可以在此处找到后端项目Build Setup#install依赖项...
  • electronic-boilerplate-vue用于Electron运行时和Vue.js的综合样板应用程序。 该项目基于vue-templates / webpack和针对Electron运行时和Vue.js的electronic-boilerplate-vue综合样板应用程序。 该项目基于vue-...
  • vue各种示例展示

    千次阅读 2016-09-08 22:36:03
    1 2 3 Vue.component('aaa', { template: '#b' }); new Vue({ el: '#a' });

    注意:以下所有示例基于vue 2.x、Vuex 2.x、

    vm.$mount()-挂载

    <body>
        <div id="a">
        </div>
    </body>  
    <script>  
        var A = Vue.extend({  
            template: '<p>123</p>'  
        });
    
        /*// 自动挂载
        new A({
            el: '#a'
        });*/
    
        var a = new A();
        a.$mount('#a')// 手动挂载
    </script>  

    组件示例(component):

    a. 不使用template标签

    <body>
        <div id="a">
            <aaa m="a++" bgcolor="red"></aaa>
            <aaa m="b--" bgcolor="blue"></aaa>
        </div>
    </body>  
    <script>  
        Vue.component('aaa', {
            template: '<div><p>{{ m }}</p><p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p></div>',
            data: function() {
                return {
                    a: 0,
                    b: 0,
                    style: {
                        fontSize: '30px',
                        background: this.bgcolor
                    }
                }
            },
            props: ['m', 'bgcolor'],
            methods: {
                add: function() {
                    this.a++;
                    this.b--;
                }
            }
        });
    
        new Vue({
            el: '#a'
        })
    </script>  


    b. 使用template标签

    <body>
        <div id="a">
            <aaa m="a++" bgcolor="red"></aaa>
            <aaa m="b--" bgcolor="blue"></aaa>
        </div>
        <template id="b">
            <div>
                <p>{{ m }}</p>
                <p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p>
            </div>
        </template>
    </body>  
    <script>  
        Vue.component('aaa', {
            template: '#b',
            data: function() {
                return {
                    a: 0,
                    b: 0,
                    style: {
                        fontSize: '30px',
                        background: this.bgcolor
                    }
                }
            },
            props: ['m', 'bgcolor'],
            methods: {
                add: function() {
                    this.a++;
                    this.b--;
                }
            }
        });
    
        new Vue({
            el: '#a'
        })
    </script>  


    c. 局部注册

    <body>
    	<div id="a">
    		<my-b></my-b>
    		<my-c></my-c>
    		<my-d></my-d>
    	</div>
    
    	<template id="b">
    		<p>bbb</p>
    	</template>
    
    
    </body>
    <script>
    	var myD = Vue.component('myD', {
    		template: '<p>ddd</p>'
    	});
    
    	new Vue({
    		el: '#a',
    		components: {
    			'myB': {
    				template: '#b'
    			},
    			'myC': {
    				template: '<p>ccc</p>'
    			},
    			'myD': myD
    		}
    	});
    </script>

    d. 动态组件

    <body>  
        <div id="a">  
            <button @click="change">{{ cur }}</button>  
            <component :is="cur"></component>  
        </div>  
        <template id="b">  
            <p>bbb</p>  
        </template>  
    </body>  
    <script>  
        new Vue({  
            el: '#a',  
            data: {  
                cur: {// 直接绑定到组件对象上
                    template: '<p>aaa</p>'  
                }  
            },  
            methods: {  
                change: function() {  
                    this.cur = this.cur=='myB'?'myC':'myB';  
                }  
            },  
            components: {// 多个组件使用同一挂载点,动态切换
                'myB': {  
                    template: '#b'  
                },  
                'myC': {  
                    template: '<p>ccc</p>'  
                }  
            }  
        });  
    </script> 


    e. 父子组件通信

    <body>  
        <div id="a">
            父:<input v-model="msg" />
            <aaa :msg="msg" @notick="notickEvent"></aaa>
        </div>
    
        <template id="b">
            <div>
                子:<input v-model="msgChild" />
            </div>
        </template>
    </body>  
    <script> 
        // 子组件
        Vue.component('aaa', {
            template: '#b',
            props: ['msg'],// 使子组件接受到父组件的msg属性
            data: function() {
                return {
                    msgChild: ''// 子组件msg的替代品(vue2中禁止子组件直接改变父组件状态,只能通过替代)
                }
            },
            watch: {
                msg: function(newVal, oldVal) {
                    this.msgChild = newVal;
                },
                msgChild: function(newVal, oldVal) {
                    this.$emit('notick', newVal);// 子组件msgChild改变时,触发notick事件
                }
            }
        })
    
        // 父组件
        new Vue({
            el: '#a',
            data: {
                msg: ''
            },
            methods: {
                notickEvent: function(val) {
                    this.msg = val;
                }
            }
        })
    </script>
    f. 兄弟组件通信
    <body>  
        <div id="a"> 
            <aaa></aaa>
            <bbb></bbb>
        </div>
    
        <template id="b">
            <button @click="add">点击:{{ num }}</button>
        </template>
    </body>  
    <script> 
        var bus = new Vue();// 简单场景下可以使用bus
    
        // 子组件aaa
        Vue.component('aaa', {
            template: '#b',
            data: function() {
                return {
                    num: 0
                }
            },
            methods: {
                add: function() {
                    bus.$emit('addEvent', ++this.num);
                }
            },
            mounted: function() {
                var This = this;
                bus.$on('addEvent', function(val) {
                    This.num = val;
                })
            }
        })
    
        // 子组件bbb
        Vue.component('bbb', {
            template: '#b',
            data: function() {
                return {
                    num: 0
                }
            },
            methods: {
                add: function() {
                    bus.$emit('addEvent', ++this.num);
                }
            },
            mounted: function() {
                var This = this;
                bus.$on('addEvent', function(val) {
                    This.num = val;
                })
            }
        })
    
        new Vue({
            el: '#a'
        })
    </script>


    g. 异步组件
    <body>
    	<div id="a">
    		<component :is='btn'></component>
    		<button @click="change">{{ btn }}</button>
    	</div>
    </body>
    <script>
    	new Vue({
    		el: '#a',
    		data: {
    			btn: 'aA'
    		},
    		methods: {
    			change: function() {
    				this.btn = this.btn=='aA'?'bB':'aA';
    			}
    		},
    		components: {
    			aA: function(resolve) {
    				setTimeout(function() {
    					resolve({
    						template: '<p>{{ btn }}</p>',
    						data: function() {
    							return {
    								btn: this.$root.btn
    							}
    						}
    					});
    				}, 1000);
    			},
    			bB: {
    				template: '<p>bb...</p>'
    			}
    		}
    		
    	});
    </script>






    计算示例(computed):

    <body>
        <div id="a">
            <p>{{ intro }}</p>
            <input type="text" v-model="name">
            <input type="text" v-model="age">
        </div>
    <script>
        new Vue({
            el: '#a',
            data: {
                name: 'hvb',
                age: 20
            },
            computed: {
                intro: function() {
                    return this.name +':'+ this.age;
                }
            }
        });
    </script>
    </body>

    自定义指令实现"点击按钮使文本框获取焦点"示例(directive)

    <body>    
        <div id="a">  
            <input v-focus="isFocus" />
            <button @click="change">点击切换输入框选中状态</button>  
        </div>  
    </body>    
    <script>   
        // 注册一个全局自定义指令 v-focus
        Vue.directive('focus', {
            // 被绑定元素插入父节点时调用
            inserted: function (el, binding) {
                if(binding.value) {
                    el.focus();
                }else {
                    el.blur();
                }
            },
            // 被绑定元素所在模板完成一次更新周期时调用
            componentUpdated: function (el, binding) {
                if(binding.value) {
                    el.focus();
                }else {
                    el.blur();
                }
            }
        })
    
        new Vue({  
            el: '#a',  
            data: {
                isFocus: true
            },
            methods: {
                change: function(e) {
                    this.isFocus = !this.isFocus;
                }
            }
        })  
    </script>


    简单的todolist

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <script src="vue.js"></script>
        <style>  
            * {  
                margin: 0;   
                padding: 0;  
            }  
            body, html {  
                width: 100%;  
                height: 100%;
            } 
            .line {
                text-decoration: line-through;
            }
        </style>  
    </head>  
    <body>  
        <div id="a">    
            <aaa :list="tasks"></aaa><!-- 注意:list的冒号 -->    
            <hr>    
            <aaa :list="[{a: 'a', b: 'b', line: true}, {a: 'aa', b: 'bb', line: false}]"></aaa><!-- 组件复用 -->    
        </div>    
    
        <template id="b">   
            <div>
                <input v-model="dd" @keyup.enter="cc" type="text" placeholder="enter添加">  
                <p v-show="remain">剩余{{ remain }}条未完成</p>    
                <div v-for="(key, index) in list">    
                    <span @click="aa(key)" :class="{line: key.line}">{{ key.a }}---{{ key.b }}</span>    
                    <strong @click="bb(index)">×</strong>    
                </div>    
            </div> 
        </template>
    </body>  
    <script>    
        Vue.component('aaa', {    
            template: '#b',    
            data: function() {  
                return {  
                    dd: ''  
                }  
            },  
            watch: {  
                list: {  
                    handler: function(keys) {  
                        console.log(keys);  
                    },  
                    deep: true//keys中的每个值变化都会触发handler  
                }  
            },  
            props: ['list'],    
            methods: {    
                aa: function(key) {    
                    key.line = !key.line;    
                    console.log(2);    
                },    
                bb: function(index) {    
                    this.list.splice(index, 1);    
                },  
                cc: function() {  
                    this.list.push({  
                        a: this.dd,   
                        b: '无',   
                        line: false  
                    });  
                    this.dd = '';   
                }  
            },    
            computed: {    
                remain: function() {    
                    return this.list.filter(function(a) {    
                        return !a.line;    
                    }).length;    
                }    
            }    
        });    
        
        new Vue({    
            el: '#a',    
            data: {    
                tasks: [    
                    {a: 1, b: 2, line: true},    
                    {a: 11, b: 22, line: false},    
                    {a: 111, b: 222, line: false}    
                ]    
            },    
            methods: {    
                aa: function(key) {    
                    key.line = !key.line;    
                    console.log(1);    
                }    
            }    
        });    
    </script>
    </html>




    使用jquery调用接口数据:

    <body>  
        <div id="a">  
            <p>{{ list }}</p>  
        </div>  
    </body>  
    <script>  
        new Vue({  
            el: '#a',  
            data: {  
                list: ''  
            },  
            created: function() {  
                var This = this;  
                $.ajax({  
                    url: 'http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json',  
                    dataType: 'jsonp',  
                    success: function(data) {  
                        This.list = data.webConfig.helloWord;  
                    }  
                });  
            },  
        });  
    </script>


    使用vue-resource调用接口数据:(Vue2推荐使用axios代替vue-resource)

    <body>  
        <div id="a">  
            <p v-show="a">加载中...</p>  
            <p>{{ list }}</p>  
        </div>  
    </body>
    <script>  
        Vue.http.interceptors.push(function(request, next) {  
            this.a = !this.a;  
            next(function(response) {  
                this.a = !this.a;  
                return response;  
            });  
        });  
        new Vue({  
            el: '#a',  
            data: {  
                a: false,  
                list: ''  
            },  
            created: function() {  
                this.$http.jsonp('http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json').then(function(data) {  
                    this.list = data.body.webConfig.helloWord;  
                });  
            },  
        });  
    </script>

    slot示例
    <body>
    	<div id="a">
    		<my-b>
    			<p>匿名slot1</p>
    			<p>匿名slot2</p>
    			<p slot="a">具名slot1</p>
    			<my-c></my-c>
    		</my-b>
    	</div>
    
    	<template id="b">
    		<slot></slot>
    		<slot></slot>
    		<slot name="a"></slot>
    		<p>bbb</p>
    	</template>
    	<template id="c">
    		<p>ccc</p>
    	</template>
    
    
    </body>
    <script>
    	Vue.component('myB', {
    		template: '#b'
    	});
    	Vue.component('myC', {
    		template: '#c'
    	});
    
    	p = new Vue({
    		el: '#a'
    	});
    </script>
    activate示例:
    <body>
    	<div id="a">
    		<component :is='btn'></component>
    		<button @click="change">{{ btn }}</button>
    	</div>
    </body>
    <script>
    	new Vue({
    		el: '#a',
    		data: {
    			btn: 'aA'
    		},
    		methods: {
    			change: function() {
    				this.btn = this.btn=='aA'?'bB':'aA';
    			}
    		},
    		components: {
    			aA: {
    				template: '<p>aa</p>',
    				activate: function(done) {// 加载前的回调
    					setTimeout(function() {
    						console.log(2);
    						done();
    					}, 1000);
    					console.log(1);
    				},
    			},
    			bB: {
    				template: '<p>bb</p>',
    				ready: function() {// 作用等同于ready
    					console.log(3)
    				}
    			},
    		}
    		
    	});
    </script>

    vuex示例:

    a. 简单计数

    <body>  
        <div id="a">
            <p>{{ num }}</p>
            <button @click="add">add</button>
            <button @click="reduce">reduce</button>
        </div>
    </body>  
    <script> 
        var store = new Vuex.Store({
            state: {
                num: 0
            },
            mutations: {
                add: function(state) {
                    state.num++;
                },
                reduce: function(state) {
                    state.num--
                }
            }
        })
    
        new Vue({
            el: '#a',
            computed: {
                num: function() {
                    return store.state.num;
                }
            },
            methods: {
                add: function() {
                    store.commit('add');
                },
                reduce: function() {
                    store.commit('reduce');
                },
            }
        })
    </script>

    b. 子组件获取Vuex状态

    <body>  
        <div id="a">
            父:<span>{{ num }}</span>
            <aaa></aaa>
        </div>
    </body>  
    <script> 
        var store = new Vuex.Store({
            state: {
                num: 0
            }
        })
    
        new Vue({
            el: '#a',
            store: store,// 把store实例注入所有的子组件
            computed: {
                num: function() {
                    return this.$store.state.num;// 使用this.$store即可引用
                }
            },
            components: {// 子组件
                'aaa': {
                    template: '<div>子:<span>{{ num }}</span></div>',
                    computed: {
                        num: function() {
                            return this.$store.state.num;// 使用this.$store即可引用
                        }
                    }
                }
            }
        })
    </script>

    c. 拓展状态Getters

    <body>    
        <div id="a">  
            <p @click="change">转换后:{{ num }},长度:{{ len }},点击换一换</p>  
        </div>  
    </body>    
    <script>   
        var store = new Vuex.Store({    
            state: {// 原状态  
                num: 'abc'    
            },  
            getters: {// 通过原状态拓展出来的状态 (state变化时,getters也会变化,state永远是主动方)
                numUpper: function(state) {// 转大写  
                    return state.num.toUpperCase();  
                },  
                numUpperLen: function(state, getters) {// 转大写后的字符长度(直接传getters参数可引用拓展状态中的其他状态)  
                    return getters.numUpper.length;  
                }  
            },
            mutations: {
                change: function(state) {
                    state.num = 'defhi';
                }
            }
        })  
      
        new Vue({  
            el: '#a',  
            computed: {  
                num: function() {  
                    return store.getters.numUpper;  
                },  
                len: function() {  
                    return store.getters.numUpperLen;  
                }  
            },
            methods: {
                change: function() {
                    store.commit('change');
                }
            }
        })  
    </script>  



    d.mutations和actions区别
    <body>  
        <div id="a">
            <p @click="add1">Time Travel状态正常{{ num }}</p>
            <p @click="add2">Time Travel状态不正常{{ num }}</p>
        </div>
    </body>  
    <script> 
        var store = new Vuex.Store({  
            state: {
                num: 0  
            },
            mutations: {
                add1: function(state) {
                    return state.num++;
                },
                add2: function(state) {
                    setTimeout(function() {// mutations中进行异步调用,导致vue devtools记录不到此状态,Time Travel时状态不对
                        return state.num++;
                    }, 1000);
                }
            },
            actions: {
                add1: function(context) {
                    setTimeout(function() {// actions中进行异步调用,vue devtools正确记录此状态,Time Travel时状态也正常
                        context.commit('add1');
                    }, 1000);
                }
            }
        })
    
        new Vue({
            el: '#a',
            computed: {
                num: function() {
                    return store.state.num;
                }
            },
            methods: {
                add1: function() {
                    return store.dispatch('add1');
                },
                add2: function() {
                    return store.commit('add2');
                },
            }
        })
    </script>
    e. actions中使用Promise
    <body>  
        <div id="a">
            <p @click="add">{{ num }}</p>
        </div>
    </body>  
    <script> 
        var store = new Vuex.Store({  
            state: {
                num: 0  
            },
            mutations: {
                add: function(state) {
                    return state.num++;
                }
            },
            actions: {
                add: function(context) {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            context.commit('add');
                            console.log(1)
                            resolve();
                        }, 1000);
                    })
                }
            }
        })
    
        new Vue({
            el: '#a',
            computed: {
                num: function() {
                    return store.state.num;
                }
            },
            methods: {
                add: function() {
                    return store.dispatch('add').then(function() {// 不使用Promise打印2 1,使用Promise打印1 2
                        console.log(2);
                    });
                }
            }
        })
    </script>
    f. 模块Modules和根节点状态rootState
    <body>  
        <div id="a">
            <p @click="add">{{ num }}</p>
        </div>
    </body>  
    <script> 
        var moduleA = {  
            state: {
                num: 0// moduleA节点状态
            },
            mutations: {
                ['a.add']: function(state) {// a.add为命名空间
                    return state.num++;
                }
            },
            actions: {
                ['a.add']: function(context) {
                    context.rootState.num++;// 根节点状态改变
                    return context.commit('a.add');// moduleA节点状态改变
                }
            }
        }
    
        var store = new Vuex.Store({  
            state: {
                num: 0// 根节点状态
            },
            modules: {
                modA: moduleA
            }
        })
    
        new Vue({
            el: '#a',
            computed: {
                num: function() {
                    return store.state.num + store.state.modA.num;// 根节点和moduleA节点状态叠加
                }
            },
            methods: {
                add: function() {
                    return store.dispatch('a.add');// 触发a.add
                }
            }
        })
    </script>
    directive示例:(请注意和vue示例的数据交互使用的是 vnode.context, 待更新)
    	export default {
    		data() {
    			return {
    				SC_outer_style: {
    				},
    				SC_inner_style: {
    					height: '50px',
    					background: 'red'
    				}
    			}
    		},
    		computed: {  
    			SC_outer_style() {
    				return {
    				}
    			}
    		},
    		mounted() {
    		},
    		methods: {
    			init() {
    				
    			}
    		},
    		directives: {
    			handle: {
    				inserted: function(el, binding, vnode) {
    					if(Tool.getStyle(el, 'position') == 'static') {
    						vnode.context.SC_outer_style = {
    							position: 'relative'
    						}
    					}
    				},
    			}
    		}
    	}



    vue-router示例:

    a. 简单的单页应用

    <body>
    	<div id="app">
    		<a v-link="{path: '/home'}">home</a>
    		<a v-link="{path: '/about'}">about</a>
    		<router-view></router-view>
    	</div>
    </body>
    <script>
    	window.onload = function() {
    		var Home = Vue.extend({
    			template: '<p>home content</p>'
    		});
    
    		var About = Vue.extend({
    			template: '<p>about content</p>'
    		});
    
    		var App = Vue.extend();
    
    		var router = new VueRouter();
    
    		router.map({
    			'/home': {component: Home},
    			'/about': {component: About}
    		});
    
    		router.redirect({// 首先展示此页面
    		    '/': '/about'
    		})
    
    		router.start(App, '#app');
    	}
    </script>
    b.  嵌套路由
    <body>
    	<div id="app">
    		<a v-link="{path: '/home'}">home</a>
    		<a v-link="{path: '/about'}">about</a>
    		<router-view></router-view>
    	</div>
    
    	<template id="home">
    		<p>home-content</p>
    		<a v-link="{path: '/home/new'}">new</a>
    		<a v-link="{path: '/home/old'}">old</a>
    		<router-view></router-view>
    	</template>
    
    	<template id="new">
    		<p>new-content</p>
    	</template>
    
    	<template id="old">
    		<p>old-content</p>
    	</template>
    
    	<template id="about">
    		<p>about-content</p>
    	</template>
    </body>
    <script>
    	window.onload = function() {
    		var Home = Vue.extend({
    			template: '#home'
    		});
    
    		var New = Vue.extend({
    			template: '#new'
    		});
    
    		var Old = Vue.extend({
    			template: '#old'
    		});
    
    		var About = Vue.extend({
    			template: '#about'
    		});
    
    		var App = Vue.extend();
    
    		var router = new VueRouter();
    
    		router.map({
    			'/home': {
    				component: Home,
    				subRoutes: {// 子路由
    					'/new': {component: New},
    					'/old': {component: Old}
    				}
    			},
    			'/about': {
    				component: About
    			}
    		});
    
    		router.redirect({// 首先展示此页面
    		    '/': 'about'
    		})
    
    		router.start(App, '#app');
    	}
    </script>

    b. 路由进阶

    <!DOCTYPE html>  
        <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title>index</title>  
            <style>  
                * {  
                    margin: 0;  
                    padding: 0;  
                }  
                .v-link-active {/* 处于当前页面的含有 v-link 属性的元素自动加上 v-link-active 的 class */  
                    background: red;  
                }  
                .customClass {/* 自定义选中时的 class */  
                    background: blue;  
                }  
            </style>  
            <script src="js/vue.js"></script>  
            <script src="js/vue-router.js"></script>  
        </head>  
        <body>  
            <div id="app">  
                <a v-link="{path: '/home', activeClass: 'customClass'}">home</a>  
                <a v-link="{path: '/about'}">about</a>  
                <router-view></router-view>  
            </div>  
    
            <template id="home">  
                <p @click="say">home-content(点击输出 route 对象)</p>  
                <p>route 对象:{{ $route | json }}</p>  
                <a v-link="{path: '/home/new'}">new</a>  
                <a v-link="{path: '/home/old'}">old</a>  
                <router-view></router-view>  
            </template>  
    
            <template id="new">  
                <p>new-content</p>  
            </template>  
    
            <template id="old">  
                <p>old-content</p>  
            </template>  
    
            <template id="about">  
                <p>about-content</p>  
            </template>  
        </body>  
        <script>  
            window.onload = function() {  
                var Home = Vue.extend({  
                    template: '#home',  
                    methods: {  
                        say: function() {  
                            console.log(this.$route)  
                        }  
                    },  
                    route: {  
                		data: function(transition) {// 此组件链接改变时的钩子
                			console.log(transition.from.path?'从'+ transition.from.path +'到'+ transition.to.path:'初始化');
                			transition.next({
                                currentPath: '/about'
                            })
                		}
                    }  
                });  
    
                var New = Vue.extend({  
                    template: '#new'  
                });  
    
                var Old = Vue.extend({  
                    template: '#old'  
                });  
    
                var About = Vue.extend({  
                    template: '#about'  
                });  
    
                var App = Vue.extend({  
                    data: function() {  
                        return {  
                        }  
                    }  
                });  
    
                var router = new VueRouter();  
    
                router.map({// 映射路由  
                    '/home': {  
                        component: Home,  
                        subRoutes: {// 子路由  
                            '/new': {component: New},  
                            '/old': {component: Old}  
                        }  
                    },  
                    '/about': {  
                        component: About  
                    }  
                });  
    
                router.redirect({// 首先展示此页面  
                    '/': 'about'  
                });
    
                router.beforeEach(function() {// 全局钩子
                    console.log('切换前');
                });
    
                router.afterEach(function() {// 全局钩子
                    console.log('切换后');
                });
    
                router.start(App, '#app');  
            }  
        </script>  
    </html> 

    编写插件示例:(配合es6语法,待更新)

    a. 自调用

    myPlugin.js:

    import Vue from 'vue';
    
    ;(function () {
        var MyPlugin = {};
    
        MyPlugin.install = function (Vue, options) {
            Vue.directive('mySex', {
                inserted(el, binding) {
                    console.log(binding.value)
                }
            })
    
            Vue.prototype.$sex = options.sex;
            Vue.prototype.$say = function() {
                console.log(this.$sex)
            };
        };
    
        Vue.use(MyPlugin, {sex: 'male'});// 这里调用后,引用该文件无需再调用
    })();
    main.js:
    import Vue from 'vue';
    import MyPlugin from 'js/myPlugin.js';

    b. export default

    myPlugin.js:

    import Vue from 'vue';
    
    export default {
        install(Vue, options) {
            Vue.directive('mySex', {
                inserted(el, binding) {
                    console.log(binding.value)
                }
            })
    
            Vue.prototype.$sex = 'female';
            Vue.prototype.$say = function() {
                console.log(this.$sex)
            };
        }
    }
    main.js:

    import Vue from 'vue';
    import MyPlugin from 'js/myPlugin.js';
    
    Vue.use(MyPlugin, {sex: 'male'});// 这里需要调用一次

    c. 自定义组件(也是一种插件方式)

    myPlugin.vue:

    <template>
    	<div class="sexClass" @click="say"><slot name="ctn">{{ sex }}</slot></div>
    </template>
    
    <script>
    	import Vue from 'vue';
    
    	export default {
    		data: function() {
    			return {
    				sex: 'male'
    			}
    		},
    		methods: {
    			say: function() {
    				console.log(this.sex);
    			}
    		}
    	}
    </script>
    
    <style>
    	.sexClass {
    		background: red;
    	}
    </style>
    
    main.js:
    import Vue from 'vue';
    import MyPlugin from 'components/myPlugin.vue';
    
    new Vue({
    	el: '#app',
    	components: {
    		'my-plugin': MyPlugin
    	}
    })
    index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>demo</title>
    </head>
    <body>
    	<div id="app">
    		<my-plugin><div slot="ctn"><button>点击这里</button></div></my-plugin><!-- 在这里使用组件 -->
    	</div>
    </body>
    </html>












    展开全文
  • 注意:这些示例旨在与Vue 2配合使用,尚未更新为与Vue 3配合使用。 什么是Auth0? Auth0可帮助您: 使用添加身份验证,可以是社交例如Google,Facebook,Microsoft帐户,LinkedIn,GitHub,Twitter,Box,...
  • vue3-demo vue3入门教程 包含响应式API、组合式API、其它特性、Counter 以及 TodoMVC, 同时集成 vuex4、vue-router4、typescript和vitejs。 关于vue3整体上的变化总结,可以阅读这篇博客。
  • Vue Vue JS练习示例 设置
  • vue2-sass-config Vue2(不是Vue3)SASS配置示例 信息 此模板是为Vue2项目设计的,与Vue3不兼容; sass-loader受限制,因为11+要求WebPack 5;
  • Node Webkit Boilerplate注意:此项目使用的是旧版node-webkit...我在Vue.js和Browserify中提供了一个小示例,以帮助您快速开发高度模块化且可测试的应用程序。 应用程序结构所有开发都在app文件夹中进行。 吞咽你的fi
  • Vue代码示例,左边Tree,右边对Tree节点配置子表多条数据,列表显示,子表可增删改查。并附上后端Controller.java
  • 主要展示vue学习中的示例demo 目录结构介绍 |-- component.html // 组件示例 |-- directive.html // 自定义指令示例 |-- examples.html // vue实例示例 |--...
  • vue3-jsx-研究 vue3 + jsx的一些示例
  • 示例是本人自己研究的,里面有详细的代码介绍和说明,下载后编译后即可运行查看效果,有增删改查的功能,希望可以帮助到大家!
  • VUE(一).创建一个VUE Demo示例

    千次阅读 2018-08-14 15:59:54
    今天开始,了解VUE的使用,权当是学习笔记。 本篇是VUE的第一个学习笔记,从VUE的开发环境准备,到第一个Hello VUE的创建完毕,来说起... 1、由于VUE项目依赖于Node.js,因此先要装上Node.js。 安装过程不多说,...

    今天开始,了解VUE的使用,权当是学习笔记。

    本篇是VUE的第一个学习笔记,从VUE的开发环境准备,到第一个Hello VUE的创建完毕,来说起...

    1、由于VUE项目依赖于Node.js,因此先要装上Node.js。

    安装过程不多说,安装完毕之后,命令行输入: node -v,输出版本信息,表示安装成功;

    npm 全名为Node Package Manager,是Node.js 的套件(package)管理工具,npm是集成在node中的,

    命令行输入:npm -v就能查看到版本信息。

     

    2、安装VUE

              安装vue-cli脚手架构建工具,输入命令: npm install -g vue-cli,安装完成即可。由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像,即:npm install -g vue-cli --registry=https://registry.npm.taobao.org

               命令行输入:vue -V 查看到vue 的版本信息,表示安装成功。

    3、创建示例项目

           VUE项目创建模版有多个,我们默认选择webpack模式。

          命令行,选好项目创建的路径,输入 vue init webpack projectname 回车,如下:

    依次按照提示输入,项目名、项目描述、项目作者等等,一路回车,Yes,然后就是等待项目创建完毕。从截图中可以看到在项目安装之后,会出现To get started:, 提示 进入my-vue项目目录、运行项目。如果是初次创建项目,还会有个npm install,这个命令提示你需要给项目安装依赖。切换路径到项目路径,把淘宝镜像加入到本地镜像中,执行以下命令:

     npm install -g cnpm --registry=https://registry.npm.taobao.org

      安装完毕后,会出现一个node_modules文件夹。

    这个时候,我们就可以运行命令:npm run dev 来启动项目了。等待一段时间,启动完毕之后,浏览器输入 localhost:8080/

    就可以看到我们创建的示例Demo了。

     

    展开全文
  • Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
  • 项目地址:... Git下载:https://github.com/vuejs/vue-hackernews-2.0 安装与运行: 解压之后,在当前目录启动命令行 Requires Node.js 7+ # install dependencies npm install # or yarn # se...

    项目地址:https://vuejs.org/v2/examples/hackernews.html

    Git下载:https://github.com/vuejs/vue-hackernews-2.0

    安装与运行:

    解压之后,在当前目录启动命令行

    Requires Node.js 7+

    # install dependencies
    npm install # or yarn
    
    # serve in dev mode, with hot reload at localhost:8080
    npm run dev
    
    # build for production
    npm run build
    
    # serve in production mode
    npm start

     

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,693
精华内容 23,077
关键字:

vue3示例

vue 订阅