Vue实例属性和实例方法

末蓝、 2021-07-25 12:34 596阅读 0赞

目录

一,常用的实例属性:

二,常用的实例方法:

1,实例方法set ,delete

2,实例方法watch

3,实例方法-生命周期


Vue实例属性:vue实例直接调用的属性;

一,常用的实例属性:

  1. vm.$data:获取属性;
  2. vm.$el:获取实例挂载的元素;
  3. vm.$options:获取自定义选项/属性/函数;
  4. vm.$refs:获取通过ref属性注册的DOM对象;

    <!DOCTYPE html>




    05_InstanceProperties





    {
    {msg}}


    Hello


    Vue






20190915132315852.pngwatermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

二,常用的实例方法:

数据:

  • vm.$set:设置属性值;
  • vm.$delete:删除属性值;
  • vm.$watch:观测数据变化;

生命周期

  • vm.$mount:手动挂载Vue实例;
  • vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听;
  • vm.$nextTick:将方法中的回调函数,延迟到DOM更新后;

1,实例方法set ,delete

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>06_InstanceMethod</title>
  6. <script type="text/javascript" src="../js/vue.js" ></script>
  7. </head>
  8. <body>
  9. <div>
  10. Id:<span>{
  11. {user.id}}</span><br />
  12. 用户名:<span>{
  13. {user.username}}</span><br />
  14. <button @click="changeUsername">changeUsername</button><br />
  15. <button @click="addId">addId</button><br />
  16. <button @click="delId">delId</button>
  17. </div>
  18. </body>
  19. <script>
  20. let vm = new Vue({
  21. el : 'div',
  22. data : {
  23. user : {
  24. username : 'Joey'
  25. }
  26. },
  27. methods : {
  28. changeUsername(){
  29. this.user.username = 'sikiedu-Joey';
  30. },
  31. addId(){
  32. //this.$set(this.user, 'id', 1); 局部的
  33. //Vue.set(this.user, 'id', 1); 全局的
  34. if(this.user.id){
  35. this.user.id++;
  36. }else{
  37. Vue.set(this.user, 'id', 1);
  38. }
  39. console.log(this.user.id);
  40. },
  41. delId(){
  42. if(this.user.id){
  43. //this.$delete(this.user, 'id');
  44. Vue.delete(this.user, 'id');
  45. }
  46. }
  47. }
  48. });
  49. </script>
  50. </html>

20190915132901761.png20190915132939451.png

2,实例方法watch

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>07_InstanceMethod_watch</title>
  6. <script type="text/javascript" src="../js/vue.js" ></script>
  7. </head>
  8. <body>
  9. <div>
  10. <input type="text" v-model="msg" /><br />
  11. msg : <span>{
  12. {msg}}</span><br />
  13. <input type="text" v-model="num" /><br />
  14. num : <span>{
  15. {num}}</span><br />
  16. <button onclick="unWatch()">unWatch</button>
  17. </div>
  18. </body>
  19. <script>
  20. let vm = new Vue({
  21. el : 'div',
  22. data : {
  23. msg : 'Joey',
  24. num : 1,
  25. user : {
  26. id : '01',
  27. username : 'sikiedu'
  28. }
  29. },
  30. watch : {
  31. num : function(newValue, oldValue){
  32. console.log("修改了num 旧值= " + oldValue + " 新值= " + newValue);
  33. }
  34. }
  35. });
  36. let unwatch = vm.$watch('msg', function(newValue, oldValue){
  37. console.log("修改了msg 旧值= " + oldValue + " 新值= " + newValue);
  38. });
  39. function unWatch(){
  40. unwatch();
  41. console.log("点击了unwatch按钮")
  42. }
  43. </script>
  44. </html>

2019091514054763.gif20190915140533731.png

3,实例方法-生命周期

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>08_InstanceMethod_lifeCycle</title>
  6. <script type="text/javascript" src="../js/vue.js" ></script>
  7. </head>
  8. <body>
  9. <div id="sikiedu">
  10. <input type="text" v-model="msg" /><br />
  11. msg : <span>{
  12. {msg}}</span><br />
  13. <button onclick="_destroy()">销毁</button><br /><br />
  14. oldName : <span ref='oldName'>{
  15. {oldName}}</span><br />
  16. newName : <span>{
  17. {newName}}</span>
  18. </div>
  19. </body>
  20. <script>
  21. let vm = new Vue({
  22. //el : 'div',
  23. data : {
  24. msg : 'Joey',
  25. oldName : 'AAA',
  26. newName : 'BBB'
  27. }
  28. });
  29. vm.$mount('#sikiedu');
  30. vm.oldName = 'CCC';
  31. //vm.newName = vm.$refs.oldName.textContent;
  32. // vm.$nextTick(function(){
  33. // vm.newName = vm.$refs.oldName.textContent;
  34. // });
  35. Vue.nextTick(function(){
  36. vm.newName = vm.$refs.oldName.textContent;
  37. });
  38. function _destroy(){
  39. vm.$destroy();
  40. }
  41. </script>
  42. </html>

20190915162750296.png

发表评论

表情:
评论列表 (有 0 条评论,596人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue实例方法

      这次我们介绍Vue实例提供的一些有用的属性和方法,这些属性和方法名都以前缀$开头。 一、实例属性 1.组件树访问  $parent  用来访问当前组件实例的父实