Vue.js相关知识1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-link-active {
            color: red;
        }
    </style>
</head>
<body>

<div id="demo">
    <parents></parents>
</div>

<!-- 子组件模板 -->
<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父组件模板 -->
<div id="events-example">
    <h4>父子组件</h4>
    <p>Messages: {{ messages | json }}</p>
    <button @click="conChild">打印子组件</button>
    <child v-on:child-msg="handleIt" v-ref:profile></child>  <!-- v-ref相当于id可以用它找子组件 -->
</div>

<!--//两个同级组件互相通信-->
<div id='app'>
    <h4>两个同级组件互相通信</h4>
    <filter-list></filter-list>
</div>

<template id='filter-list-temp'>
    <div>
        <h4>filter list</h4>
        <condition :filter-text.sync="filterText"></condition>
        <list :items="filteredItems"></list>
    </div>
</template>

<template id='condition-temp'>
    <div>
        <input v-model="filterText"/>
    </div>
</template>

<template id='list-temp'>
    <div>
        <p v-for="item in items">
            {{item}}
        </p>
    </div>
</template>

<div id="dynamic-components">
    <h4>动态组件</h4>
    <button @click="showHome">home</button>
    <button @click="showPosts">posts</button>
    <button @click="showArchive">archive</button>
    <component :is="currentView">
        <!-- 组件在 vm.currentview 变化时改变 -->
    </component>
</div>

<div id="mount-point"></div>

<p><a href="http://cn.vuejs.org/api/#Vue-extend">Vue.set( object, key, value )</a></p>
<p><a href="http://cn.vuejs.org/api/#Vue-extend">Vue.delete( object, key )</a></p>
<p>
    <a href="http://cn.vuejs.org/api/#Vue-extend">Vue.directive( id, [definition] )</a>
    <pre>
        注册或获取全局指令。
        // 注册
        Vue.directive('my-directive', {
          bind: function () {},
          update: function () {},
          unbind: function () {}
        })

        // 注册，传入一个函数
        Vue.directive('my-directive', function () {
          // this will be called as `update`
        })

        // getter，返回已注册的指令
        var myDirective = Vue.directive('my-directive')
    </pre>
</p>
<p>
    <a href="http://cn.vuejs.org/api/#Vue-extend">Vue.filter( id, [definition] )</a>
    <pre>
        注册或获取全局过滤器。
        // 注册
        Vue.filter('my-filter', function (value) {
          // 返回处理后的值
        })

        // 双向过滤器
        Vue.filter('my-filter', {
          read: function () {},
          write: function () {}
        })

        // getter，返回已注册的指令
        var myFilter = Vue.filter('my-filter')
    </pre>
</p>
<p>
    <a href="http://cn.vuejs.org/api/#Vue-extend">Vue.transition( id, [hooks] )</a>
    <pre>
        注册或获取全局的过渡钩子对象。
        // 注册
        Vue.transition('fade', {
          enter: function () {},
          leave: function () {}
        })

        // 获取注册的钩子
        var fadeTransition = Vue.transition('fade')
    </pre>
</p>

<h4>Watch监听</h4>
<p>一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() </p>
<pre>
    var vm = new Vue({
      data: {
        a: 1
      },
      watch: {
        'a': function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        'b': 'someMethod',
        // 深度 watcher
        'c': {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        }
      }
    })
    vm.a = 2 // -> new: 2, old: 1
</pre>
<p>vm.$watch( expOrFn, callback, [options] )观察 Vue 实例的一个表达式或计算函数。回调的参数为新值和旧值。表达式可以是某个键路径或任意合法绑定表达式。</p>

<p>vm.$get( expression )从 Vue 实例获取指定表达式的值。如果表达式抛出错误，则取消错误并返回 </p>
<p>vm.$set( keypath, value )设置 Vue 实例的属性值。多数情况下应当使用普通对象语法，如 vm.a.b = 123</p>
<p>vm.$delete( key )</p>
<p>vm.$eval( expression ) 计算当前实例上的合法的绑定表达式。表达式也可以包含过滤器。 vm.$eval('msg | uppercase') // -> 'HELLO'</p>

<p>vm.$log( [keypath] )打印当前实例的数据vm.$log() // 打印整个 ViewModel 的数据   vm.$log('item') // 打印 vm.item</p>
<p>vm.$emit( event, […args] )触发当前实例上的事件</p>
<p>vm.$dispatch( event, […args] )派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止，除非它返回 true。附加参数都会传给监听器回调。</p>
<pre>
        // 创建父链
        var parent = new Vue()
        var child1 = new Vue({ parent: parent })
        var child2 = new Vue({ parent: child1 })

        parent.$on('test', function () {
          console.log('parent notified')
        })
        child1.$on('test', function () {
          console.log('child1 notified')
        })
        child2.$on('test', function () {
          console.log('child2 notified')
        })

        child2.$dispatch('test')
        // -> "child2 notified"
        // -> "child1 notified"
        // 没有通知 parent，因为 child1 的回调没有返回 true
</pre>

<p>vm.$broadcast( event, […args] )广播事件，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。每条路径上的通知在触发一个监听器后停止，除非它返回 true。</p>
    <pre>
        var parent = new Vue()
        // child1 和 child2 是兄弟
        var child1 = new Vue({ parent: parent })
        var child2 = new Vue({ parent: parent })
        // child3 在 child2 内
        var child3 = new Vue({ parent: child2 })

        child1.$on('test', function () {
          console.log('child1 notified')
        })
        child2.$on('test', function () {
          console.log('child2 notified')
        })
        child3.$on('test', function () {
          console.log('child3 notified')
        })

        parent.$broadcast('test')
        // -> "child1 notified"
        // -> "child2 notified"
        // 没有通知 child3，因为 child2 的回调没有返回 true
    </pre>
<p>vm.$appendTo( elementOrSelector, [callback] )</p>
<p>vm.$before( elementOrSelector, [callback] )</p>
<p>vm.$after( elementOrSelector, [callback] )</p>
<p>vm.$remove( [callback] )</p>
<p>vm.$nextTick( callback )将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。</p>
<p>vm.$mount( [elementOrSelector] )可以使用 vm.$mount() 手动地开始挂载/编译未挂载的实例。如果没有参数，模板将被创建为文档之外的的片断，需要手工用其它的 DOM 实例方法把它插入文档中。如果 replace 选项为 false，则自动创建一个空 'div'，作为包装元素。
    在已经挂载的实例上调用 $mount() 没有效果。这个方法返回实例自身，因而可以链式调用其它实例方法。</p>

<p>v-el:为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。</p>
<pre>
    <span v-el:msg>hello</span>
    <span v-el:other-msg>world</span>

    this.$els.msg.textContent // -> "hello"
    this.$els.otherMsg.textContent // -> "world"
</pre>
<p>v-pre:跳过编译这个元素和它的子元素。</p>

<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script src="demo_1.js"></script>
</body>
</html>

js：

//Props数据传递
var Parents = Vue.extend({
    template:'<div>' +
    '<h4>Props数据传递</h4>'+
    'i am {{age}}' +
    '<input v-model="parentMsg">'+
    '<p>father:{{parentMsg}}</p>'+
    '<my-component :age.sync="age" :parent-msg.sync="parentMsg"></my-component>' +  //:age.sync="age=48"
    '</div>',
    data:function(){
        return {
            age:'22',
            parentMsg:''
        }
    },
    components: {
        'my-component': {
            template: '<div>' +
            'i am {{age}} too!' +
            '<p>child:{{parentMsg}}</p>'+
            '<button v-on:click="changeAge">更改年龄</button>'    +
            '<button v-on:click="changeVal">更改val</button>'    +
            '</div>',
            data: function () {
                return {
                    //parentMsg:this.$parent.parentMsg
                }
            },
            props:['age','parentMsg'],
            methods:{
                changeAge:function() {
                    this.age='48';
                    console.log( this.$parent.parentMsg);
                },
                changeVal:function(){
                    this.parentMsg='heihei'
                }
            }
        }
    }
});
Vue.component('parents',Parents);
new Vue({
    el:'#demo',
    data:{

    }
});

//父子组件
Vue.component('child', {
    template: '#child-template',
    data: function () {
        return { msg: 'hello' }
    },
    methods: {
        notify: function () {
            if (this.msg.trim()) {
                this.$dispatch('child-msg', this.msg);
                this.msg = ''
            }
        }
    }
});
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
    el: '#events-example',
    data: {
        messages: []
    },
    // 在创建实例时 `events` 选项简单地调用 `$on`
    events: {
        'child-msg': function (msg) {
            // 事件回调内的 `this` 自动绑定到注册它的实例上
            this.messages.push(msg)
        }
    },
    methods:{
        conChild:function(){
            console.log(this.$refs.profile.msg);   //v-ref相当于id可以用它找子组件
        }
    }
//      每个 Vue 实例都是一个事件触发器：
//      使用 $on() 监听事件；
//      使用 $emit() 在它上面触发事件；
//      使用 $dispatch() 派发事件，事件沿着父链冒泡；
//      使用 $broadcast() 广播事件，事件向下传导给所有的后代。

//    var vm = new Vue({
//        events: {
//            'hook:created': function () {
//                console.log('created!')
//            },
//            greeting: function (msg) {
//                console.log(msg)
//            },
//            // 也可以是方法的名字
//            bye: 'sayGoodbye'
//        },
//        methods: {
//            sayGoodbye: function () {
//                console.log('goodbye!')
//            }
//        }
//    }) // -> created!
//    vm.$emit('greeting', 'hi!') // -> hi!
//    vm.$emit('bye')
});

//两个组件互相通信 (两个组件应该有一个共同的父组件)

Vue.component('condition', {       //子组件
    template: '#condition-temp',
    props: ['filterText']
});

Vue.component('list', {        //子组件
    template: '#list-temp',
    props: ['items']
})

Vue.component('filter-list', {  //父组件
    template: '#filter-list-temp',
    data: function() {
        return {
            filterText: '',
            items: ['Jack Yang','Angel','New York']
        }
    },
    computed: {
        filteredItems: function() {
            return this.$data.items.filter(function(item) {
                return item.indexOf(this.$data.filterText) != -1;
            }.bind(this));
        }
    }
})

new Vue({
    el: '#app'
})

//动态组件

new Vue({
    el:'#dynamic-components',
    data:{
        currentView:'home'
    },
    methods:{
        showHome:function(){
            this.currentView='home'
        },
        showPosts:function(){
            this.currentView='posts'
        },
        showArchive:function(){
            this.currentView='archive'
        }
    },
    components: {
        home: {
            template:'<div> home组件</div>'
        },
        posts: {
            template:'<div>posts组件</div>'
        },
        archive: {
            template:'<div>archive组件</div>'
        }
    }
})

// 创建可复用的构造器
var Profile = Vue.extend({    //el 和 data 选项—— 在 Vue.extend() 中它们必须是函数。
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
})
// 创建一个 Profile 实例
var profile = new Profile({
    data: {
        firstName: 'Walter',
        lastName: 'White',
        alias: 'Heisenberg'
    }
})
// 挂载到元素上
profile.$mount('#mount-point')

//var parent = new Vue()
//var child1 = new Vue({ parent: parent })
//var child2 = new Vue({ parent: child1 })
//
//parent.$on('test', function () {
//    console.log('parent notified')
//})
//child1.$on('test', function () {
//    console.log('child1 notified')
//})
//child2.$on('test', function () {
//    console.log('child2 notified')
//})
//
//child2.$dispatch('test')

var parent = new Vue()
// child1 和 child2 是兄弟
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: parent })
// child3 在 child2 内
var child3 = new Vue({ parent: child2 })

child1.$on('test', function () {
    console.log('child1 notified')
})
child2.$on('test', function () {
    console.log('child2 notified')
    return true;     //--child3 notified
})
child3.$on('test', function () {
    console.log('child3 notified')
})

parent.$broadcast('test')

Vue.js相关知识1的更多相关文章

Vue.js相关知识4-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识3-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识2-组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js 相关知识（路由）
1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入v ...
Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
Vue.js 相关知识（组件）
1. 组件介绍组件(component),vue.js最强大的功能之一作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体根组件:我们实例化的Vue对象就是一个组件 ...
Vue.js 相关知识（基础）
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
Vue.js 相关知识（脚手架）
1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤安装npm 或 cnpm n ...
vue.js基础知识篇(2):指令详解
第三章:指令 1.语法指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

随机推荐

IE7的overflow失效的解决方法
IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...
HDU 5353
题目大意: 相邻的朋友可以给出自己手上最多一颗糖,n个朋友形成一个环,问给的方式能否最后使所有朋友都糖的数量相同这里我用的是网络流来做的,这里n=100000,用sap的模板可以跑过 #includ ...
win10系统的点评
Windows 10 是美国微软公司所研发的新一代跨平台及设备应用的操作系统.在正式版本发布一年内,所有符合条件的Windows7.Windows 8.1的用户都将可以免费升级到Windows 10, ...
将Ajax 中数组转换成字符串封装成类
<?php class Ajax{ //ajax调用的方法 //sql是要执行的语句 //$type是SQL语句的类型,0代表增删改,1代表查询 //$db代表要操作的数据 public fun ...
https 三次握手
1,客户端输入https网址,链接到server443端口: 2,服务器手中有一把钥匙和一个锁头,把锁头传递给客户端.数字证书既是公钥,又是锁头 3,客户端拿到锁头后,生成一个随机数,用锁头把随机数锁 ...
关于IE条件注释（译）
本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...
学习和使用PHP应该注意的10件事
1 多阅读手册和源代码没什么比阅读手册更值得强调的事了–仅仅通过阅读手册你就可以学习到很多东西,特别是很多有关于字符串和数组的函数.就在这些函数里面包括许多有用的功能,如果你仔细阅读手册,你会经常 ...
magento做手机端思路
有个插件可以检测移动设备访问,然后显示对于的手机主题这个方法最简单另外的就是调接口了这个用来做app也行不过mg的数据不是json数据,是xml速度很慢
ios开发环境分支语句、循环结构（for）、循环结构
1 完成命令解析程序 1.1 问题有命令解析程序,该程序提供三个功能选项供用户选择,用户选择某功能后,程序在界面上输出用户所选择的功能名称.程序的交互效果如图-1所示: 图-1 由上图可以看出,程序 ...
Difference Between Performance Testing, Load Testing and Stress Testing
http://www.softwaretestinghelp.com/what-is-performance-testing-load-testing-stress-testing/ Differen ...

Vue.js相关知识1

Vue.js相关知识1的更多相关文章

随机推荐

热门专题