Vue
只在兼容ES5
的浏览器下有用。
使用Vue Devtools
可以审查和调试Vue
应用
创建一个Vue
实例
{{ message }}
、{{number + 1}}
、 {{ ok ? 'YES' : 'NO' }}
、 {{ message.split('').reverse().join('') }}
这种大括号的形式叫做Mustache
,它是插值表达式
不能在Mustache
里面使用var
、let
或者if
这样的命令,不能在里面尝试访问用户定义的全局变量
v-once
指令会让该节点下面的Mustache
里面的变量渲染后不会再次改变
v-
开头的叫做指令
v-html
可以将HTML
直接渲染到DOM
里面,注意XSS
攻击,绝不要对用户提供的内容使用该指令,Vue
已经对script
标签的XSS
攻击做了限制
let vm = new Vue({
el: "#app",
data: { // 写一些数据
message: "Hello" // vm.message = "xx" 可以响应式的修改这个值
}
});
data
属性中可以引用外面的一个对象,这时改变外面对象中的值,Vue
里面的data
也改变,改变Vue
里面data
的值,外面的对象中的属性也改变
只有当实例被创建时就已经存在于data
中的属性才是响应式的。所以说,设置一些初值非常重要。
如果非要创建后加入值,使用Vue.set(object, propertyName, value)
或vm.$set(object, propertyName, value)
,但是注意不允许动态添加根级响应式属性(data
)
Object.freeze()
会阻止修改现有的属性
Vue
实例暴露了一些实例属性与方法,都有$
前缀,例如:$data
、$el
、$watch
等
生命周期
beforeCreate
:Vue
初始化时执行,这个时候还不能使用this
获取到里面的methods
和data
created
:创建完成Vue
实例的时候执行,这个时候已经可以使用this
获取到里面的methods
和data
了
beforeMount
:渲染页面之前执行,这个时候页面上的Mustache
并没有被渲染
mounted
: 渲染页面完成执行,这个时候页面上的Mustache
已经被渲染了
beforeUpdate
:Vue
中数据改变之前执行
updated
:Vue
数据改变完成执行
beforeDestroy
:销毁实例之前执行
destroyed
:销毁实例之后执行
千万不要在选项属性或回调上使用箭头函数,因为这将无法用this
来指向Vue
实例
为data
中的对象动态的添加多个属性:
vm.srcObject/*原来的对象*/ = Object.assign({}, vm.srcObject/* 原来的对象 */, {/* 添加多个属性 */});
v-bind指令
html
页面标签的属性里面不能使用{{}}
v-bind:title="message"
这里的messgae
是一个Vue
数据,如果要使用字符串需要使用v-bind:title="'message'"
可以这样写v-bind:id="'list-' + id"
对于disabled
这样需要一个布尔值的,Vue
使用的和Boolean(obj)
类似的true
和false
的转换
v-bind:[attributeName]="url"
这种形式是使用动态参数,2.6.0
及以上版本才能使用,当attributeName
为null
,相当于移除了该属性,[]
中包含空格和引号是无效的,使用计算属性替代,注意方括号中的属性名总是会被转换为小写。
用计算属性替代复杂的表达式,动态参数一般是用来做dataset
数据的
v-bind:attributeName
可以简写为:attributeName
v-if指令
v-if
、v-else-if
、v-else
使用时,如果不想在页面添加新的元素,可以用template
元素
默认情况Vue
总是复用元素,有时候不需要Vue
的这种复用,所以需要使用key
来添加一个唯一的值,key
中的值一定要使用基本数据类型
v-show
:使用display
属性简单的控制元素的隐藏和显示,不支持在template
上使用
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
注意v-for
优先于v-if
执行
v-for指令
item in items
item of items
(item, index) in items
(value, key) in object
(value, key, index) in object
number in even(numbers)
n in 10
控制台输入:vm.items.push({ xx: xx })
可以添加一个新item
v-for
可以在template
上使用
如果循环的元素中涉及到类似于输入框这样的表单元素,必须要提供key
,以防止一些意想不到的问题,建议使用v-for
的时候总是提供key
属性,除非需要性能的地方,key
中的值一定要使用基本数据类型
以下两种情况不能做响应
-
vm.items[indexOfItem] = newValue
,可以用下面三种方式替换-
Vue.set(vm.items, indexOfItem, newValue)
-
vm.$set(vm.items, indexOfItem, newValue)
-
vm.items.splice(indexOfItem, 1, newValue)
-
-
vm.items.length = newLength
可以用下面方法来替换vm.items.splice(newLength)
v-on指令
v-on:click="methodName"
调用在methods
中定义的方法,可以传递参数,methodName
后面加上括号就好了
也可以使用表达式:v-on:click="counter += 1"
v-on:eventName
可以简写成@eventName
如果需要访问原始的DOM
事件,可以使用$event
来将DOM
事件传过去
事件修饰符:
.stop
:event.stopPropagation()
停止冒泡事件.prevent
:event.preventDefault()
阻止默认行为.capture
: 捕获事件,内部元素触发的事件先在此处理,然后才交由内部元素进行处理.self
:只有作用在自身的事件才会触发.once
:事件只触发一次,可用于组件.passive
:可以让滚动事件变得更加流畅,了解一下
这些事件修饰符可以连用v-on:click.self.prevent="methodName"
,也可以只写修饰符v-on:submit.prevent
v-on:keyup.enter
回车键
可以使用的键:点击查看,将里面暴露的键转换成kebab-case
就可以作为修饰符了
Vue.config.keyCodes.f1 = 112
自定义按键修饰符,官方已经不推荐使用keyCode
的形式了
可以结合系统键.ctrl
、 .alt
、 .shift
,必须组合其他键使用,单独使用是没有效果的,如果要单独使用可以用自定义按键修饰符或者keyCode
,例如:@keyup.17
可以单独使用Ctrl
组合键使用方法@click.ctrl Ctrl + Click
、 @keyup.alt.67 Alt + C
.exact
精准的系统修饰符,之前虽然是Ctrl + Click
,但是同时按住Alt
也是好使的,.exact
意思是精确保证有且仅有某系统按键和其他键组合的时候才触发
鼠标 .left
、 .right
、 .middle
v-model指令
可以实现双向绑定,作用在表单元素上
-
input[text]
、textarea
元素: 字符串 -
input[checkbox]
元素:true
或false
,可以使用true-value="yes"
,false-value="no"
它也可以
v-model
到一个数组上,这个时候就会用value
填充数组 -
input[radio]
元素:单个字符串 -
select
元素:单个字符串 -
select[multiple]
元素:数组
value
属性可以通过v-bind
来绑定,除了字符串还可以绑定对象的
修饰符:
.lazy
:这个作用是输入的时候View
不变化,相当于点一下回车View
才变化
.number
:默认是按字符串处理,.number
按数字处理
.trim
:输入的时候就调用trim
方法
计算属性
computed
:值是一个对象,对象中写一个函数,函数的名字就是计算属性,函数必须要有一个返回值,计算属性可以动态的根据某个变量改变而发生改变
计算属性提供了缓存,如果不想使用缓存,就用methods
来替代
计算属性默认只有get
方法,如果需要可以提供set
方法
侦听器
watch
:值是一个对象,对象里面存放了方法,方法名代表要侦听的属性,方法是没有返回值的,他有两个参数newValue
和oldValue
动态样式
:class
v-bind:class
指令也可以与普通的 class
属性共存
语法一:{ active: isActive }
- 只要
isActive
是truthiness
即可 - 可以将
{ active: isActive }
对象抽离出来放到data
里面 - 最好使用计算属性
语法二:[activeClass, errorClass]
- 可以使用三元运算符
[isActive ? activeClass : '', errorClass]
- 数组中也可以嵌套对象语法
[{ active: isActive }, errorClass]
:style
v-bind:style
写起来像css
,可以使用camelCase
和kebab-case
做属性名
语法一:{ color: activeColor, fontSize: fontSize + 'px' }
可以抽离出样式到data
,最好使用计算属性
语法二:[baseStyles, overridingStyles]
可以将多个对象用到一起
:style
会自动添加前缀-webkit-
、-ms-
等
对于flex
来说,前缀也不能解决的问题,可以使用多重值{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }
组件化应用构建【已抽离到其他文章】
Vue.component("组件名字", {/* options */})
data
:需要是一个方法,方法返回一个对象,因为所有的组件的data
都是独立的
template
:用来输入一些HTML
,这里必须是单个根元素,也可以使用<script type="text/x-template">
props
:一个数组,属性列表,用来接收从父作用域传过来的数据
watch
,methods
,computed
,声明周期钩子等等都和Vue
实例中的那些选项一样的
使用v-bind
指令可以为组件绑定属性,用来传递给props
可以在普通标签上使用is
属性来加载组件,这样可以避免一些有严格标准的HTML
失去本该拥有的样子(提升到外部)
在组件上使用v-for
,key
是必须的
子组件向父组件传值,子组件v-on:click="$emit('parentEventName')"
,$emit
的第二个参数是一个rest
参数,可以传递任意多的值给父组件,父组件只需要定义@parentEventName
通过$event
来收到子组件传来的值,或者使用@parentEventName="functionName"
,这个functionName
中的参数可以接收到子组件传过来的值。
组件上使用v-model
,需要写成类似于下面代码(详细查看)
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
});
组件可以使用<slot>
可以使用<component>
元素,绑定一个is
属性,实现动态组件
组件上使用class
的时候会追加到组件的根元素的class
上面