小白学前端--------------Vue基础(2)

一.Vue视图

1.1 基本模板语法

插值

{{title}}
<p v-text="title"></p>
<p v-once> {{ title }} 不会改动这里面的内容</p>


插入HTML
<div v-html="content">

绑定属性

<img v-bind:src="imgSrc" v-bind:title="title" v-bind:alt="message">
简写
<img :src="imgSrc" :title="title" :alt="message">

视图进行表达式运算

{{表达式运算}}
不建议这么做

防止闪烁

CSS属性:[v-cloak] {
            display: none !important;
        	}

<div id="app" class="v-cloak"></div>

指令列表

v-text		文本内容
v-html		在html种以什么样式显示
v-on 		可以缩写为@ 		绑定事件
v-bind		可以缩写为:		绑定属性
v-model		双向数据链接
v-pre
v-cloak		防止闪烁
v-once		不会改变内容

#条件渲染
v-if		写在元素中,值为true时表示有这个元素,值为false时表示没有这个元素,dom结构中也找不到
v-else-if
v-else		跟v-if组合写在不同元素中使用,表示有他没我,有我没他

v-show		值为flase时,元素的display为none,在dom里面还可以找到它,只是控制隐藏或显示

#列表渲染
v-for

2.样式绑定

class绑定

<p class="item" :class="{'current':'isCurrent',active:true,'li-item':true}">
    ......
</p>

<p :class="对象">
<p :class="数组">    
<p :class="{类名:true/false,类名:变量名}">    

style绑定

<p :style="{color:值...}">
<p :style="[{},{},{}...]">