Vue的基本指令和属性绑定

最新推荐文章于 2024-04-21 18:51:25 发布

思考猫

最新推荐文章于 2024-04-21 18:51:25 发布

阅读量311

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_48321086/article/details/126591773

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js">//1</script>
  </head>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <body>
   //2
    <div id="box" v-cloak>
      {{msg}}
      //3
      <p>{{name}}今年{{num-60}}岁</p>
  //4
      <p v-text="msg1"></p>
      <p v-text="msg2"></p>
      //5
      <p v-html="msg2"></p>
      //6
      <p v-pre>{{想显示括号}}</p>
//9
      <!-- <p>{{想显示括号}}</p> -->
      //7
    </div>
    <script>
      //8
      new Vue({
        el: "#box",
        data: {
          msg: "hello",
          name: "张三",
          num: 80,
          msg1: "李四",
          msg2: "<h3>李四</h3>",
        },
      });
    </script>
  </body>
</html>

1.先通过cdn将vue引入

2. 创建vue实例对象后浏览器会将{{}}符号内的内容识别为vue对象中的属性并将对应属性的值表现在页面中

3. {{}}括号中可以做简单的运算，函数调用，对象数组的取值等操作，复杂的不行，比如循环等

4. 这种指令不需要加符号，js环境能够识别 v-text底层就是inntext

5.v-html底层就是innhtml 和v-text的区别就是v-text不识别html标签 v-html识别标签

6.特殊情况想要显示{{}}但是vue会自动识别，把括号中的内容当成变量处理，这时候就需要静默指令v-pre vue会跳过静默的代码编译

7.v-cloak指令在运行到vue代码后就会被删除，可解决因为浏览器执行顺序而造成的闪屏问题（浏览器会有一瞬间的{{}}代码为编译的样式，执行到vue才会被识别编译）通过给div设置v-cloak属性，将其设置为display：none运行到vue代码时该属性就会被删除样式也就失效了

8.引入vue后就可以使用vue实例对象，基本语法，el是选择器，data是内容，需要注意的是vue底层将data对象中的内容都复制到了vue对象的下面，网页使用的vue内容也是来自vue对象而不是data

9.这里会报错

上面代码的运行结果为

属性绑定

<!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>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
  </head>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
    .div1 {
      font-size: 50px;
    }
  </style>
  <body>
    <div id="box">
     
      <img v-bind:src="img" />
      <a :href="baidu">百度</a>
      <input type="text" :value="number" />
      <div v-bind:class="box">213123</div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#box",
      data: {
        img: "../../图片素材/1.jpg",
        baidu: "http://www.baidu.com",
        number: 1111111,
        box: "div1",
      },
    });
  </script>
</html>

对于这种单标签操作请求地址的可以用v-bind实现也不需要{{}} 该语法的语法糖直接在对应属性前面加一个：符号即可

运行结果为