2. Vue 指令基本语法和使用

最新推荐文章于 2024-02-04 14:52:21 发布

是小晴晴呀

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量283

点赞数

分类专栏：前端 Vue 文章标签： vue.js 前端 javascript 指令

本文链接：https://blog.csdn.net/qq_52252193/article/details/121956792

版权

前端 Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

指令 (Directives) 是带有 v- 前缀的特殊内容，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

官方文档比较详细

2.1 v-bind （绑定接收一个“数据”）

<body>

  <div id="app">
      <span v-bind:title="message">
          停留一秒查看
      </span>
  </div>
  <!-- 2.绑定，做操作 页面的内容都写在body 中-->
  <script >
      var vm = new Vue( {
          el: "#app",
          data: {  //data 就是相当于Model 模型数据层
              message:"hello vue" //可以直接控制这个变量得到新值
          }
      });
  </script>
</body>

2.2 v-if、v-else v-else-if v-for

<body>

  <div id="app">
    <h2 v-if="ok"> 是正确的</h2>
      <h2 v-else> 是错误的</h2>
      <h3 v-for="(ys,index) in yss"  >
         {{ys.mes}}---->{{index}}
      </h3>
    <button v-on:click="sayHi" >点击事件</button>
  </div>

  <!-- 2.绑定，做操作 页面的内容都写在body 中-->
  <script >
      var vm = new Vue( {
          el: "#app",  //绑定id
          data: {  //data 就是相当于Model 模型数据层
              ok: true,
              yss: [   //注意这里的数组形式
                  {mes: "hahaha"},
                  {mes: "hehehe"},
                  {mes: "lalalala"}
              ]},
           methods: { //注意事件不是一个
               sayHi: function () {
                  alert("我是你爸爸")
               }      } });
  </script>
</body>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

在浏览器的控制台上，通过修改这个Vue变量的 data 里的变量，可以直接改变输出，判断

2.3 v-on （绑定事件）

<div id="ex">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#ex',
  data: {
    counter: 0
  }
})

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称（处理业务方法绑定）

2.4表单数据的双向绑定（v-model=变量）

在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

<div id="shuangxiang">
    输入姓名： <input type="text" v-model="mes" >
       {{mes}}
<!--v-model 实现双向绑定-->
</div>
   <script>
       var vm = new Vue( {
           el: "#shuangxiang",
           data: { //注意data
               mes: " ",
           }
       });
   </script>

</body>

输入时，能够绑定里面的输入的值，从而可以输出到指定的位置，用来处理数据业务

2.5 组件

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

自定义第一个组件

<div id="app">
<!--  抽取 公共部分，来复用，定义这个组件 ，加入标签，创建新的名称-->
    <haha></haha>  <!--不创建这个名字，标签是未知的-->
</div>

<script>
    Vue.component("haha",
        {
              template: ' <li>我自己的标签</li>'   // 创建模板
        });
    var vm = new Vue( {
        el: "#app",
    });
</script>
</body>
</html>

Vue.component()：注册组件
haha：自定义组件的名字
template：组件的模板

是小晴晴呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
2. Vue 指令基本语法和使用

指令 (Directives) 是带有v-前缀的特殊内容，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。官方文档比较详细2.1 v-bind （绑定接收一个“数据”）<body> <div id="app"> <span v-bind:title="message"> 停留一秒查看 </span> </div> <!-...
复制链接

扫一扫