Vue.js基础

最新推荐文章于 2024-04-08 22:02:54 发布

一米阳光MM

最新推荐文章于 2024-04-08 22:02:54 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43215246/article/details/124529611

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue 实例

通过 Vue 函数创建

    new Vue({});

el 选项

可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。

    // 1、使用 css 选择器
    /* var vm = new Vue({
      el: '#app'
    });
    // 2、HTMLElement 实例
    /* var app = document.querySelector('#app');
    var vm = new Vue({
      el: app
    });
    //
    var app = document.getElementById('app');
    var vm = new Vue({});
    // vm.$mount('#app');
    vm.$mount(app);
    console.log(vm.$el);

未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。

    var app = document.getElementById('app');
    var vm = new Vue({});
    // 1、css 选择器选择
    // vm.$mount('#app');
    // 2、HTMLElement 实例
    vm.$mount(app);

插值表达式

挂在元素内部可以使用 Vue.js 的模版语法，模版中可以通过差值表达式为元素进行动态内容设置，写法为 {{}}

  <div id="demo">
    <ul>
      <li>基本运算：{{ 2 + 2 }}</li>
      <li>三元运算：{{ 1 > 2 ? '1 > 2' : '1 < 2' }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo'
    })
  </script>

注意：

插值表达式只能书写在标签内容区域，可以与其它内容混合。
内部只能书写 JavaScript 表达式，不能书写语句

data 选项

用于存储 Vue 实例需要使用的数据，值为对象类型
data 中的数据可以通过 vm.$data.数据或 vm.数据访问
data 中的数据可以直接在视图中通过插值表达式访问
data 中的数据为响应式数据，在发生改变时，视图会自动更新

<body>
  <div id="demo">
    <ul>
      <li>第一个 li 的内容：{{ content}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: "hello vue data!"
      }
    })
    vm.content = '你好啊！'
  </script>
</body>

data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作

<body>
  <div id="demo">
    <ul>
      <li>第一个 li 的内容：{{ content[0] }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: ['zm', 'oy']
      }
    })
    Vue.set(vm.content, 0, 'zx')
  </script>
</body>

methods 选项

用于存储需要在 Vue 实例中使用的函数
methods 中的方法可以通过 vm.方法名访问
方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能

<body>
  <div id="demo">
    <ul>
      <li>第一个 li 的内容：{{ fn() }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: 'z-m'
      },
      methods: {
        fn () {
          return this.fn1(this.content.split('-').join(''))
        },
        fn1 (value) {
          return value.toUpperCase()
        }
      }
    })
    Vue.set(vm.content, 0, 'zx')
  </script>
</body>

Vue.js 指令

指令的本质就是 HTML 自定义属性
Vue.js 的指令就是以 v- 开头的自定义属性

内容处理

v-once 指令

使元素的插值表达式只生效一次

<body>
  <div id="demo">
    <ul>
      <li v-once>第一个 li 的内容：{{ content }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: 'z-m'
      }
    })
    vm.content = 'ZM' // 第一个 li 的内容还展示 z-m
  </script>
</body>

v-text 指令

元素内容整体替换为指定纯文本数据

<body>
  <div id="demo">
    <ul>
      <li v-text="content">第一个 li 的内容</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '数据中的 content' // 最终 li 中的内容展示该值
      }
    })
  </script>
</body>

v-html 指令

元素内容整体替换为指定的 HTML 文本

<body>
  <div id="demo">
    <ul v-html="content">
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '<li>数据中的content</li>' 
      }
    })
  </script>
</body>

属性绑定

v-bind 指令

v-bind 用于动态绑定 html 属性
Vue.js 还为 v-bind 指令提供了简写方式
如果需要一次绑定多个属性，还可以绑定对象
与插值表达式类似，v-bind 中也允许使用表达式

<body>
  <div id="demo">
    <!-- <p v-bind:title="title">test</p> -->
    <!-- <p :title="title">test</p> -->
    <!-- <p v-bind="obj">test</p> -->
    <p v-bind:class="prex + ext">test</p>

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        prex: '测试',
        ext: 'v-bind使用插值表达式',
        obj: {
          id: 'success',
          title: 'v-bind 动态绑定title'
        }
      }
    })
  </script>
</body>

Class 绑定

class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存

<body>
  <div id="demo">
    <p class="b" :class="a">test</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        a: '动态绑定的class'
      }
    })
  </script>
</body>

对于 class 绑定， Vue.js 中还提供了特殊处理方式

<body>
  <div id="demo">
    <p :class="{a: isA, b: isB, 'c': true}">test</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        isA: true,
        isB: false
      }
    })
  </script>
</body>

<body>
  <div id="demo">
    <p :class="['a', 'b', {c: isC}]">test</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        isC: true
      }
    })
  </script>
</body>

Style 绑定

style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存
当我们希望给元素绑定多个样式对象时，可以设置为数组

<body>
  <div id="demo">
    <div :style="[styleObj1, styleObj2]" style="color: blue;">test</div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        styleObj1: {
          width: '100px',
          height: '100px'
        },
        styleObj2: {
          border: '1px solid #ccc'
        }
      }
    })
  </script>
</body>

渲染指令

v-for 指令

用于遍历数据渲染结构，常用的数组与对象均可遍历

<body>
  <div id="demo">
    <ul>
      <li v-for="item in arr">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in obj">{{ item }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        arr: ['a', 'b', 'c'],
        obj: {
          first: 'zhang',
          second: 'meng'
        }
      }
    })
  </script>
</body>

使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题

<body>
  <div id="demo">
    <ul>
      <li v-for="item in obj" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        obj: [
          {
            id: 0,
            name: 'zhang'
          },
          {
            id: 1,
            name: 'meng'
          }
        ]
      }
    })
  </script>
</body>

通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作

<body>
  <div id="app">
    <template v-for="item in obj">
      <span>{{ item }}</span>
      <br>
    </template>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          content1: '内容1',
          content2: '内容2',
          content3: '内容3'
        }
      }
    })
  </script>
</body>

v-show 指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用

<body>
  <div id="demo">
    <p v-show="true">这个 p 标签会展示</p>
    <p v-show="false">这个 p 标签会隐藏</p>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo'
    })
  </script>
</body>

<template> 无法使用 v-show 指令

v-if 指令

用于根据条件控制元素的创建与移除

<body>
  <div id="demo">
    <p v-if="false">这个 p 标签不会展示</p>
    <p v-else-if="true">这个 p 标签会展示</p>
    <p v-else>这个 p 标签不会展示</p>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo'
    })
  </script>
</body>

给使用 v-if 的同类型元素绑定不同的 key

<body>
  <div id="demo">
    <div v-if="type === 'username'" :key="username">
      用户名：<input type="text">
    </div>
    <div v-else :key="email">
      邮&nbsp&nbsp&nbsp箱：<input type="text">
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        type: 'username'
      }
    })
  </script>
</body>

出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签

<body>
  <div id="app">
    <ul v-if="false">
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
       items: {
         content1: '内容1',
         content2: '内容2',
         content3: '内容3'
       }
      }
    });
  </script>
</body>

事件处理

v-on 指令

用于进行元素的事件绑定

<body>
   <div id="demo">
    <p v-show="true">{{ content }}</p>
    <button v-on:click="content='新内容'">点击</button>
   </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '默认内容'
      }
    })
  </script>
</body>

Vue.js 还为 v-on 指令提供了简写方式

<body>
   <div id="demo">
    <p v-show="true">{{ content }}</p>
    <button @click="content='新内容'">点击</button>
   </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '默认内容'
      }
    })
  </script>
</body>

事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序

<body>
   <div id="demo">
    <p v-show="true">{{ content }}</p>
    <button @click="fn()">点击</button>
   </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '默认内容'
      },
      methods: {
        fn() {
          this.content='新内容'
        }
      }
    })
  </script>
</body>

设置事件处理程序后，可以从参数中接收事件对象

<body>
   <div id="demo">
    <p v-show="true">{{ content }}</p>
    <button @click="fn">点击</button>
   </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '默认内容'
      },
      methods: {
        fn (event) {
          this.content='新内容'
          console.log(event)
        }
      }
    })
  </script>
</body>

在视图中可以通过 $event 访问事件对象

<body>
   <div id="demo">
    <p v-show="true">{{ content }}</p>
    <button @click="fn('新的内容', $event)">点击</button>
   </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        content: '默认内容'
      },
      methods: {
        fn (value, event) {
          this.content = value
          console.log(value, event)
        }
      }
    })
  </script>
</body>

表单输入绑定

v-model 指令

用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定

输入框绑定

输入框分为单行输入框 input 与多行输入框 textarea

<body>
   <div id="demo">
    <p>input 输入框的值：{{ value1 }}</p>
    input  输入框：<input type="text" v-model="value1">
    <p>textarea 输入框的值：{{ value2 }}</p>
    textarea 输入框<textarea type="text" v-model="value2"></textarea>
   </div>
   
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value1: '',
        value2: ''
      }
    })
  </script>
</body>

单选按钮绑定

<body>
   <div id="demo">
    <p>单选框：{{ value }}</p>
    <input type="radio" id="one" value="1" v-model="value">
    <label for="one">选项1</label>
    <input type="radio" id="two" value="2" v-model="value">
    <label for="two">选项2</label>
   </div>
   
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      }
    })
  </script>
</body>

复选框绑定

复选框绑定分为单个选项与多个选项两种情况，书写方式不同

   <body>
   <div id="demo">
     <!-- 展示是否选中 true/false -->
    <p>复选框-单选项：{{ value }}</p>
    <input type="checkbox" id="item" value="选项内容" v-model="value">
    <label for="item">选项</label>

    <!-- 展示被选中的 value -->
    <p>复选框-多选项：{{ value1 }}</p>
    <input type="checkbox" id="one" value="选项一内容" v-model="value1">
    <label for="one">选项一</label>
    <input type="checkbox" id="two" value="选项二内容" v-model="value1">
    <label for="two">选项二</label>
   </div>
   
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: '',
        value1: []
      }
    })
  </script>
</body>

选择框绑定

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同

<body>
  <div id="app">
    <!-- 单选选择框 -->
    <p>单选选择框的内容: {{ value6 }}</p>
    <select v-model="value6">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>

    <!-- 多选选择框 -->
    <p>多选选择框的内容：{{ value7 }}</p>
    <select v-model="value7" multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value6: '',
        value7: []
      }
    });
  </script>
</body>

修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作

事件修饰符

.prevent 修饰符

用于阻止默认事件行为，相当于 event.preventDefault()


<body>
  <div @click="fn1" id="demo">
    <a @click.prevent="fn" href="www.baidu.com">a链接</a>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          console.log('a 的点击事件')
        },
        fn1 () {
          console.log('div 的点击事件')
        }
      }
    })
  </script>
</body>

.stop 修饰符

用于阻止事件传播，相当于 event.stopPropagation()
Vue.js 中允许修饰符进行连写，例如:@click.prevent.stop

<body>
  <div @click="fn1" id="demo">
    <!-- 阻止冒泡 -->
    <!-- <a @click.stop="fn" href="https://kaiwu.lagou.com/">a链接</a> -->
    <!-- 阻止冒泡并阻止默认行为 -->
    <a @click.prevent.stop="fn" href="www.baidu.com">a链接</a>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          console.log('a 的点击事件')
        },
        fn1 () {
          console.log('div 的点击事件')
        }
      }
    })
  </script>
</body>

.onece 修饰符

用于设置事件只会触发一次

<body>
  <div id="demo">
    <button @click="fn">按钮1</button>
    <!-- 用于设置事件只会触发一次 -->
    <button @click.once="fn">按钮2</button>

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          console.log('a 的点击事件')
        }
      }
    })
  </script>
</body>

按键修饰符

按键码

<body>
  <div id="demo">
   <!-- <input type="text" @keyup="fn"> -->
   <!-- <input type="text" @keyup.a="fn"> -->
   <!-- <input type="text" @keyup.97="fn"> -->
   <!-- <input type="text" @keyup.esc="fn"> -->
   <input type="text" @keyup.a.b.c="fn">

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          console.log('触发按键事件')
        }
      }
    })
  </script>
</body>

特殊按键

特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名

<!-- <input type="text" @keyup.esc="fn"> -->

系统修饰符

系统按键指的是 ctrl 、alt 、shift 等按键
单独点击系统操作符无效
系统按键通常与其他按键组合使用

<body>
  <div id="demo">
   <input type="text" @keyup.ctrl.q="fn" v-model="value">

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          this.value = ''
        }
      }
    })
  </script>
</body>

鼠标按键修饰符

用于设置点击事件由鼠标哪个按键来完成

<body>
  <div id="demo">
    <button @click.left="fn">按钮1</button>
    <button @click.right="fn">按钮2</button>
    <button @click.middle="fn">按钮3</button>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      },
      methods: {
        fn () {
          console.log('点击事件')
        }
      }
    })
  </script>
</body>

v-model 修饰符

trim 修饰符：用于自动过滤用户输入内容首尾两端的空格
lazy 修饰符：用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发
number 修饰符：用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容

<body>
  <div id="demo">
    <!-- <p>{{ value }}</p>
    <input type="text" v-model.trim="value"> -->
    <!-- <p>{{ value }}</p>
    <input type="text" v-model.lazy="value"> -->
    <p>{{ value }}</p>
    <input type="text" v-model.number="value">
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: ''
      }
    })
  </script>
</body>

自定义指令

自定义全局指令

指的是可以被任意 Vue 实例或组件使用的指令

<body>
  <div id="demo">
    <input type="text" v-focus>
  </div>
  <div id="demo1">
    <input type="text" v-focus>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    Vue.directive('focus', {
      inserted: function (el) {
        console.log(el)
        el.focus()
      }
    })
    new Vue({
      el: '#demo',
      data: {}
    })
    new Vue({
      el: '#demo1',
      data: {}
    })
  </script>
</body>

自定义局部指令

指的是可以在当前 Vue 实例或组件内使用的指令

<body>
  <div id="demo">
    <input type="text" v-focus>
  </div>
  <!-- 报错 -->
  <!-- <div id="demo1">
    <input type="text" v-focus>
  </div> -->
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#demo1',
      data: {}
    })
    new Vue({
      el: '#demo',
      data: {},
      directives: {
        focus: {
          inserted(el) {
            console.log(el)
            el.focus()
          }
        }
      }
    })

  </script>
</body>

过滤器

过滤器用于进行文本内容格式化处理
过滤器可以在插值表达式和 v-bind 中使用

全局过滤器

<body>
  <div id="demo">
    <!-- v-model 不能使用过滤器 -->
    <!-- <input type="text" v-model="value"> -->
    <p :title="value | filterA">这是全局过滤器</p>
    <p>
      {{ value | filterA }}
    </p>
  </div>
  <div id="demo1">
    <p>
      {{ 'h-h-h' | filterA }}
    </p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    Vue.filter('filterA',function (value) {
      return value.split('-').join('')
    })
    new Vue({
      el: '#demo',
      data: {
        value: 'a-b-c',
      }
    })
    new Vue({
      el: '#demo1',
      data: {
        
      }
    })
  </script>
</body>

可以将一个数据传入到多个过滤器中进行处理
一个过滤器可以传入多个参数

<body>
  <div id="demo">
    <!-- v-model 不能使用过滤器 -->
    <!-- <input type="text" v-model="value"> -->
    <p :title="value | filterA('d', 'e') | filterB">这是全局过滤器</p>
    <p>
      {{ value | filterA('d', 'e') | filterB}}
    </p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    Vue.filter('filterA',function (value1, value2, value3) {
      return value1.split('-').join('') + value2 + value3
    })
    Vue.filter('filterB',function (value) {
      return value.toUpperCase()
    })
    new Vue({
      el: '#demo',
      data: {
        value: 'a-b-c',
      }
    })
  </script>
</body>

局部过滤器

<body>
  <div id="demo">
    <p :title="value | filterA">这是局部过滤器</p>
    <p>
      {{ value | filterA }}
    </p>
  </div>

  <!-- filterA 为局部过滤器 -->
  <!-- <div id="demo1">
    <p>
      {{ value | filterA }}
    </p>
  </div> -->

  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        value: 'a-b-c',
      },
      filters: {
        filterA : function (value) {
          return value.split('-').join('')
        }
      }
    })
    // new Vue({
    //   el: '#demo1',
    //   data: {
    //     value: 'h-h-h'
    //   }
    // })
  </script>
</body>

计算属性

Vue.js 的视图不建议书写复杂逻辑，这样不利于维护

<body>
  <div id="demo">
    <p>{{ Math.max.apply(null, arr) }}</p>
    <p>{{ Math.max.apply(null, arr) }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        arr: [1, 2, 3],
      }
    })

  </script>
</body>

封装函数是很好的方式，但有时重复的计算会消耗不必要的性能

  <div id="demo">
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        arr: [1, 2, 3],
      },
      methods: {
        getSum () {
          var sum = 0
          for (var i = 0; i < this.arr.length; i++) {
            sum += this.arr[i]
          }
          return sum
        }
      }
    })

  </script>
</body>

计算属性使用时为属性形式，访问时会自动执行对应函数

<body>
  <div id="demo">
    <!-- <p>{{ Math.max.apply(null, arr) }}</p>
    <p>{{ Math.max.apply(null, arr) }}</p> -->
    <p>{{ getSum }}</p>
    <p>{{ getSum }}</p>
    <p>{{ getSum }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        arr: [1, 2, 3],
      },
      computed: {
        getSum () {
          var sum = 0
          for (var i = 0; i < this.arr.length; i++) {
            sum += this.arr[i]
          }
          return sum
        }
      }
    })

  </script>
</body>

methods 与 computed 区别

computed 具有缓存，methods 没有
computed 通过属性名访问，methods 需要调用
computed 仅适用于计算操作

计算属性的 setter

计算属性默认只有 getter，Vue.js 也允许给计算属性设置 setter

<body>
  <div id="demo">
    <p>{{ fullName }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        secondName: 'meng'
      },
      computed: {
        fullName: {
          get () {
            return this.firstName + this.secondName
          },
          set (value) {
            var arr = value.split(' ')
            this.firstName = arr[0]
            this.secondName = arr[1]
          }
        }
      }
    })

  </script>
</body>

侦听器

侦听器用于监听数据变化并执行指定操作
为了监听对象内部值的变化，需要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数
⚠️：
当更改(非替换)数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象
数组操作不要使用索引与length，无法触发侦听器函数

<body>
  <div id="demo">
    <p>{{ value }}</p>
    <p>{{ getSum }}</p>
    <p>{{ obj.firstName + obj.secondName }}</p>

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#demo',
      data: {
        value: '默认内容',
        arr: [1, 2, 3],
        obj: {
          firstName: 'z',
          secondName: 'm'
        }
      },
      computed: {
        getSum () {
          var sum = 0
          for (var i = 0; i < this.arr.length; i++) {
            sum += this.arr[i]
          }
          return sum
        }
      },
      watch: {
        value (val, oldVal) {
          console.log('value 被修改了', val, oldVal)
        },
        arr (val, oldVal) {
          console.log('数组被修改了', val, oldVal)
        },
        // 只有对象被本身被修改，可以使用该方法
        // obj (val, oldVal) {
        //   console.log('对象被修改了', val, oldVal)
        // }
        obj: {
          deep: true,
          handler (val, oldVal) {
            console.log('对象被修改了', val, oldVal)
          }
        }
      }
    })

  </script>
</body>

Vue.js 生命周期

创建阶段

beforeCreate:实例初始化之前调用
created: 实例创建后调用
beforeMount:实例挂载之前调用
mounted: 实例挂载完毕
特点：每个实例只能执行一次

运行阶段

beforeUpdate:数据更新后，视图更新前调用
updated: 视图更新后调用
特点：按需调用

销毁阶段

beforeDestroy:实例销毁之前调用
destroyed: 实例销毁后调用
特点：每个实例只能执行一次

一米阳光MM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基础

Vue 实例通过 Vue 函数创建 new Vue({});el 选项可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。 // 1、使用 css 选择器 /* var vm = new Vue({ el: '#app' }); // 2、HTMLElement 实例 /* var app = document.querySelector('#app'); var vm
复制链接

扫一扫