Vue.js框架
vue.js框架
职责划分：M-V-VM
model模型：数据
view视图：html标签,样式
viewmodel结合模型和视图：决定数据显示在哪个标签上
导入vue.js
在每个页面创建一个vue对象
"div_id">{{name.substring(0,5)}} //截取字符串
var vue = new Vue({
//模型数据
data:{
name: "helloworld",
age:"20"
},
//DOM元素
el:"#div_id"
//计算属性
computed:{
//计算属性,对应一个函数,由普通属性计算而来
nameRe: function(){
return this.name.split("").reverse.join();
}
},
//方法属性
methods:{
a:function(){
}
}
});视图由两个花括号{{}}占位,匹配模型数据的属性名称
注意:不能将vue对象和html,body绑定
v-for 循环指令
<body>
<div id="div1">
<table border="2px" style="border: blue solid 2px;">
<tbody>
<tr v-for="p in list">
<td class="td">{{p.id}}td>
<td class="td">{{p.price}}td>
<td class="td">{{p.img}}td>
tr>
//<p>{{list[2].id}}, {{list[2].price}}, {{list[2].img}}p>
//v-for="(p,i) in list"第i个
tbody>
table>
div>
<script>
var vue = new Vue({
data: {
list:[
{id:"001", price:"200", img:"1.jpg"},
{id:"002", price:"100", img:"2.jpg"},
{id:"003", price:"300", img:"3.jpg"}
]
},
el:"#div1"
})
script>
body>
vue.list.push({id:"004", price:"400", img:"4.jpg"}) 添加一个对象
vue.list.pop() 尾部删除
vue.list.shift() 头部删除v-if指令
条件成立则视图上显示,否则不会显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/vue.js">script>
<style>
.td{width: 200px;padding-bottom: 20px;}
style>
head>
<body>
<div id="div1">
<table border="2px" style="border: blue solid 2px;" v-if="list.length>0">
<tbody>
<tr v-for="p in list">
<td class="td">{{p.id}}td>
<td class="td">{{p.price}}td>
<td class="td"><img width="100px" :src=" 'images/' + p.img">td>
tr>
<p>{{list[2].id}}, {{list[2].price}}, {{list[2].img}}p>
tbody>
table>
<p v-else>你的购物车空空如也~~~~p>
div>
<script>
var vue = new Vue({
data: {
list:[
{id:"001", price:"200", img:"1.jpg"},
{id:"002", price:"100", img:"2.jpg"},
{id:"003", price:"300", img:"3.jpg"}
]
},
el:"#div1"
})
script>
body>
html>v-show指令 根据条件决定表示是否显示,在此例中:
与v-if的false的区别在于:隐藏(display:none)<——->不创建
v-bind绑定属性标签 (处理字符串和变量)
![]()
" 'images/' + p.img">
![]()
" 'images/' + p.img"> //同上v-on 事件
<input type="button" value="点我" v-on:click="abc">
<input type="button" value="点我" @click="abc">//与上一行等同
<input type="button" value="点我" @click="abc(100)"> //带参数
<script>
var vue = new Vue({
el:"#app",
data:{
},
methods:{
abc:function(){
}
}
});
script>