vue.js笔记1.0

事件：

　　事件冒泡行为：

　　　　1、@click="show($event)"

　　　　　　show:function (ev) {

　　　　　　　　ev.cancelBubble=true;

　　　　　　}

　　　　　2、@click.stop="show()"

　　事件捕获行为：

　　　　<div v-on:click.capture="doThis">...</div>

　　连用：<a v-on:click.stop.prevent="doThat"></a>

　　事件默认行为：

　　　　1、ev.preventDefault();

　　　　2、@contextmenu.prevent 

　　　键盘事件行为：

　　　　1、@keydown  可以有 $event ev.keycode

　　　　2、@keyup

　　　　3、回车键@keyup.13或者@keyup.enter;@keydown.13,@keydown.enter

　　　　　　同理有上下左右键up,down,left,right.还有space,esc,delete,tab

属性：

　　　　v-bind:src=""   width/height/title等

　　　　简写：：src=""

　　　　<img :src="url" alt=">

　　　　class与style:

　　　　　　:class   v-bind:class=""

　　　　　　:style   v-bind:style=""

 

　　　　　　:class="[r,b,c]" r,b,c是data中的数据

　　　　　　:class="[r]"

　　　　　　:class="{r:true}"添加上class

　　　　　　:class="{r:false,b:true}"没添加上class r,只添加了b

　模板：

　　　　{{msg}}  数据更新模板变化

　　　　{{*msg}} 数据只绑定一次

　　　　{{{msg}}} HTML转义输出

过滤器：

　　　　在1.0中系统提供一些过滤器：

　　　　capitalize,uppercase,lowercase,currency 表示钱，debounce:配合事件,延迟执行  ，json:转化为json格式。

　　　在2.0中内置过滤器全部删除了。

例：　　　new Vue({

　　　　　　el:'#box',

　　　　　　data:{

　　　　　　　　a:{name:'strive',age:'18'}

　　　　　　}

　　　　});

　　　　<div id="#box">

　　　　　　{{a |json}}

　　　　</div>

 

　　　　　例：　{{'welcome'|capitalize}} {{'welcome'|uppercase}} {{'WELCOME'|lowercase|capitalize}}

　　　　　　{{ message | filterA }}

　　　　　　{{ message | filterA | filterB }}　　　　　　　

　　　　　　{{msg|currency '参数' }}

　　　　　例： {{12|currency '￥'}} 结果 ￥12.00

　　　　　　　 {{12|currency}} 结果 $12.00

　　　例：　<input type='text' @keyup="show | debounce 1000">表示1000毫秒后执行函数show();

 

　　　　数据配合使用过滤器：

　　　　limitBy:限制几个

　　　　使用：limitBy 参数  ------>一个参数表示限制几个

　　　　　　　limitBy 参数 参数 ------>两个参数，第一个表示限制几个，第二个表示开始位置

 

　　　　例：<li v-for="val in arr |limitBy 2">{{val}}</li>//显示前两个

　　　　<li v-for="val in arr |limitBy 2 1">{{val}}</li>//从第二个开始显示到第三个

　　　　　　

　　　　filterBy 参数 过滤数据

　　　　<li v-for="val in arr |filterBy 'a'">{{val}}</li>//如果arr数组中包含["background","blue","apple","red"],则会输出 background,apple

 

　　　　orderBy 参数 排序

　　　  orderBy 1从小到大排序 即正序

　　　　 orderBy -1倒序

　　　

　　　　自定义过滤器1.0：

　　　　Vue.filter('名称',function(input,a,b){

　　　　　　return ;

　　　　});

　　　　例：{{input| toDo a b}}

　　　　Vue.filter('toDo',function(a,b){});

　　　　Vue.filter('date',function (input) {
　　　　　　var oDate=new Date(input*1000);
　　　　　　return oDate.getFullYear()+'-'+oDate.getMonth()+1+'-'+oDate.getDate()+' ''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
　　　　});

 

 

　　　　自定义过滤器2.0：

 

　　　{{input| toDo (a, b)}}

 

 

 

　　　　

交互：

　　需要引入vue-resource.js,　　ajax　　php

　　this.$php.get()/post()/jsonp()

 

　　get:

　　　　获取一个普通文本数据:
　　　　this.$http.get('aa.txt').then(function(res){
　　　　　　alert(res.data);
　　　　},function(res){
　　　　　　alert(res.status);
　　　　});
　　　　给服务发送数据:√
　　　　this.$http.get('get.php',{
　　　　　　a:1,
　　　　　　b:2
　　　　}).then(function(res){
　　　　　　alert(res.data);
　　　　},function(res){
　　　　　　alert(res.status);
　　　　});
　　　　post:
　　　　this.$http.post('post.php',{
　　　　　　a:1,
　　　　　　b:20
　　　　},{
　　　　　　emulateJSON:true
　　　　}).then(function(res){
　　　　　　alert(res.data);
　　　　},function(res){
　　　　　　alert(res.status);
　　　　});
　　　　jsonp:
　　　　https://sug.so.360.cn/suggest?callback=suggest_so&word=a

　　　　https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

　　　　this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
　　　　wd:'a'
　　　　},{
　　　　jsonp:'cb' //callback名字，默认名字就是"callback"
　　　　}).then(function(res){
　　　　　　alert(res.data.s);
　　　　},function(res){
　　　　　　alert(res.status);
　　　　});

 

　　this.$http({

　　　　url:地址

　　　　data:给后台提交数据

　　　　method:默认'get',可以添加'post'/'jsonp'

　　　　jsonp:'cb' //cbName

 

　　　　});

vue的生命周期：

　　钩子函数：1.0

　　　　create：实例已经创建 

　　　　beforeCompile:编译之前

　　　　compiled:编译之后

　　　　ready:插入到文档中

　　　　beforeDestroy:销毁之前

　　　　Destroyed:销毁之后

　　在2.0中变化：

　　　　beforeCreate 组件刚刚被创建，属性都没有

　　　　created　　实例已经创建完成，属性已经绑定

　　　　beforeMount　　编译模板之前

　　　　mounted　　编译模板之后

　　　　beforeUpdate　　组件更新之前

　　　　updated　　组件更新之后

　　　　beforeDestroy　　组件销毁之前

　　　　destroyed　　组件销毁之后

用户会看到花括号：

　　1、 v-cloak ：防止闪烁。比较大的段落中使用。添加到标签中类似属性

　　　　在style中将v-cloak属性 display:none;

　　2、用v-text代替{{}}

　　3、用v-html代替{{{}}}

----------------------------------------------------------------------------

计算属性的使用：

 

　　data:{
　　　　t1:'',
　　},
　　computed:{
　　　　t2:function () {//默认为get方法
　　　　　　return t1+"bbbb";
　　　　}
　　},　

　　t2也是属性，computed中放置业务逻辑代码，return 值很重要

　　computed:{
　　　　t2:{

　　　　　　get:function(){

　　　　　　　　return t1+"bb";

　　　　　　},

　　　　　　set:function(){

　　　　　　　　this.t1='aaaa'

　　　　　　}
　　　　　
　　　　}
　　},

---------------------------------------------------------------------

vue实例：

　　var vm=new Vue({});

　　vm.$el：元素

　　vm.$data：就是数据data

　　vm.$mount:手动挂载vue程序

　　vm.$options.aabb:aabb为自定义属性，options专门调用自定义属性

　　vm.$destroy:销毁对象

　　vm.$log():查看现在数据的状态

--------------------------------------------------------

关于循环：

　　v-for="value in data"　

　在vue 1.0中value会有重复数据　，当需要加载重复数据是，需要加track-by='索引' 可以提供循环性能

　　例如<li v-for="(value，index) in arr" track-by="index">

　　在2.0中for循环默认会把重复数据加载出来。

自定义指令：

　　　　Vue.directive(指令名称(red)，function(参数el){

　　　　　　this.el:原生的DOM元素

　　　　});

　　　　<div v-red="参数"></div>

　　　　指令名称：v-red ----->写成red

 

自定义元素指令:用处不大

　　　　Vue.elementDirective(元素名称，{bind:function(){}});

自定义键盘指令1.0中：

　　Vue.directive('on').keyCodes.ctrl=17//自定义ctrl键，通过@keyup.ctrl=""来使用

 在2.0中：Vue.comfig.keyCodes.ctrl=17;

 

监听数据变化：

　　vm.$el/$mount/$options/...

　　vm.$watch(name,fncb);浅度

　　vm.$watch(name.fncb,{deep:true});//深度监视

---------------------------------------------------

vue过渡动画：

　　本质是css3：transition，animation

　　<div id="div1" v-show="bSign" transition="fade"></div>

　动画：

        名称规定： .fade-transition{

　　　　　　　　　　transition: 1s all ease;

　　　　　　　　　}

　　　进入动画： .fade-enter{

　　　　　　　　　　opacity:0;

　　　　　　　　　}

　　　退出动画： .fade-leave{

　　　　　　　　　　opacity:0;

　　　　　　　　}

 

-----------------------------------------------

vue组件：　　

 

　　全局组件：

　　　　组件里面放数据，函数必须返回一个对象json。注意要确保在初始化根实例之前注册了组件：

　　　　Vue.component('my-component',{

　　　　　　data(){

　　　　　　　　return {msg:'A custom component!'} 

 

　　　　　　},

　　　　　　methods:{

　　　　　　　　change(){

　　　　　　　　　　this.msg='hello';

　　　　　　　　}

　　　　　　}

　　　　　　template: '<div @click="change" v-text="msg"></div>'

　　　　});

　　　　new Vue({

　　　　　　el:'#box'

　　　　})

　　使用：<my-component><my-component/>

 

 

　　　

　　　局部组件：　通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

　　　　var Child = {

 

　　　　　　template: '<div>A custom component!</div>'

 

　　　　}

 

　　　　new Vue({

　　　　　　el:'#box',

　　　　　　components:{

　　　　　　　　'my-component':Child

　　　　　　}

　　　　});

-------------------------------------------------------

配合模板使用：

　方式一：　

<script type="x-template" id="aaa">
    <h2 @click="change" v-text="msg"></h2>
    <ul>
        <li>1111</li>
        <li>1111222</li>
        <li>111333</li>
        li>4444</li>
    </ul>
</script>        

　方式二：　

    <template id="aaa">
        <ul>
            <li v-for="value in arr"></li>
        </ul>

    </template>
            new Vue({
                el:'#box',
                components:{
                    'my-component':{
                         data(){
                         return {
                             msg:'A custom component!',
                             arr:['aa','bb','cc']
                         }
                        },
　　　　　　              methods:{
                            change(){
                            this.msg='hello';
                            }
                        },
                          template: '#aaa'
                    }
                }
            });

　　　动态组件：

　　　　　　<component :is="组件名称"></component>