Vue01
一.
1.mustache语法->{{}}
2.new Vue({
el :
data :
methods
})
二.
1.v-for="item in arrays"
2.v-on:click->@click
3.v-html
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
4.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
5.v-once 只改变一次数据
6.v-text 类似mustache语法,但不灵活
7.v-cloak 斗篷,
这个指令保持在元素上直到关联实例结束编译,等vue实例创建完,显示内容
8.1v-bind绑定基本属性
v-bind:src
v-bind:href
8.2v-bind动态绑定class,style
v-bind:style ->:style
v-bind:class ->:class
三.
计算属性
<h2>
{{totalPrice}}
</h2>
data
: {
books
: [
{
id
:
1
,
bookName
:
"111"
,
bookPrice
:
100
}
,
{
id
:
2
,
bookName
:
"222"
,
bookPrice
:
200
}
,
{
id
:
3
,
bookName
:
"333"
,
bookPrice
:
300
}
,
{
id
:
4
,
bookName
:
"444"
,
bookPrice
:
400
}
,
]
}
,
computed
: {
totalPrice
:
function
() {
let
result =
0
for
(book
of this
.
books
){
result+=book.
bookPrice
;
}
return
result
;
}