挂载点： 当前vue实例的作用域
vue实例： 利用vue的进行相关工作的一个对象，须挂载到挂载点
数据注入： 利用“实例.参数=”直接修改挂载点中数据
响应式： vue实例中的数据，能实时响应外部对数据的更新
v-html: innerHTML
v-text: textContent
样式绑定：v-bind: / :
事件绑定修饰符：v-on: / @
vue中获取$event事件
事件绑定：methods(){}
v-model:事件双向绑定
延迟响应 .lazy :失去焦点才响应，效率比onblur更高
禁用默认行为 .prevent 事件修饰符来限定事件行为
防止冒泡 .stop
列表渲染: v-for
:key 必须要添加,diff算法，key必须保证唯一性
<!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>vue常用术语</title> <script src="https://unpkg.com/vue@next"></script></head><body> <!-- 1.挂载点：当前vue实例的作用域 --> <div class="app"> <p>{{message}}</p> </div></body><script> // 2.vue实例：利用vue的进行相关工作的一个对象，需用mount挂载到挂载点 const app = Vue.createApp({ // 3.数据，控制挂载点数据响应的 data(){ return{ message:"hello world!" } } }).mount('.app') // 3.1 数据注入：利用访问器属性修改data中的数据 // 4. 响应式：页面数据会实时更新 app.message = "hhhhh";</script></html>
<!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@next"></script> <style> .bg{ color:aqua; } </style></head><body> <div class="app"> <p><span v-html="message"></span></p> <p><span v-text="message"></span></p> <p v-bind:style="style">{{Bind}}</p> <p :style="style">{{Bind}}</p> <p v-bind:class="Class">{{Bind}}</p> <p :class="Class">{{Bind}}</p> <p> <button v-on:click="comment_msg = $event.target">{{comment}}</button> <button @click="comment_msg = $event.target">{{comment}}</button> <span>{{comment_msg}}</span> </p> <p> <button @click="showmsg($event)">Hello</button> <span>{{Msg}}</span> </p> </div></body><script> const app = Vue.createApp({ data(){ return{ message:null, Bind:"样式绑定", style:"color:green", Class:"bg", comment:"事件绑定", comment_msg:"", Msg:"" } }, methods: { showmsg(el){ this.Msg = "Hello Dave"; } }, }).mount('.app') app.message='<em style="color:blue;">Hello World!</em>';</script></html>
<!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@next"></script></head><body> <div class="app"> <ul> <li v-for="(city, index) of cities" :key="index">{{city}}</li> </ul> </div></body><script> const app = Vue.createApp({ data() { return { cities:["北京","上海","南京"] } }, }).mount(".app");</script></html>
