vue 2.0学习心得

来源：互联网发布：windows备份恢复编辑：程序博客网时间：2024/06/05 16:52

vue 2.0学习心得

跟着vue2.0官网写的一些理解

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>vue</title></head><body>  <div id="app-2">    <span v-bind:title="message">      Hover your mouse over me for a few seconds to see my dynamically bound title!    </span>  </div>  <div id="app-4">    <ol>      <li v-for="todo in todos">        {{ todo.text }} {{ todo.name}}      </li>    </ol>  </div>  <div id="app-7">    <ol>      <newlabel></newlabel>    </ol>  </div>  <div id="app-8">    <ol>      <newlabels v-for="exam in exams" v-bind:dodo="exam"></newlabels>      <!-- 自定义标签 -->    </ol>  </div>  <div id="app1">    {{a}}  </div><p>  生命周期：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：  var vm = new Vue({    data: {      a: 1    },    created: function () {      // `this` 指向 vm 实例      console.log('a is: ' + this.a)    }  })  // -> "a is: 1"  在实例生命周期的不同阶段调用，如 mounted（被挂载时el）、 updated （被更新时）、destroyed 。（不同的阶段，不同的函数。想在不同阶段实现不同操作，就实现该函数）。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。</p>  <script src="js/vue.js"></script>  <script>  var app2 = new Vue({    el: '#app-2',    data: {      message: 'You loaded this page on ' + new Date()    }  })    var app4 = new Vue({      el: '#app-4',      data: {        todos: [          { text: 'Learn JavaScript', name:'oooo' },          { text: 'Learn Vue' , name:'11111' },          { text: 'Build something awesome',name:'2222'  }        ]      }    })    // Define a new component called todo-item    Vue.component('newlabel', {      template: '<li>This is a new list</li>'    })    var app7= new Vue({      el:'#app-7',    })    Vue.component('newlabels', {      props: ['dodo'],      // 子元素通过 props 接口实现了与父亲元素很好的解耦。      template: '<li>{{dodo.text}}</li>'    })    var app8= new Vue({      el:'#app-8',      data:{        exams:[          { text:'aaaaaaaaaa' },          { text:'bbbbbbbbbb' },          { text:'ccccccccccccccccccccccc' }        ]      }    })    var app1 = new Vue({      el:'#app1',      data:{        a:1      }    })    // app1.$data    //app1.$el    app1.$watch('a',function(n,o){      console.log(n + ':' + o );    });    // $watch 是一个实例方法// vm.$watch('a', function (newVal, oldVal) {//   // 这个回调将在 `vm.a`  改变后调用// })    // 控制 台app1.a = 3   a的值改变会执行$watch方法监控a，n为新值，o为旧值  </script></body></html>

模板语法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>vue 模板语法</title>  <style>  button{    border: 1px solid #ddd;    width: 50px;    height: 30px;  }  </style></head><body>  <p>  a1>>>  使用 JavaScript 表达式  在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。  {{ number + 1 }} -----(可在花括号内歇js完整的单个表达式，即不能换行，)  {{ ok ? 'YES' : 'NO' }}  {{ message.split('').reverse().join('') }}  <div v-bind:id="'list-' + id"></div>  这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。  <!-- 这是语句，不是表达式 -->  {{ var a = 1 }}  <!-- 流控制也不会生效，请使用三元表达式 -->  {{ if (ok) { return message } }}  指令  指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。让我们回顾一下在介绍里的例子：  <p v-if="seen">Now you see me</p>  这里， v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。  参数  一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：  <a v-bind:href="url"></a>  在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。  另一个例子是 v-on 指令，它用于监听 DOM 事件：  <a v-on:click="doSomething">  在这里参数是监听的事件名。我们也会更详细地讨论事件处理。  修饰符  修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：  <form v-on:submit.prevent="onSubmit"></form>  a3>>>过滤器  Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：  {{ message | capitalize }}  <!-- in mustaches -->  {{ message | capitalize }}  <!-- in v-bind -->  v-bind 缩写  <!-- 完整语法 -->  <a v-bind:href="url"></a>  <!-- 缩写 -->  <a :href="url"></a>  v-on 缩写  <!-- 完整语法 -->  <a v-on:click="doSomething"></a>  <!-- 缩写 -->  <a @click="doSomething"></a>  <div v-bind:id="rawId | formatId"></div>  Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。  </p>  <div id="a1">      <div v-html="rawHtml"></div>      <div>{{num + 1}}</div>      <div>{{arr.join('|')}}</div>      <div v-bind:id="'list-' + idname"></div>  </div>  <div id="a2">    <input type="checkbox" v-on:click=oncheck>    <button v-bind:disabled="isdisabled">btn</button>  </div>  <div id="a3">    <div>文件格式：{{filename | getExt}}</div>  </div>  <script src="js/vue.js" charset="utf-8"></script>  <script>      var a1 = new Vue({        el:'#a1',        data:{          rawHtml:'<h1 class=aaa>demo1111</h1><h5>demo222</h5>',          num:7,          arr:[11111,2222,333333,44444,55555555,6666],          idname:'idd'        }      });      var a2 = new Vue({        el:'#a2',        data:{          isdisabled:true        },        methods:{          oncheck:function(evt) {            var ch = evt.target;            if (ch.checked){              this.isdisabled = false;            }else{              this.isdisabled = true;            }            // console.log(arguments);            // console.log(evt.target);          }        }      });      var a3 = new Vue({        el:'#a3',        data:{            filename:'a.png'        },        filters:{          getExt:function(val){            console.log(val);            return val.substr(val.indexOf('.'));          }        }      });  </script></body></html>

计算属性

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>vue计算属性</title></head><body>  <div id="a1">    <p>原始message: "{{ message }}"</p>    <p>计算后message: "{{ changemsg }}"</p>    <p>计算缓存 message: "{{ getmsg() }}"</p>    <button v-on:click="onCLick">计算message:</button>  </div>  <script src="js/vue.js" charset="utf-8"></script>  <script>      // var a1 = new Vue({      //   el:'#a1',      //   data:{      //     message:'Hello i am a demo'      //   },      //   computed:{      //     changemsg:function(){      //       // `this` points to the vm instance      //       return this.message.split('').reverse().join('')      //       // console.log(a1.changemsg) // -> 'olleH'      //       // a1.message = 'Goodbye'      //       // console.log(a1.changemsg) // -> 'eybdooG'      //     }      //   },      //   methods:{      //     getmsg:function(){      //       return this.message.split('').reverse().join('')      //     },      //     onCLick:function(){      //       console.log(this.changemsg);      //       console.log(this.getmsg());      //     }      //   }      // });// 不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 changemsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，每当重新渲染的时候，method 调用总会执行函数。var a1 = new Vue({  el:'#a1',  data:{    message:'Hello i am a demo'  },  computed:{    changemsg:function(){      // `this` points to the vm instance      return this.message.split('').reverse().join('') + Date.now();      // console.log(a1.changemsg) // -> 'olleH'      // a1.message = 'Goodbye'      // console.log(a1.changemsg) // -> 'eybdooG'    }  },  methods:{    getmsg:function(){      return this.message.split('').reverse().join('') + Date.now();    },    onCLick:function(){      console.log(this.changemsg);      console.log(this.getmsg());    }  }});// 我们为什么需要缓存？假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。// this指向a1,a1代理data属性  </script></body></html>

0 0