1.列表渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> <script src="https://unpkg.com/vue@3"></script> <style> li::marker{ content: none; } </style></head><body> <!-- 1.原生：<script> const ul = document.createElement('ul'); const arr = ['wuhan','beijing','congqin']; for(let i of arr) { let li = document.createElement('li'); li.append(i); ul.append(li); } document.body.append(ul); </script> --> <!--Vue 1: <div class="app"> <ul> <li>{{City[0]}}</li> <li>{{City[1]}}</li> <li>{{City[2]}}</li> </ul> </div> --> <hr> <div class="app"> <ul> <!-- <li v-for="(city,index) of City" :key = "index">{{city}}</li> --> <!-- 上下相等<li v-for="city of City">{{city}}</li> --> <li v-for="(message) of Messages">{{message['name']}}:{{message['email']}}</li> </ul> </div> <script> Vue.createApp({ data(){ return { City:['wuhan','beijing','congqin'], Messages:[ {name:'yk',email:'yk@.com'}, {name:'yk',email:'yk@.com'}, { name:'yk',email:'yk@.com'} ] } } }).mount('.app'); </script></body></html>
2.双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双向绑定</title> <script src="https://unpkg.com/vue@3"></script></head><body> <div class="app"> <p> <input type="text" v-model = "comment" :value="comment"> <span>{{comment}}</span> </p></div> <script> const app = Vue.createApp({ data(){ return { comment :null, } } }).mount('.app'); </script></body></html>
3.事件绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="https://unpkg.com/vue@3"></script></head><body> <!-- <div class="first"> <a href="www.baidu.com" onclick="showUrl()">Url</a> <p></p> </div> <script> function showUrl() { //事件禁止跳转 event.preventDefault(); event.target.nextElementSibling.textContent = event.target.href; } </script> --> <div class="app"> <a href="www.baidu.com" @click="showUrl($event)">Url</a> <!-- 等价于：<a href="www.baidu.com" v-on:click="showUrl($event)">Url</a> --> <p class="url">{{url}}</p> </div> <script> Vue.createApp({ data(){ return { url:null } }, methods:{ showUrl(ev) { ev.preventDefault(); ev.stopImmediatePropagation(); this.url = ev.target.href; } } }).mount('.app'); </script></body></html>
