zoukankan      html  css  js  c++  java
  • Vue的指令初探-01

    1. vue指令

    带有v前缀的特殊属性(也就是作为属性插入DOM元素中使用),它值为单个表达式(表达式标量一般为vue实例中的数据属性)。
    作用:当表达式的值发生改变,将变化反映到DOM上。(体现了数据驱动的思想,vue让你只关注数据,不用你来操作DOM元素)

    2. vue指令 带参数:

    • 一般的指令后面可以带从参数,在指令冒号后面加参数

      帅哥

    • 动态指令:

    <a v-bind:[attribute]="url" >百度一下 </a>
    // 不要使用大写,因为浏览器会将元素属性名的大写全部强制转为小写字符
    // 不要使用复杂的表达式,要遵守HTML属性命名的规范 
    

    3. vue中两种数据绑定的方式

    1. 文本插值
    2. 元素属性,v指令绑定

    4. 常见指令的作用

    • v-show

        <div id="app">
              <h1 v-show="yes">Yes!</h1>
              <h1 v-show="no">No!</h1>
              <h1 v-show="age >= 25">Age: {{age}}</h1>
              <h1 v-show="name.indexOf('Smith') >= 0">Name:{{name}}</h1>
          </div>
          <script src="../node_modules/vue/dist/vue.js"></script>
          <script>
              var app = new Vue({
                  el: "#app",
                  data: {
                      yes: true,
                      no: false,
                      age: 28,
                      name: "Will Smith"
                  },
                  methods: {
                      // 放置方法
                  }
              });
          <script>
      
      • 核心原理:
        css display:none;
        也就是所,设置v-show指令的元素,vue会根据其表达式值的真假,来设置css属性display来控制该元素的显示与隐藏, 同时也说明该元素本身一定是被渲染到DOM Tree上的(区别v-if|v-else|v-else-if)
      • 技巧template
        如果要控制多个元素的显示与隐藏,则可以使用template标签将元素“装起来”
      <template v-show="flag">
      	<div>item 1</div>
      	<div>item 2</div>
      </template>
      
    • v-if|v-else-if|v-else

      <body>
        <div id="app">
            <div>你的分数:{{score}}</div>
            <span v-if="score >= 85">优秀</span>
            <span v-else-if="score >= 85">良好</span>
            <span v-else-if="score >= 85">及格</span>
            <span v-else>不及格</span>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    score: 90
                }
            });
        </script>
      
    ```

    核心原理:

    根据表达式的值来确定是否将元素加入DOM Tree

    区别

    1. v-if|v-else-if|v-else根据表达式的值来决定是否将元素加入DOM Tree
    2. v-show根据表达式的值来决定是否将元素隐藏 display:none; (元素会加入DOM Tree,是否显示由表达式值确定)

    总结

    ​ 首先介绍了vue的指令概念,形式:v-指令。 指令以HTML属性的形式加入,指令的值为:JavaScript表达式(表达式整体有一个值)。

    然后介绍了 v-show和v-if|v-else-if|v-else 来控制元素的显示和隐藏的功能,以及他们之间的差别

    参考

    - 《Vue.js从入门到实战》-孙鑫
    慢慢来,比较快!基础要牢,根基要稳!向大佬致敬!
  • 相关阅读:
    Hibernate + mysql 查询伪劣时:= 出现 Space is not allowed after parameter prefix ':' MySQL异常
    Linux下使用Markdown
    第十六章:Java内存模型——Java并发编程实战
    第十五章:原子变量与非阻塞机制——Java并发编程实战
    第十四章:构建自定义的同步工具——Java并发编程实战
    第十三章:显示锁——Java并发编程实战
    访问者模式——HeadFirst设计模式学习笔记
    原型模式——HeadFirst设计模式学习笔记
    第十二章:并发程序的测试——Java并发编程实战
    备忘录模式——HeadFirst设计模式学习笔记
  • 原文地址:https://www.cnblogs.com/rookie123/p/14676611.html
Copyright © 2011-2022 走看看