VUE学习笔记 -1 语法 v-for v-bind v-model

安装方法：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.v-for

<ul id = "app">
<li v-for="food in foodlist">{{food}}//在这里做迭代
</li></ul>
------------------
js部分：
    var app = new Vue({
    el:'#app',
    data:"
    fodlist:['葱','姜','蒜']",//字符串
    })
    --------------------------------------
    <ul id = "app">
    <li v-for="food in foodlist">{{food.name}}:{{food.discount? food.price*food.discount : food.price}}//这里有个一个三元操作：如果food.discount存在，则计算，如果不存在，直接返回food.discount.
    </li></ul>
    var app = new Vue({
    el:'#app',
    data:"
    foodlist:[
    {
        name:"cong",
        price:"10",
        discount:""
    }
       {
        name:"jiang",
        price:"5",
        discount:
    }
       {
        name:"suan",
        price:"4.5",
        discount:
    }]
    //上面就是对象
})

2.v-bind

v-bind用于绑定数据

点我" class="hljs js点我"><script>
var app = new Vue({
    el:'#app',
    data:'
    url="baidu.com"'
})
</script

v-on

v-on 用于绑定事件

<div id="app">
<button  v-on:cilck="onClick">点我</button>
</div>
<script>
var app = new Vue({
    el:'#app',
    methods:{
    onClick:function(){
        console.log("clicked");
    }
    }
})
<script>

v-model

<div id = "app">
<input tpye = "text" v-model = "name">
//v-model.lazy惰性更新
//v-model.trim去掉输入的空格
{{name}}
</div>
    <script>
    var app = new Vue({
    el:'#app',
    data:{
        name:''//这里一定要写不然报错
    }
    })
    </script>