vue-随笔-内置指令

引入cdn文件

初始化vue实例

    var vm = new Vue({
        el:'#app',
        data:{
        name:'cyany'
    }
 });

基本demo：

    <div id="app">
        {{name}}
    </div>

指令：
v-if 当true的时候显示，当false的时候不显示，但是不是隐藏，而是没有渲染到页面的！

<p v-if="a">  

    data:{
        // a:true
        a:false
    }

v-show:当true的时候显示，但是false的时候是被隐藏了，加了display:none的样式

<p v-show="b">

data:{
        b:false
    }

v-else ：必须紧跟着v-if，要不然不起作用，当v-if是false的时候，v-else是true显示

<p v-if="a">Lorem ipsum dolor sit amet.</p>
        <p v-else="a">haha</p>
data:{
        // a:true
        a:false,
        b:false
    }

v-model:创建双向数据绑定

<input type="text" v-model="text">
        <p>{{text}}</p>
    data:{
        text:''
    }
数字输入框：需要改变type类型为number，然后在最后加上number
<input type="number" v-model="num" number>
        <p>{{num}}</p>
    data:{
        num:''
    }

v-for 循环数组或对象

        <ul>
            <li v-for="(item,index) in items">{{index}}----{{item}}</li>
        </ul>

    data:{
        items:['a','b','c']
    }

v-text 可以更新元素的内容

<p v-text="c"></p>
    data:{
        c:'ccc'
    }

v-html:更新元素的内容，会解析HTML

<p v-html="html"></p>
    data:{
        html:'<b>haha</b>'
    }

v-bind:绑定HTML属性或则是组件props绑定表达式

<p v-bind:class="haha">bind</p>
    data:{
        haha:'bindClass'
    }

v-on:绑定事件

        <button v-on:click="co">click</button>
        <button v-on:click.stop="co">click</button> 调用event.stopPropagation()
        <button v-on:click.prevent="co">click</button> 调用event.preventDefault()
        <button v-on:keyup.enter="co">click</button> 调用指定按键enter
    methods:{
        co:()=>{
            console.log('click events')
        },
    }

v-ref 在父组件注册一个子组件的索引，不要表达式，必须提供参数id，可以通过父组件的$refs对象访问子组件
v-ref:some-ref this.$els.someRef (不是很理解，之后在找资料看看)

v-el 为dom元素注册一个索引，方便通过所属实例的$els访问这个元素，可以用v-el:some-el设置this.$els.someEl (好像vue2.x版本运行不了报错没有v-el指令，这就尴尬了···)

vue-随笔-内置指令

猜你喜欢