データとメソッド
- Vueのインスタンスが作成されると、すべてのプロパティは、それがシステムのVueに応答して、データ・オブジェクトに追加されます。データ同期更新データとビュー。
- インスタンスが作成された後に新しいプロパティを追加し、この属性への変更は、すべてのビューを更新されません。
- あなたは、プロパティを希望、初期値を設定するだけで、いくつかの必要性空または存在しないの始まりだった場合。
- Object.freeze()メソッド防止既存のプロパティを変更します
データ属性に加えて、さらにVueのインスタンスからなるインスタンスの属性とメソッドを接頭辞として、
$
例えば、:. Vmを$データ、VM $エル、VM $腕時計()( VMが特定のインスタンス名と仮定する)、詳細はを参照してください。.. APIライフサイクルフックの例
Vueのインスタンスは、独自のライフサイクルを持っている私たち自身のロジックコードを書くために、いくつかのフック関数を提供します。- beforeCreate
- 作成した
- beforeMount
- マウント
- BeforeUpdate
更新しました
PS:不要在选项属性或回调上使用箭头函数,即这些钩子函数不要用箭头函数的写法,因为他们没有this
ライフサイクルチャート
テンプレートの構文
テキスト
データは、バインディングの使用の最も一般的な形態である“Mustache”
文法(中括弧)テキスト補間<span>Message: {{ msg }}</span>
V-一度命令は、データの変更は、補間の内容がで更新されていない1回限りの補間を行うことができます
<span v-once>这个将不会改变: {{ msg }}</span>
オリジナルHTML
V-実際のHTMLコマンドの出力htmlのではなく、文字列<p>Using mustaches: {{ rawHtml }}</p> 输出字符串 <p>Using v-html directive: <span v-html="rawHtml"></span></p> 输出rawHtml变量代表的HTML
JavaScriptを使用表現
のすべてのデータバインディング、Vue.jsがフルサポートJavaScript式を提供{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
命令
、V-に、V-場合と共通のV-ため、V-バインド。
パラメータ:<a v-bind:href="url">...</a>
hrefがここにコマンドが結合素子特性のURL表現のhrefのV-バインド値を知らせる、パラメータである
動的パラメータを:<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用
修饰符:<form v-on:submit.prevent="onSubmit">...</form>
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定,例子的
.prevent
就是修饰符
缩写:<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
计算属性和侦听器
模板一般不要加入过多的逻辑,只是用来渲染会职责分明一些,把逻辑处理防盗计算属性,会更加合理;
<p>Computed reversed message: "{{ reversedMessage }}"</p>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
这里的
reversedMessage
就是计算属性,可以逆序一个字符串。
定义一个方法,能够达到同样的效果:<p>Reversed message: "{{ reversedMessage() }}"</p>
<p> // 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }
两者区别:计算属性是基于它们的响应式依赖进行缓存的,方法总会再次执行函数;在不同场景下选择不同的方式吧~
tips:使用计算属性,而不是侦听属性(watch里定义的方法);计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter;自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的
Class 与 Style 绑定
v-bind 用于 class 和 style,表达式结果的类型除了字符串
之外,还可以是对象
或数组
先介绍Class绑定
绑定对象
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> data: { isActive: true, hasError: false }
当 isActive 或者 hasError 变化时,class 列表将相应地更新,也可以让绑定对象不内联定义在模板里,结果也是一致的:
绑定<div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } }
计算属性
也可以更灵活的展现(不举例子了)绑定数组
<div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' }
绑定组件(语法和前面完全类似)
Style绑定
v-bind:style 的对象语法
绑定对象
<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-if、v-else-if、v-else可以配合使用:
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else="type == 'C'">
C
</div>
data : {
type : "B"
}
在<template>
元素上使用 v-if 条件渲染分组,显示多个元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
用key管理重复元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
使用key标示元素后,Vue不会采用偷懒的复用,而会重新渲染元素
v-show:只有显示和不显示两种
<h1 v-show="ok">Hello!</h1>
v-if vs v-show:需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好
列表渲染
v-for用于列表渲染
迭代数组
ps:index从0开始,<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
in
可以替换为of
迭代对象
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
使用唯一key配合v-for保证渲染正确(删除、排序、过滤等场景用得到)
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div>
数组变异方法 (mutation method)
push()、pop()、shift()、unshift()、splice()、sort()、reverse(),例子:
这些方法会直接改变数组本身example1.items.push({ message: 'Baz' })
非变异 (non-mutating method) 方法
filter()、concat()、slice()
这些方法不会改变传入的数组本身,但是方法的example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
返回值
是一个新数组
,可以把这个数组赋值给原来的数组达到同样的效果
注意事项
数组的一些错误写法:var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
正确写法:
//第一个问题 // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) //实例写法 vm.$set(vm.items, indexOfItem, newValue) //第二个问题 vm.items.splice(newLength)
对象的一些错误写法:
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的
对于已经创建的实例,Vue 不允许动态添加
根级别
的响应式属性,但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性:var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) Vue.set(vm.userProfile, 'age', 27) //或者 vm.$set(vm.userProfile, 'age', 27)
表单输入绑定
v-model指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定,本质上是语法糖。文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
多行文本
tips: (<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea>
<textarea>{{text}}</textarea>
) 并不会生效,应用 v-model 来代替。复选框
多个复选框,绑定到同一个数组,例子:<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>
new Vue({ el: '#example-3', data: { checkedNames: ['Jack'] } })
单选按钮
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>
new Vue({ el: '#example-4', data: { picked: 'Two' } })
选择框
单选:<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '...', data: { selected: 'A' } })
多选时 (绑定到一个数组):
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '#example-6', data: { selected: ['A','B'] } })
v-for显示下拉框例子:
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
- 值绑定
单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串,有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串(不举例子了) - 修饰符
- .lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步,你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
- .number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
<input v-model.number="age" type="number">
- .trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">
- .lazy