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 ...

随机推荐

fqrouter让安卓手机登陆facebook成为可能
大多数人向来都是在电脑上通过各种代理工具来访问一些国外网站,例如facebook,twitter,然而你是否想过可以通过你的手机来畅游这些网站呢,接下来我将介绍一种通过fqrouer实现使用安卓手机畅 ...
Visual Studio 中的头文件、源文件和资源文件都是什么？有什么区别？？
头文件:后缀为.h,主要是定义和声明之类的,比如类的定义,常量定义源文件:后缀.cpp,主要是实现之类的,比如类方法的实现资源文件主要是你用到的一些程序代码以外的东西,比如图片之类,或者菜单.工具栏之 ...
android selector详解
--> 改变字体的颜色<selector xmlns:android="http://schemas.android.com/apk/res/android"> ...
iOS开发中的远程推送实现(最新，支持iOS9)
我的个人项目<丁丁印记>中加入了远程推送功能,按照操作说明去做还是比较容易实现的,但是学的不够不系统,而且iOS8之后的推送和之前的版本是有所不同的,因此这篇文章希望总结一下最新的iOS推 ...
【SQL查询日志】查看数据库历史查询记录
--关键字:cross apply & outer apply --最后更新:2011-10-20 作者:Ronli--更新链接:http://www.cnblogs.com/ronli/ar ...
《hanoi（汉诺塔）问题》求解
//Hanoi(汉诺)塔问题.这是一个古典的数学问题,用递归方法求解.问题如下: /* 古代有一个梵塔,塔内有3个座A,B,C,开始时A座上有64个盘子,盘子大小不等,大的在下,小的在上. 有一个老和 ...
hdu1005 矩阵
//Accepted hdu1005 0MS 248K #include <cstdio> #include <cstring> #include <iostream&g ...
loaderexceptions
前段时间遇到一个问题从容器中取数据时老报一个“无法加载一个或多个请求,请检索loaderexceptions” 真心是不晓得什么问题以前经常这么用没有问题的这个是在网站下引用了别的已经编译好的别 ...
(转)Android学习笔记---SQLite介绍,以及使用Sqlite,进行数据库的创建,完成数据添删改查的理解
原文:http://blog.csdn.net/lidew521/article/details/8655229 1.SQLite介绍:最大特点是,无数据类型;除了可以使用文件或SharedPrefe ...
Virtual Friend Function
一般而言,友元作为一种紧耦合的设计,被视作类的一部分.一个经典的应用就是关于类的序列化和反序列化. class A { friend ostream& operator<<(ost ...

Vue.js相关知识1

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

随机推荐

热门专题