Vue.js——常用的指令

Posted 2020-10-16 赖粥粥

1、v-on：指令监听DOM事件，并在触发时运行一些javascript代码。

<div id=\'myView\'>
    <img src="img/se.png" v-on:click="queryBook">
</div>

在视图模型中调用声明的监听事件

var myViewModel = new Vue({
    el:\'#myView\',
    data:myModel,
    methods:{
        queryBook:function(){
            alert(\'ok?\');
});

2、v-for：指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items是源数据数组并且 item 是数组元素迭代的别名。

<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

var example1 = new Vue({
    el: \'#example-1\',
        data: {
        items: [
            { message: \'Foo\' },
            { message: \'Bar\' }
        ]
    }
})

运行结果：

3、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<!-- 绑定一个属性 -->
<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>

4、v-model：在表单控件元素上创建双向数据绑定，负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

运行结果：

5、component（组件）：可以扩展 html 元素，封装可重用的代码。（自定义元素）

<div id="myDiv">
    //调用自定义组件
    <student v-for="stu in stuList" v-bind:stu="stu" v-bind:key="stu.name">
    </student>
</div>

<script>
    var model = {stuList : [{id:1,name : "zhangsan", age : 18}, {id:2,name : "lisi", age : 18}, {id:3,name : "wangwu", age : 18}]};
    var vm = new Vue({
        el : "#myDiv",
        data : model
});
<script>

//如果在同一个页面中，要在确保viewModel启动之前先注册组件
//在js中自定义组件目的是为了可复用
//注册
Vue.component(\'student\', {
    //声明props
    props:[\'data\'],
    template: \'<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>\'
});