·事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
<script type="text/javascript">
var obj = {
foo: 'bar'
}
//Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
</script>
</body>
</html>
问题：<script></script>为什么写在<div></div>下面（写在上面不可以吗），html渲染过程和代码运行顺序如何（怎么查找div中id属性的）
·注册组件
<div id="app-7">
<ul>
<row-item
v-for="item in class1"
v-bind:row="item"
v-bind:key="item.id">
</row-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('row-item',
{
props:['row'],
template:'<li>{{row.text}}</li>'
}
)
var app7 = new Vue({
el: "#app-7",
data: {
class1:[
{id:0, text:"haiyan"},
{id:1, text:"zoey"}
]
}
}
)
</script>
上述代码理解
1.错误属性赋值代码
v-bind: row = "item"
不要随意加空格，js靠空格划分语义
2.v-for语法
v-for="任意变量 in 数组"
- v-bind作用：绑定标签属性，这里给标签赋数组值。
