随笔分类 - Vue
记录Vue学习笔记
摘要：axios.get('url地址', {params:{ 参数1：值1, 参数2：值2} }).then(function(response){ console.log(response); }).catch(function(error){ console.log(error); }) axios
阅读全文
摘要：由数字、26个英文字母或者下划线组成的字符串 ^[0-9a-zA-Z_]{1,}$ 或 ^/w+$ 由26个英文字母组成的字符串 ^[A-Za-z]+$ 只能输入数字 ^[0-9]*$ 只能输入n位数字 ^/d{n}$ 只能输入至少n位数字 ^/d{n,}$ 只能输入m-n位数字 ^/d{m,n}$
阅读全文
摘要：<input :value="text" @input="event => text = event.target.value"> v-model 指令帮我们简化上述步骤 <input v-model="text"> v-model会根据所使用元素自动使用对应的DOM属性和时间组合： 文本类型的<i
阅读全文
摘要：监听事件 用v-on指令或简写@来监听DOM事件，并在事件触发时执行对应的JS v-on:click="handler" 或 @click="handler" 这里的handler事件处理器的值可以是： 1.内联事件处理器：事件被触发时执行的内联JS语句（与onclick类似） data() { r
阅读全文
摘要：v-for 实现基于一个数组渲染一个列表 data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } <li v-for="item in items"> {{ item.message }} </li> 其中items
阅读全文
摘要：v-if 只有当表达式值为真时才被渲染 <h1 v-if="awesome">Vue is awesome!</h1> v-else <button @click="awesome = !awesome">Toggle(切换)</button> <h1 v-if="awesome">Vue is a
阅读全文
摘要：Class与Style绑定 Vue专门为class和style的v-bind用法提供了特殊的功能增强，除字符串外，表达式的值也可以是对象或数组 绑定HTML class 可以给 ：class(v-bind:class缩写)传递一个对象来动态切换class <div :class="{ active:
阅读全文
摘要：模板中的表达式虽然方便但只适合用来做简单的操作，因为如果在模板中写太多逻辑会让模板变得臃肿，难以维护，如下面这样一个对象： export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advance
阅读全文
摘要：模板语法 文本插值（text interpolation） 最基本的数据绑定形式，使用“Mustache”语法即{{...}} <span>Message:{{msg}}</span> {{}}中的值会被替换为相应组件实例中msg属性的值，且会同步地更新 原始HTML <p>Message:<spa
阅读全文
