Vue.js入门笔记 Vue基本指令学习

友情提示：此篇文章大约需要阅读 8分钟38秒，不足之处请多指教，感谢您的阅读。 订阅本站

指令

• 解释：指令 (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-bin

<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

文章借鉴