Vue的基础语法
vue实例
创建一个vue实例(new Vue)
每一个vue组件都是通过vue函数创建的一个新的vue实例开始的
如:
new Vue({
data:{},
methods:{}
})
vue指令
指令(Directives)是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式,特殊情况除外指令的职责是:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
- v-for
v-for指令可以遍历数组进行列表渲染。使用的时候需要注意的是iterm in items形式的特殊语法,items是源数据数组,item是数组元素迭代的别名。如下示例:
<div id="app">
<p v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
arr: [{
name: '张三',
age: 25
}, {
name: '李四',
age: 25
}, {
name: '孙悟空',
age: 25
}, {
name: '武松',
age: 25
}]
},
})