Debug客栈
做一个爱分享的程序猿
Debug客栈
Vue2.x之Vue基本指令学习

指令

  • 解释:指令 (Directives) 是带有 v- 前缀的特殊属性
  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

常用指令

v-text

  • 解释:更新元素的 textContent
<h1 v-text="msg"></h1>

v-html

  • 解释:更新元素的 innerHTML
<h1 v-html="msg"></h1>

v-bind

  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
  • 语法:v-bind:title="msg"
  • 简写::title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      // el 用来指定vue挂载到页面中的元素,值是:选择器
      // 理解:用来指定vue管理的HTML区域
      el: '#app',
      // 数据对象,用来给视图中提供数据的
      data: {
        url: 'http://www.baidu.com'
      }
    })
  </script>

v-on

  • 作用:绑定事件
  • 语法:v-on:click="say" or v-on:click="say('参数', $event)"
  • 简写:@click="say"
  • 说明:绑定的事件从methods中获取
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething(“123”)"></a>

 <script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      // methods属性用来给vue实例提供方法(事件)
      methods: {
        doSomething: function(str) {
          //接受参数,并输出
          console.log(str);
        }
      }
    })
  </script>

事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .captrue 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身(比如说不是子元素)触发的回调
  • .once 事件只触发一次

V-Model

  • 作用:在表单元素上创建双向数据绑定
  • 说明:监听用户的输入事件以更新数据
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

V-Class及V-Style

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。

  • 说明:控制元素class样式,使用v-bind,只需要通过表达式计算出字符串结果即可;
  • 表达式类型:字符串、数组、对象。
// 公共样式定义
<style>
    .red{
        color: red;
    }
    .font35{
        font-size: 35px;
    }
    .bgblue{
        background-color: blue;
    }
</style>
<div id="app">
    <!-- v-bind:class用法 -->
    <!-- 1、class对象语法 -->
    <h2 v-bind:class="{ red:isActive, bgnlue:false}">你好么,世界!!</h2>
    <hr>
    <!-- 2、数组语法 -->
    <h2 v-bind:class="[classRed, classBgblue]">你好</h2>
    <hr>
    
    <!-- v-bind:style用法 -->
    <!-- 1、对象语法 -->
    <p v-bind:style = "PClass">hello world</p>
    <!-- 2、数组语法 -->
    <p v-bind:style="[csRed, csBgblue]">hello world</p>
</div>
<script src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
    el : '#app',
    data : {
        // v-bind:class 数据绑定
        // 1、class对象语法
        isActive : true,
        isHidden : false,
        // 2、数组语法
        classRed : 'red',
        classBgblue : 'bgblue',

        // v-bind:style 数据绑定
        // 1、对象语法
        PClass : {
            color : 'red',
            font35 : true,
        },
        // 2、数组语法
        csRed: {
            color: 'red',
        },
        csBgblue: {
            bgblue: true,
        },
    },
    methods: {
        
    },
});
</script>

V-for

  • 作用:基于源数据多次渲染元素或模板块
<!-- 1、迭代数组 -->
<ul v-for="item in items">
    <li>{{ item.message }}</li>
</ul>
<!-- 2、迭代数组中的属性 -->
<ul v-for="(item, i) in items" key="item">
    <li>{{ item.message }}-----{{i}}</li>
</ul>
<!-- 3、迭代数字 -->
<ul v-for="i in 10">
    <li>这是第{{i}}个标签</li>
</ul>
var vm = new Vue({
    el: '#app',
    data: {
        items: [
            { message: 'a1111111' },
            { message: 'b2222222' },
            { message: 'c3333333' },
        ]
    },
});

v-if 和 v-show

  • v-if:根据表达式的值的真假条件,销毁或重建元素
  • v-show:根据表达式之真假值,切换元素的 display CSS 属性

Vue 指令基本使用大全 for 掘金
Vue官方教程 for vue.js

文章借鉴
赞赏
本文链接:https://www.debuginn.cn/3750.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,转载请保留此文章链接
相关链接: Debug客栈  |  Debug客栈引导页  |  加入交流群  |  赞助本站  |  博主微博  |  博主推特  |  音乐下载器
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善

可能这些文章会对你有所帮助

发表评论

textsms
account_circle
email

Debug客栈

Vue2.x之Vue基本指令学习
指令 解释:指令 (Directives) 是带有 v- 前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM 常用指令 v-text 解释:更新元素的 t…
扫描二维码继续阅读
2019-08-07