Js初学笔记（二）

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