Vue.js是渐进式的JavaScript框架
优点:
安装略,详细见https://cli.vuejs.org/zh/guide/installation.html
在项目中,可以直接用中引入,如
<script src="vue.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">{{message}}div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello'
}
});
script>
body>
html>
/ 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
Object.freeze()
方法会阻止现有property的改变,即阻止数据响应
$
前缀用于区分用户定义的property
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
$watch
可用于观察某一数据的变化vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
beforeCreate
:页面创建之前。实例初始化之后,数据观测(data observer)和event、watcher事件配置之前。created
:实例创建之后立即调用。数据观测、属性和方法的运算、watch、event事件回调完成。挂载未开始,当前$el不可见。beforeMount
:挂载开始之前调用。相关的渲染函数收藏被调用。mounted
:挂载成功。el被vm.$el替换。beforeUpdate
:数据更新之前。updated
:dom已更新,组件更新完毕。{{}}
<span>Message: {{ msg }}span>
v-once
数据不可改,只进行一次插值
<span v-once>这个将不会改变: {{ msg }}span>
{{}}会将数据解释为普通文本,要输出HTML代码需要用到v-html
<p>Using mustaches: {{ rawHtml }}p>
<p>Using v-html directive: <span v-html="rawHtml">span>p>
v-bind
<div v-bind:id="dynamicId">div>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">div>
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
如:
v-if
<p v-if="seen">现在你看到我了p>
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。
如:
<a v-bind:href="url">...a>
v-on
用于事件监听
<a v-on:click="doSomething">...a>
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
如:
<a v-bind:[attributeName]="url"> ... a>
如果Vue 实例有一个 data property attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。
<a v-on:[eventName]="doSomething"> ... a>
当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。当 eventName 的值为“null”时,即移除绑定。
修饰符 (modifier) 是以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()(防止链接打开url)
如:
prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()(防止链接打开url)
<form v-on:submit.prevent="onSubmit">...form>
stop修饰符告诉v-on指定对于触发的事件调用event.stopPropagation()(阻止冒泡)
<a v-on:click.stop="doSomething">...a>
active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
<div v-bind:class="{ active: isActive }">div>
<div v-bind:class="[activeClass, errorClass]">div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
activeColor: 'red',
fontSize: 30
}
或
<div v-bind:style="styleObject">div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<div v-bind:style="[baseStyles, overridingStyles]">div>
v-else-if
用于条件性地渲染一块内容。
<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else-if="type === 'C'">
C
div>
<div v-else>
Not A/B/C
div>
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。key
可以解决这一情况,使两个元素完全独立。
<template v-if="loginType === 'username'">
<label>Usernamelabel>
<input placeholder="Enter your username" key="username-input">
template>
<template v-else>
<label>Emaillabel>
<input placeholder="Enter your email address" key="email-input">
template>
v-show
的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display
可以用 v-for
指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
li>
ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果会是两个li标签
可以用 `v-on` 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1button>
<p>The button above has been clicked {{ counter }} times.p>
div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
<div id="example-2">
<button v-on:click="greet">Greetbutton>
div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
.stop
阻止单击事件继续传播,阻止冒泡.prevent
提交事件不再重载页面.capture
添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理.self
只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的(阻止捕获).once
.passive
可以用 v-model
指令在表单 、 及 元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}p>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<br>
<span>Checked names: {{ checkedNames }}span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Onelabel>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<br>
<span>Picked: {{ picked }}span>
div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>Selected: {{ selected }}span>
div>
new Vue({
el: '...',
data: {
selected: ''
}
})
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<br>
<span>Selected: {{ selected }}span>
div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
<div id="components-demo">
<button-counter>button-counter>
div>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.button>'
})
data
必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝(不会影响到其他复用到的模块)
Vue.component('my-component-name', {
// ... 选项 ...
})
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})