V标签作用：

7.v-for：

1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是(item,index) in 数据
4.item 和 index 可以结合其他指令一起使用
5.数组长度的更新会同步到页面上，是响应式的

<body>

    
   <div id="app">

    <input type="button"  value="添加数据" @click="add">
    <input type="button" value="移除数据后" @click="removep">
    <input type="button" value="移除数据前" @click="removes">
      <ul>
          <li v-for="(item, index) in arr" :key="index">
                {{index + 1}} : {{item}}
          </li>
      </ul>
      <h2 v-for="(item, index) in vegetables" :title='item.name' :key="index">
          {{item.name}}
      </h2>
   </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               arr:["北京","上海",'广州'      ],
               vegetables:[
                   {name:"西兰花炒鸡蛋"},
                   {name:"鸡蛋炒西兰花"}
               ]
               
            },
            methods: {

            add :function () {
                this.vegetables.push( {name:"香菜"});
                
            },

         //方法ES6的写法，去掉:function;两种移除方式.
            removes() {
                this.vegetables.shift();
            },

            removep(){
                this.vegetables.pop();
            }


                }
            


        })
    </script>
</body>

image.png

8.v-on(补充)：传递自定义参数，事件修饰符

1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时需要定义形参来接收传入的实参
3.事件的后面跟上‘.修饰符 ’ 可以对事件进行限制
4.‘.enter’ 可以限制触发的按键为回车
5.事件修饰符有多钟

//1.键盘按下事件：keydown() 是在键盘按下就会触发
//2.键盘弹起事件：keyup() 是在键盘松手就会触发

//keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，
//而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

<body>

    
   <div id="app">

    <input type="button" value="点击" @click="doIt(123,'小明')">
    <input type="text"  @keyup.enter="say">
      <ul>
          <li v-for="(item, index) in arr" :key="index">
                {{index + 1}} : {{item}}
          </li>
      </ul>
      <h2 v-for="(item, index) in vegetables" :title='item.name' :key="index">
          {{item.name}}
      </h2>
   </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
         
            methods: {
             
                doIt(p1,p2){
                     console.log('做前端');
                     console.log(p1);
                     console.log(p2);
                },
                say(){

                    alert('回车后出现');
                }
                }
            


        })
    </script>
</body>

image.png

9.v-model：获取和设置表单元素的值（双向数据绑定）

1.v-model指令的作用是：便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3.绑定的数据 <---->表单元素的值

<body>

 <div id="app">
     <input type="button" value="修改message" @click = "setM">
     <input v-model="message" type="text" @keyup.enter="getM" />
     <h2>{{message}}</h2>
 </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                
                 message:"嫦娥五号将择机实施月面软着陆"    
                
            },
            // methods: {
            //     getM:function(){
            //              alert(this.message)
            //     }
            // },
            methods: {
                getM(){
                         alert(this.message)
                },
                setM(){
                     this.message = "kuku"
                }
            },

        })
    </script>
</body>