vue 笔记

1、  Vue 指定id

一个页面中要给要使用Vue的地方指定一个id，把他赋值给el。

比如：

<div id="app">

           <h1>{{message}}</h1>

           <input type="text" v-model="message">

           <span>

               {{ $data.message}}

           </span>

    </div>

new Vue({

              el: "#app", //选定id

               data: {

                  message: "Hello World!" // 输出message的内容

               }

        });

2、  Vue给值和内容

有两种给值的方法：

法一：

(1)     给输入框v-model=”vueText”

(2)     给一个标签填值：{{ vueText }}

法二：

(1)     给输入框v-model=”vueText”

(2)     在js中：给data传值

new Vue({

       el: "#app", //选定id

    data: {

           vueText: "Hello World!" // 输出message的内容

    }

});

(3)     给标签填值：{{$data.vueText}}

3、  Vue事件

在html中，事件的方法用@click=”clickListener”

在js中，方法具体执行用：

new Vue({

               el: "#vueForm",

              data: {

                  username: ""

              },

              methods: {

                  clickListener: function() {

                     alert(this.username);

                  }

              }

        });

注意：当要传入event时，可以使用$event

        @:click="say('hello!', $event)

4、  Vue组件化一

使用方法 ：

(1)<custom>中声明name属性,其中custom和name都是可以自定义的，但是属性要注意，全是小写字母才可以

                   (2)定义一个模板<template>，用来设置刚才定义的<custom>

                   (3)js中创建Vue

new Vue({

              el: '#app'

           })

(4)     js中给Vue组件化处理

Vue.component('custom', {

              template: '#template', // 模板对应的id

              props: ['name'], // <custom>对应的属性

              data: function() {

                  return {

                     count: 0

                  }

              }

       });

注意： Vue.component 要放在new Vue()之前，不然会有警告

比如：

<div id="app">

           <custom name="赞"></custom>

           <custom name="踩"></custom>

       </div>

       <template id="template">

           <h1>{{name}}</h1>

           <button @click="count += 1">{{count}}</button>

       </template>

       <script type="text/javascript" src="js/vue.js" ></script>

       <script>

           Vue.component('custom', {

              template: '#template',

              props: ['name'],

              data: function() {

                  return {

                     count: 0

                  }

              }

           });

           new Vue({

              el: '#app'

           })

    </script>

5、  Vue组件化二

比如：

// 定义

var Tree = Vue.extend({

  template: '<div>This is a tree!</div>'

});

// 注册

Vue.component('tree', Tree);

// 开始渲染

new Vue({

  el: '#box'

});

6、  Vue组件化三

使用方法： 直接在new Vue里面添加对象：computed

比如：

new Vue({

                      el: '#app',

                     data: {

                         points: 300,

                     },

                     computed: {

                         level: function() {

                             if (this.points <= 200) {

                                return '普通会员'

                            }

                            return 'VIP会员'

                         }

                     }

                  })

7、  Vue循环

用法：v-for='item in items'    
           v-for='(index, item) in items'    *数组则是索引，遍历对象则是键

比如：

v-for = ‘book in books’

8、  指令缩写

v-bind可以缩写为:

v-on:可以缩写为@

比如：

<a v-bind:href="url"></a>

<a :href="url"></a>

 

<button v-on:click="btnClick"></button>

<button @click="btnClick"></button>

9、  自定义的指令

Vue.directive()

比如：

Vue.directive('demo', {

  bind: function () {

    // 准备工作

    // 例如，添加事件处理器或只需要运行一次的高耗任务

  },

  update: function (newValue, oldValue) {

    // 值更新时的工作

    // 也会以初始值为参数调用一次

  },

  unbind: function () {

    // 清理工作

    // 例如，删除 bind() 添加的事件监听器

  }

})

10、$remove

这是vue为数组扩展的删除的方法

比如：

        delBook:function(book){

       this.books.$remove(book);

  }

11、 v-if和v-else

12、声明一个Vue构造函数

有两种使用方法：

（1）new Vue({

              el: “#id”

});

（2）var vm = new Vue();

          Vm.$el = “#id”

两者的区别是：如果放在里面的不用加$,如果是把对象提出来的话，那就要加上$，其他的对象名也是如此。

13、观察

值得提醒的是，一旦数据被观察，Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补，我们会为被观察的对象增加 $add， $set和 $delete 方法。

14、响应式指令

（1）v-attr

（2）v-style

（3）v-class

（4）v-text

     设置之后，不管里面含有什么内容，里面的东西都会被替换掉

            <div v-text="vText">

              <span>123</span>

           </div>

（5）v-show

      通过true和false来控制元素是否显示

　　<div v-show="vShow">我是通过v-show来决定显不显示的</div>

（6）v-on

        常见的按键有提供别名：
            ·enter
            ·tab
            ·delete
            ·esc
            ·space
            ·up
            ·down
            ·left
            ·right

       比如：

      　　 《1》阻止冒泡和默认行为：<a @click.stop.prevent='doThis' />

　　　    《2》v-on绑定enter按键可以使用：（注意：这里的13就是.enter）[这里有错，具体错误看 响应式指令.html  只有点击了按钮之后才能使用enter按键]   

　　　　　　　　@keyup.13 = "bindEnter"

（7）v-repeat

（8）v-with

（9）v-if: 根据v-if的值，真假删除/插入元素

15、数据的处理方法

（1）当传来的数据是：messageStr: "第一个,第二个,第三个",

可以对数据进行这样处理：

<div>{{messageStr.split(",").reverse().join("|")}}</div>

16、Class与Style绑定

（1）*变量语法：v-bind:class="{'class-a':isA, 'class-b':isB}"      

 -->        data:{isA:true, isB:false}
（2）*对象语法：v-bind:class="classObj"                               

 -->        data:{classObj:{'class-a':true, 'class-b':false}

（3） *数组语法：v-bind:class='[classA, classB]'                       

 -->        data:{classA:'class-a', classB:'class-b'}

17、父组件向子组件传值

         （1）父组件：<input v-model="dialogmsg" type="text" />

         （2）然后给子组件容器一个自定义的:my-messages名称

　　　　　　<mydialog :my-messages="dialogmsg"></mydialog>

　　   （3）在子组件的js中：

　　　　　　需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线，并将短横线后的第一个字母改为大写的

　　　　　　比如：props: ["myMessages"],

　　　（4）子组件的template可以直接使用{{myMessages}}

18、子组件向父组件传值

    （1）在子组件的js中，触发事件

       比如：this.$dispatch("isShow", false);

    （2）在父组件的js中，创建实例时 `events`，监听事件

       比如：

       events: {

           'isShow': function(msg) { // 监听到 child-msg事件

               this.isShow = msg; // messages改变自动修改html内容

           }

        }

19、过滤(/排序)

    过滤可以是链式调用过滤器，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。

(1)filteBy

a)   filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表

b)   filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表

(2)orderBy

默认的排序是升序，如果想要排序是降序的话，就在原本排序条件后面加上一个小于0的复数就可以啦

比如：orderBy sortParam -1

(3)链式

比如：v-for="book in books |filterBy '水' in 'name' | orderBy sortParam

20、{{*message}}

    插值，只会影响单次的改变，之后的改变不再发生变化，比如：

<input type="text" v-model="message">

           <span>{{*message}}</span>

21、created

    实例创建的初始化步骤，建立数据观察

22、$watch

    实时监测变化

    vm.$watch("message", function(newVal, oldVal) {

       console.info(newVal, "|",oldVal)

    });

24、参数特性

    （1）lazy

    在同步输入框与值的input里面，添加一个lazy特性，将其改动到change事件中同步。

    比如：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

    （2）number

    自动将用户的输入转为number类型。

比如：

<input v-model="age" number>

    （3）debounce

    设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

比如：

<input v-model="msg" debounce="500">

25、过渡

    在需要过渡的目标元素上使用transition特性，该特性可以和下面的资源一起使用：

    （1）v-if

    （2）v-show

    （3）v-for(只有插入和删除时触发，使用vue-animated-list插件)

    （4）组件动态

    （5）在组件的根节点上，并且被Vue实例DOM化，（比如：vm.$appendTo(el)）触

25、prop绑定类型

       默认是单向绑定，当父组件的属性改变时，将传给父组件，反之不会，这是为了防止子组件五一修改父组件的状态，这样的话，会让应用的数据难以理解，不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。

比较语法：

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

 

 

 

 

 

 

 

26、动画过渡

    (1)可以使用<transition name=”xx”>

    (2)为xx定义动画的样式

       <1>原本默认的样式

       <2>离开和进入的样式

           xx-enter,xx-leave{}

27、定义:class的样式

    比如：

    （1）<div :class="[typeClass]" >

    （2）props: {

           type: {

               type: String,

               default: 'info'

             },  

       },

（3）computed: {

           typeClass() {

              return `el-alert--${this.type}1`;//这里使用反单引号

           }

        } 

28、slot

    分发，是当某子组件不知道它的挂载点的内容是什么的时候，并且挂载点的内容有它的父组件决定的，可以使用slot元素来作为原始内容的插槽。

比如：

    父组件：

        <cc-button type="primary">主要按钮</cc-button>

子组件：

<button class="btn" :class="[btnType]">

           <slot></slot>

        </button>

显示：

29、@click.native

    可以让一个子组件直接当前页面写click的监听事件，其他事件也是如此

    比如：<cc-button @click.native="open">弹出框message</cc-button>

 

更多的话，会及时更新~

1、  Vue 指定id

一个页面中要给要使用Vue的地方指定一个id，把他赋值给el。

比如：

<div id="app">

           <h1>{{message}}</h1>

           <input type="text" v-model="message">

           <span>

               {{ $data.message}}

           </span>

    </div>

 

new Vue({

              el: "#app", //选定id

               data: {

                  message: "Hello World!" // 输出message的内容

               }

        });

2、  Vue给值和内容

有两种给值的方法：

法一：

(1)     给输入框v-model=”vueText”

(2)     给一个标签填值：{{ vueText }}

法二：

(1)     给输入框v-model=”vueText”

(2)     在js中：给data传值

new Vue({

       el: "#app", //选定id

    data: {

           vueText: "Hello World!" // 输出message的内容

    }

});

(3)     给标签填值：{{$data.vueText}}

3、  Vue事件

在html中，事件的方法用@click=”clickListener”

在js中，方法具体执行用：

new Vue({

               el: "#vueForm",

              data: {

                  username: ""

              },

              methods: {

                  clickListener: function() {

                     alert(this.username);

                  }

              }

        });

注意：当要传入event时，可以使用$event

        @:click="say('hello!', $event)

4、  Vue组件化一

使用方法 ：

(1)<custom>中声明name属性,其中custom和name都是可以自定义的，但是属性要注意，全是小写字母才可以

                   (2)定义一个模板<template>，用来设置刚才定义的<custom>

                   (3)js中创建Vue

new Vue({

              el: '#app'

           })

(4)     js中给Vue组件化处理

Vue.component('custom', {

              template: '#template', // 模板对应的id

              props: ['name'], // <custom>对应的属性

              data: function() {

                  return {

                     count: 0

                  }

              }

       });

注意：Vue.component 要放在new Vue()之前，不然会有警告

比如：

<div id="app">

           <custom name="赞"></custom>

           <custom name="踩"></custom>

       </div>

       <template id="template">

           <h1>{{name}}</h1>

           <button @click="count += 1">{{count}}</button>

       </template>

       <script type="text/javascript" src="js/vue.js" ></script>

       <script>

           Vue.component('custom', {

              template: '#template',

              props: ['name'],

              data: function() {

                  return {

                     count: 0

                  }

              }

           });

           new Vue({

              el: '#app'

           })

    </script>

5、  Vue组件化二

比如：

// 定义

var Tree = Vue.extend({

  template: '<div>This is a tree!</div>'

});

// 注册

Vue.component('tree', Tree);

// 开始渲染

new Vue({

  el: '#box'

});

6、  Vue组件化三

使用方法： 直接在new Vue里面添加对象：computed

比如：

new Vue({

                      el: '#app',

                     data: {

                         points: 300,

                     },

                     computed: {

                         level: function() {

                             if (this.points <= 200) {

                                return '普通会员'

                            }

                            return 'VIP会员'

                         }

                     }

                  })

 

7、  Vue循环

用法：v-for='item in items'    
           v-for='(index, item) in items'    *数组则是索引，遍历对象则是键

比如：

v-for = ‘book in books’

8、  指令缩写

v-bind可以缩写为:

v-on:可以缩写为@

比如：

<a v-bind:href="url"></a>

<a :href="url"></a>

 

<button v-on:click="btnClick"></button>

<button @click="btnClick"></button>

9、  自定义的指令

Vue.directive()

比如：

Vue.directive('demo', {

  bind: function () {

    // 准备工作

    // 例如，添加事件处理器或只需要运行一次的高耗任务

  },

  update: function (newValue, oldValue) {

    // 值更新时的工作

    // 也会以初始值为参数调用一次

  },

  unbind: function () {

    // 清理工作

    // 例如，删除 bind() 添加的事件监听器

  }

})

10、              $remove

这是vue为数组扩展的删除的方法

比如：

        delBook:function(book){

       this.books.$remove(book);

  }

11、              v-if和v-else

 

12、              声明一个Vue构造函数

有两种使用方法：

（1）new Vue({

              el: “#id”

});

（2）var vm = new Vue();

          Vm.$el = “#id”

两者的区别是：如果放在里面的不用加$,如果是把对象提出来的话，那就要加上$，其他的对象名也是如此。

13、              观察

值得提醒的是，一旦数据被观察，Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补，我们会为被观察的对象增加 $add， $set和 $delete 方法。

14、              响应式指令

（1）v-attr

（2）v-style

（3）v-class

（4）v-text

                   设置之后，不管里面含有什么内容，里面的东西都会被替换掉

                     <div v-text="vText">

              <span>123</span>

           </div>

（5）v-show

                   通过true和false来控制元素是否显示

<div v-show="vShow">我是通过v-show来决定显不显示的</div>

（6）v-on

           常见的按键有提供别名：
            ·enter
            ·tab
            ·delete
            ·esc
            ·space
            ·up
            ·down
            ·left
            ·right

                   比如：

                   《1》阻止冒泡和默认行为：<a @click.stop.prevent='doThis' />

《2》v-on绑定enter按键可以使用：（注意：这里的13就是.enter）[这里有错，具体错误看响应式指令.html  只有点击了按钮之后才能使用enter按键]

                            @keyup.13 = "bindEnter"

（7）v-repeat

（8）v-with

（9）v-if: 根据v-if的值，真假删除/插入元素

15、              数据的处理方法

 

（1）当传来的数据是：messageStr: "第一个,第二个,第三个",

可以对数据进行这样处理：

<div>{{messageStr.split(",").reverse().join("|")}}</div>

16、              Class与Style绑定

（1）*变量语法：v-bind:class="{'class-a':isA, 'class-b':isB}"      

                       -->        data:{isA:true, isB:false}
（2）*对象语法：v-bind:class="classObj"                               

 -->        data:{classObj:{'class-a':true, 'class-b':false}

（3） *数组语法：v-bind:class='[classA, classB]'                       

 -->        data:{classA:'class-a', classB:'class-b'}

17、父组件向子组件传值

         （1）父组件：<input v-model="dialogmsg" type="text" />

         （2）然后给子组件容器一个自定义的:my-messages名称

<mydialog :my-messages="dialogmsg"></mydialog>

（3）在子组件的js中：

需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线，并将短横线后的第一个字母改为大写的

比如：props: ["myMessages"],

（4）子组件的template可以直接使用{{myMessages}}

18、子组件向父组件传值

    （1）在子组件的js中，触发事件

       比如：this.$dispatch("isShow", false);

    （2）在父组件的js中，创建实例时 `events`，监听事件

       比如：

       events: {

           'isShow': function(msg) { // 监听到 child-msg事件

               this.isShow = msg; // messages改变自动修改html内容

           }

        }

19、过滤(/排序)

    过滤可以是链式调用过滤器，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。

(1)filteBy

a)   filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表

b)   filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表

(2)orderBy

默认的排序是升序，如果想要排序是降序的话，就在原本排序条件后面加上一个小于0的复数就可以啦

比如：orderBy sortParam -1

(3)链式

比如：v-for="book in books |filterBy '水' in 'name' | orderBy sortParam

20、{{*message}}

    插值，只会影响单次的改变，之后的改变不再发生变化，比如：

<input type="text" v-model="message">

           <span>{{*message}}</span>

21、created

    实例创建的初始化步骤，建立数据观察

22、$watch

    实时监测变化

    vm.$watch("message", function(newVal, oldVal) {

       console.info(newVal, "|",oldVal)

    });

24、参数特性

    （1）lazy

    在同步输入框与值的input里面，添加一个lazy特性，将其改动到change事件中同步。

    比如：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg"lazy>

    （2）number

    自动将用户的输入转为number类型。

比如：

<input v-model="age"number>

    （3）debounce

    设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

比如：

<input v-model="msg"debounce="500">

25、过渡

    在需要过渡的目标元素上使用transition特性，该特性可以和下面的资源一起使用：

    （1）v-if

    （2）v-show

    （3）v-for(只有插入和删除时触发，使用vue-animated-list插件)

    （4）组件动态

    （5）在组件的根节点上，并且被Vue实例DOM化，（比如：vm.$appendTo(el)）触

25、prop绑定类型

       默认是单向绑定，当父组件的属性改变时，将传给父组件，反之不会，这是为了防止子组件五一修改父组件的状态，这样的话，会让应用的数据难以理解，不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。

比较语法：

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

26、动画过渡

    (1)可以使用<transition name=”xx”>

    (2)为xx定义动画的样式

       <1>原本默认的样式

       <2>离开和进入的样式

           xx-enter,xx-leave{}

27、定义:class的样式

    比如：

    （1）<div :class="[typeClass]" >

    （2）props: {

           type: {

               type: String,

               default: 'info'

             },  

       },

（3）computed: {

           typeClass() {

              return `el-alert--${this.type}1`;//这里使用反单引号

           }

        } 

28、slot

    分发，是当某子组件不知道它的挂载点的内容是什么的时候，并且挂载点的内容有它的父组件决定的，可以使用slot元素来作为原始内容的插槽。

比如：

    父组件：

        <cc-button type="primary">主要按钮</cc-button>

子组件：

<button class="btn" :class="[btnType]">

           <slot></slot>

        </button>

显示：

29、@click.native

    可以让一个子组件直接当前页面写click的监听事件，其他事件也是如此

    比如：<cc-button @click.native="open">弹出框message</cc-button>