vue基础语法
vue.js 数据渲染框架,MVVM模型
MVVM模型:
- M：modedl 数据模型，页面中要显示的数据
- V：view 视图，页面中的标签样式等
- VM：将数据加载至页面
让页面中的样式与版面进行分离，从而达到动态页面的效果
模板：
<script src="js/vue.min.js"></script>
<script>
new Vue({
'el': '必须传id值',
data(){
return {
'name':'张三',
'arr':['a','b'],
}
},
computed:{
},
methods:{
}
})
</script>
1 - 1 创建vue控制器
1 - 2 vue控制器参数
-
el:控制范围 必须是id选择器
-
data:作用域中的数据 就是Model
? 类型function(){} return json(该Json就是该页面的数据模型) new Vue({
'el':'#wrap',
'data':function(){
return {
'name':'张三'
}
}
// 简写
/*data(){
return {
'name':'张三'
}
}*/
})
-
computed:属性计算，传Json,且Json中的每一个元素都是function,且必须有的return,computed中的所有函数都是对data中的数据进行计算使用的，不能额外传参数
<body>
<div id="wrap">
单价：<input type="number" v-model="price" /><br />
数量：<input type="number" v-model="count" /><br />
总价：{{sum}}
</div>
<script>
new Vue({
'el':'#wrap',
data(){
return {
'count':'1',
'price':'10',
}
},
computed:{
sum() {
return this.count * this.price
}
}
})
</script>
</body>
-
methods:所有函数定义在此,传递的也是Json
methods:{
fun() {
alert(111111)
},
}
1 - 3 属性值绑定
-
绑定属性值(单向绑定) :属性名="作用域中的key"
<input :value="name" />
-
双向绑定
只能用于表单元素(即用户能输入值的东西)
页面中的值改变，对应key的值也会改变
v-model="作用域中的key"
<input v-model="name" />
-
绑定事件 @时间名="methods中得到方法",也可以直接写代码
<input type="button" value="点击调用事件" @click="fun()" />
<input type="button" value="点击调用事件" @click="alert('1111')" />
-
绑定class
-
绑定数组 :class="data中的key(value必须是数组的值)"
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 100px;
height: 100px;
border: 10px solid #000000;
}
.b{
background: #00FF00;
}
</style>
<body>
<div id="wrap">
<div :class="arr"></div>
</div>
<script>
new Vue({
'el':'#wrap',
data(){
return {
'arr':['a','b'],
}
},
computed:{
},
methods:{
}
})
</script>
</body>
-
绑定Json（可以用于动态显示效果） :class="{key(class值):boolean(有或没有)}"
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 100px;
height: 100px;
border: 10px solid #000000;
}
.b{
background: #00FF00;
}
</style>
<div :class="{a:true,b:count>10}"></div>
<script>
new Vue({
'el':'#wrap',
data(){
return {
'count':'1',
'price':'10',
'arr':['a','b'],
}
}
})
</script>
-
绑定style :style="{Jquery中.css中怎么写，这就怎么写}"
<div :style="{width:'200px',height:'100px',border:'1px solid #000000'}"></div>
-
条件显示 v—if="表达式"
标签符合条件时才会显示
v-else
标签不满足v—if时显示
<div v-if="price>5" >单价大于5</div>
<div v-else>单价小于等于5</div>
v-show:"表达式"
是否显示标签（满足表达式的条件就显示）
与v—if不同之处在于，v-show所在的标签，是无论如何都存在的，而v—if只有在满足条件时存在
<div v-show="price>5">单价>5</div>
v-for="(item,index)" in data中的key(必须时数组)
标签循环，index为下标索引，itme为值
<div v-for="(itme,index) in arr">{{index}} ----- {{itme}}</div>
|