Blogger Information
Blog 30
fans 1
comment 0
visits 16123
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue常用术语与指令
moon
Original
506 people have browsed it

vue常用术语

  • 挂载点:vue实例绑定到某个dom作用域
  • vue实例:一个vue对象
  • 数据注入:在外部修改vue实例中的属性
  • 响应式:网页数据实时变动,不需要刷新网页

vue常用指令

  • vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是”自定义属性”
  • v-text:控制标签上的文本显示,类似于dom标签中的textContent属性,例如下列代码
  1. <p>用户名: <span v-text="'hello'"></span></p>

上述代码相当于<p>用户名: <span>hello</span></p>

  • v-html:与v-text类似,但是能解析其中的dom标签,例如下列代码段
  1. <div class="app">
  2. <p>用户名: <span v-text="username"></span></p>
  3. <p>用户名: <span v-html="username"></span></p>
  4. </div>
  5. <script>
  6. const app = Vue.createApp({
  7. data() {
  8. return {
  9. username: "灭绝老师",
  10. }
  11. },
  12. }).mount(".app")
  13. app.username = '<span style="color:red">猪老师</span>'
  14. </script>

其显示结果如下图:
node2

  • v-bind,可简化为一个冒号,可绑定行内样式style等,例如<p v-bind:style="style">php.cn</p>,该代码段绑定了p标签的行内样式,<p :class="active">hello 老王</p>,该代码段绑定了p标签的class样式
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post