Js学习笔记之vue
更新:
v-on 函数:可以从名字上看出,这是一个绑定事件的一个函数
<button v-on="{mouseenter:onenter,mouseleave:onleave}" v-on:click="onclicks">click</button>
格式如下 v-on="{要绑定的事件:要做什么,}"
var app= new Vue({
el: '#app',
methods:{
onenter: function () {console.log('onenter')
;},
onleave:function () {console.log('onleave')
},
onclicks:function () {console.log('onclick')
},});
如你所见,v-on绑定事件是在methods里面的
——————————————————————————
创建一个html 创建一个main.js,下载一个vue.js 地址在下面
<script src='vue.js链接'></script><script src='main.js链接'></script>
这俩个最好放在body的结尾,
在consolt里面
app.food.push({})推送一个字典
展示元素 如果存在 ,显示整个元素:
v-show=‘name’(永远存在),v-for=’’(删除),
通常用于input的绑定:
v-model=‘age’
迭代 v-for:
<li v-for="food in foodlist">{{food.name}}:¥{{food.discount?food.price*food.discount:food.discount}}</li>
意思是 如果food.discount 存在,则food.price*food.discount
否则输出food.discount
v-bind可以绑定几乎任何属性:
<a v-bind:href='url' >点我</a>
<a v-bind:class=''{active:isactive}''>点我</a>
我可以设置.active 的background:red
当我的main.js下的isactive:true时,背景颜色才会改变
v-bind:class=’’{添加什么:添加的条件时什么}’’
小技巧: v-bind:class=’’{添加什么:添加的条件时什么}’’
简写如下 :class=’’{添加什么:添加的条件时什么}’’ 注意前面有一个冒号哦
我的main.js内容如下:
var app=new Vue({
le:'app',
data:{
isactive:true,
url:'https://www.baidu.com',
foodlist:[{
name:'咸鱼',
price:14,
discount:0.3
}, {
name:'牛肉面',
price:14,
discount:.3
},
{
name:'泡面',
price:33,
discount:.5
},
{
name:'米粉',
price:11,
}]}});
一个vue.js文件 网址https://github.com/vuejs/vue/tree/dev/dist 下载一个vue.js