vue 模板语法

　　在学模板语法前，先了解两个概念，一个是数据绑定，一个是指令。数据绑定，形式就是两组嵌套的花括号，长这样婶儿的{{}}，在这两个花括号里头，我们可以放置需要展示的动态数据（注意，放在双花括号里的内容，都会被解释为普通文本），所谓的数据绑定，我理解的就是用这个形式将需要展示的数据，绑定到对应的元素上。而指令呢，说白了，就是控制使用它的元素去做指定的事情，在vue中，指令的形式是v-，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。具体的我们用一下就知道了~

　　插值的方法

　　下面开始学习模板语法，先说一下插值的方法，在上一篇文章中，我们写的第一个vue实例，用双花括号绑定了“hello vue”的字符串{{msg}}，这就是插值最直接的使用方法，另外，我们还可以用指令的方式去插值，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div class="myApp">
        <p>{{sayHello}}</p>
        <p v-text="vText"></p>
    </div>
    
    
    <script>
        var myApp = new Vue({
            el: '.myApp',
            data: {
                sayHello: 'hello Vue!',
                vText: 'how to use v-text'
            }
        });
    </script>
</body>
</html>

　　上面，我们使用v-text指令同样实现了插值。另外，我们还可以使用v-html指令，来插入html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div class="myApp">
        <p>{{sayHello}}</p>
        <p v-text="vText"></p>
        <p v-html="vHtml"></p>
    </div>
    
    
    <script>
        var myApp = new Vue({
            el: '.myApp',
            data: {
                sayHello: 'hello Vue!',
                vText: 'how to use v-text',
                vHtml: '<span>how to ues v-html</span>'
            }
        });
    </script>
</body>
</html>

　　另外，我们不仅可以给标签里插值，还可以使用v-bind指令给标签属性插值哦~，具体使用方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .hellofont{
            font-size: 20px;
            color: pink;
            font-weight: bold; 
        }
    </style>
</head>
<body>
    <div class="myApp">
        <p v-bind:class="helloStyle">{{sayHello}}</p>
        <p v-text="vText"></p>
        <p v-html="vHtml"></p>
    </div>
    
    
    <script>
        var myApp = new Vue({
            el: '.myApp',
            data: {
                sayHello: 'hello Vue!',
                vText: 'how to use v-text',
                vHtml: '<span>how to ues v-html</span>',
                helloStyle: 'hellofont'
            }
        });
    </script>
</body>
</html>

　　通过上面的例子，我们给包裹hello的p标签添加了一个类，从而给它加上了特有的样式。

　　在上面所以用的例子中，我们都是通过指令或者数据绑定的方式，直接插入值或属性值，其实，我们还可以在这些的基础上，实现表达式，但是只能是单个表达式，在表达式中，我们可以进行运算或者使用方法等等，具体看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .hellofont{
            font-size: 20px;
            color: pink;
            font-weight: bold; 
        }
        .num0{
            font-size: 18px;
            color: green;
            font-weight: bold; 
        }
    </style>
</head>
<body>
    <div class="myApp">
        <p v-bind:class="helloStyle">{{sayHello}}</p>
        <p v-text="vText"></p>
        <p v-html="vHtml"></p>
        <p v-bind:class="'num' + num">{{(num+1)*10}}</p>
    </div>
    
    
    <script>
        var myApp = new Vue({
            el: '.myApp',
            data: {
                sayHello: 'hello Vue!',
                vText: 'how to use v-text',
                vHtml: '<span>how to ues v-html</span>',
                helloStyle: 'hellofont',
                num: 0
            }
        });
    </script>
</body>
</html>

　　上面<p v-bind:class="'num' + num">{{(num+1)*10}}</p>，就使用了两个表达式，一个指定class，一个显示值。

　　在文章最开始的时候，我们已经理解过了指令的含义了，上面我们用到的指令有v-text、v-html、v-bind，下面我们就来看看vue常用的指令都有哪些：

　　v-text：用于插值，更新元素的显示内容；

　　v-html：用于更新元素的innerHTML；

　　v-show：根据表达式值的真假，切换display属性；

　　v-if：根据表达式的真假来渲染应用的元素；

　　v-else：不需要表达式，不过需要跟在v-if或者v-else-if后面使用；

　　v-else-if：根据表达式的真假来渲染应用的元素，不过需要跟在v-if或者v-else-if后面使用；

　　v-for：根据源数据多次渲染元素或者模板块；

　　v-model：随表单控件类型不同而不同。在表单控件或者组件上创建双向绑定。

　　　　修饰符：

　　　　　　.lazy - 取代 input 监听 change 事件

　　　　　　.number - 输入字符串转为有效的数字

　　　　　　.trim - 输入首尾空格过滤

　　v-on：用于绑定事件监听器，这个是很重要的指令哦，而且，因为用的相对来讲会比较频繁，她是有缩写的，而且也有修饰符（修饰符指定事件的触发条件），具体如下：

　　　　缩写：@

　　　　修饰符：

　　　　　　.stop - 调用 event.stopPropagation()。

　　　　　　.prevent - 调用 event.preventDefault()。

　　　　　　.capture - 添加事件侦听器时使用 capture 模式。

　　　　　　.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

　　　　　　.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

　　　　　　.native - 监听组件根元素的原生事件。

　　　　　　.once - 只触发一次回调。

　　　　　　.left - (2.2.0) 只当点击鼠标左键时触发。

　　　　　　.right - (2.2.0) 只当点击鼠标右键时触发。

　　　　　　.middle - (2.2.0) 只当点击鼠标中键时触发。

　　　　　　.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

　　　　示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

　　　　在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

　　v-bind：动态绑定一个或者多个特性，v-bind也是有缩写的，而且也有修饰符，具体如下：

　　　　缩写：‘:’

　　　　修饰符：

　　　　　　.prop - 被用于绑定 DOM 属性 (property)。

　　　　　　.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

　　　　　　.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

　　　　示例：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

　　v-once：不需要表达式，只渲染元素或者组件一次。

　　以上就是vue比较常用的指令了，最后，我们实践一下v-on的使用方法（^-^因为绑定事件是比较重要的啦）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue模板语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
    .hellofont {
        font-size: 20px;
        color: pink;
        font-weight: bold;
    }

    .num0 {
        font-size: 18px;
        color: green;
        font-weight: bold;
    }
    </style>
</head>

<body>
    <div class="myApp">
        <p v-bind:class="helloStyle">{{sayHello}}</p>
        <p v-text="vText"></p>
        <p v-html="vHtml"></p>
        <p v-bind:class="'num' + num">{{(num+1)*10}}</p>
        <p>
            <a :href="baiduUrl">点我百度一下</a>
        </p>
        <p>
            <!-- <button v-on:click="plusNum()">点我递增数字</button> -->
            <button @click="plusNum()">点我递增数字</button>
        </p>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            sayHello: 'hello Vue!',
            vText: 'how to use v-text',
            vHtml: '<span>how to ues v-html</span>',
            helloStyle: 'hellofont',
            baiduUrl: 'http://www.baidu.com',
            num: 0
        },
        methods: {
            plusNum: function() {
                this.num++;
            }
        }
    });
    </script>
</body>

</html>

posted @ 2019-02-13 10:52 姜腾腾阅读(2021) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部