Vue常用术语和指令
1. Vue常用术语
<!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/dist/vue.global.js"></script></head><body><!-- 1.挂载点（盒子/容器）：应用实例作用域 --><div class="app"><p>用户名：{{username}}</p></div><script>// 2. vue根组件应用实例const app = Vue.createApp({//根组件配置项data: function () {return {// 将组件中要用到的数据全部声明在这个返回的对象中username: '老马',};},});// 3.根组件实例与挂载点进行绑定const vm = app.mount('.app');// console.log(vm);// 4.数据注入:data声明的数据会自动注入当前应用实例中// console.log(vm.$data.username);console.log(vm.username);// 5.响应式vm.username = '老李';// 1. 我没有进行dom操作，选择元素，更新内容// 2. 没有进行事件绑定，没有监听，这些都是vue搞定的</script></body></html>
2. Vue 简单指令
总结：v-site：v开头的自定义属性，类似 data-key 自定义属性。Vue可以解析。
<!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/dist/vue.global.js"></script></head><body><!-- vue指令：`v-` 前缀，本质是来说，就是自定义标签属性 --><!-- <div class="app" data-key="1" v-site="www.php.cn"></div> --><!-- class:预定义data-key;v-site:自定义属性 --><!-- 挂载点 --><div class="app"><p>用户名:{{username}}</p><!-- ele.textContent / ele.innerText --><p v-text="hello"></p><!-- ele.innerHtml --><p v-html="eat"></p><!-- 只渲染一次 --><p v-once="eat"></p></div><script>// console.log(document.querySelector('.app').getAttribute('v-site'));const app = Vue.createApp({data() {return {username:'老马',hello:'早上好！',eat:'<em style="color:red;">您吃了吗？</em>'}},});app.mount('.app');</script></body></html>
3. Vue样式绑定
v-bind:高频指令，可以简化，冒号：
v-bind:通常定义的是HTML预定义的属性
如：v-bind:style 也可以简写：:style
<!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/dist/vue.global.js"></script><style>.active {color: red;}.bgc {background-color: lightblue;}</style></head><body><div class="app"><!-- 1. 行内样式绑定，大多使用对象 --><p style="color: red; background-color: yellow">hello world</p><!-- vue来接管style属性 --><!-- style,v-bind:style / style是预定义属性，v-bind:style是vue自定义属性--><p v-bind:style="{color:myColor,backgroundColor:bgc}">hello world</p><!-- 2. 类样式：class,大多使用数组 --><!-- classList --><p class="active bgc">大家累了吧</p><!-- vue接管类样式 --><p v-bind:class="[jh,bj]">大家累了吧</p><!-- 对象，布尔 ，v-bind 可以省略 --><p :class="{active:isActive,bgc:isBgc}">大家累了吧</p><!-- v-bind:高频指令，可以简化，冒号： --><!-- v-bind:通常定义的是HTML预定义的属性 --></div><script>const rootConfig = {data() {return {myColor: 'red',bgc: 'yellow',jh: 'active',bj: 'bgc',isActive: true,isBgc:false,};},};const app = Vue.createApp(rootConfig);app.mount('.app');</script></body></html>