Vue.js——常用的指令

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="data:imageSrc">

<!-- 缩写 -->

<img :src="data: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>'

});

巴特西

Vue.js——常用的指令

最新文章

热门文章