vue的基本内置指令

1.插值表达式 {{}}
作用:将vue数据模型中的数据显示到视图层中,只能使用在双向标签中间
例子:

{{name}}


2.v-text
作用:将vue数据模型中的数据显示到视图层中,定义在开始标签中,单向标签和双向标签都可以使用
例子:

3.v-html
作用:也是将vue数据模型中的数据显示到视图层中,与v-text区别在于,v-html可以解析数据中的html标签,并显示出来。而v-text只会原样输出。
例子:

`
...省略 data: { content: "

hello

" }`

4.v-cloak
作用:解决插值表达刷新时出现闪烁问题,浏览器慢时会出现,先出现{{name}},再替换成name的属性值,如果标签加上v-cloak,浏览器会隐藏{{name}},而是再替换前显示 空白。v-cloak需要配合style使用
例子:

 <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            使用v-cloak来解决插值表达闪烁问题 
                配合样式来使用:v-cloak加一个属性:display:none
        -->
       <div v-cloak>{{content}}</div>
    </div>
</body>
...省略部分代码
data: {
  content: 'abc'
}

5.v-if
作用:用来控制元素的显示和隐藏,是DOM级别的操作,当为false时,销毁元素;当为true时,插入元素。v-if也是惰性操作,如果一开始就是false的时候,页面将不会有任何操作,直到变为true时,才会插入元素。
例子:

<div v-if="gender">这是一段话</div> 
 data: {
        gender: false
    }

6.v-show
作用:与v-if一样,用于控制元素的显示或者隐藏,是CSS级别操作,当为false是,给元素添加display:none样式;当元素为true时,去掉display:none样式。
例子:

<div v-show="show">这是一段话</div>
 data: {
        show: false
    }

7.v-for
作用:遍历循环数组,对象,整数,需要加上key属性,v-for(… in …)
item为遍历的每一项
例子:

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

8.v-bind
作用:用来绑定属性值,v-bind:属性=“值”,也可简写为’:属性=“值”’
例子:

<a :href="src">点我去百度</a><br/>
<a v-bind="{href: '/update?id=' + id}">修改id为5的数据</a>
...省略部分
data: {
   src: "http://www.baidu.com",
   id: 5
}

9.v-on
作用:可以用来 绑定事件 如 v-on:click 绑定点击事件,也可写成’@click‘
例子:

<input type="button" value="点我有惊喜" @click="go">
...省略部分
methods: {
   go: function() {
       console.log("我被点击啦!");
   } 
}

10.v-model
作用:双向绑定数据,在视图显示数据模型中的数据,也可以修改数据,当修改数据时,数据模型的数据也会被同时修改。
例子:

<input type="text" v-model="word">
data: {
    word: "这是一段话"
}

你可能感兴趣的:(vue基础)