Vue基础_基本指令01

vue指令

以下指令使用的是hbuilderX中uni-app运行的。

v-show

用来控制标签是否展示的指令，其实就是控制display属性

<view v-show="false"></view>

等同于

<view display:none></view>

如果是v-show=true，那么就不加display:none;

v-if

这个也是用来控制元素是否展示的数据，只不过这个是将dom中的元素移除，效率比v-show慢。

配合使用的还有v-else-if , v-else

<view v-if="true"></view>
<view v-else-if="true"></view>
<view v-else></view>

PS: 在条件判断元素中间不能插入其他元素，否则报错，比如下面多了一个hr标签，这样就构不成条件判断了。

<view v-if="true"></view>
<hr>
<view v-else-if="true"></view>
<view v-else></view>

v-text

<view v-text="msg"></view>
<view>{{msg}}</view>

msg:"hello wold"

这两个效果是一样的。

不同点在于v-text是作为一个属性，也就是说如果vue.js这个Js因为网络延迟等原因还没有下载下来，那么v-text的标签就不会展示。

而使用 {{}} 的，会因为无法识别"{{}}“而导致只能展示”{{msg}}"。

这两个标签都是替换textContent内容。

v-html

这个标签是用来展示有html元素的信息，其实就是等同于innerHTML。

<view v-html="msg2"></view>
msg2:"<button>click me </button>"

这样就会把msg2的内容给浏览器翻译为html元素，在页面展示一个按钮，而不是展示内容。

而如果用v-text这类textContent来展示的话，就只会原样展示出来，根本不会翻译为html元素。

<view>{{msg2}}</view>

v-for

是用来循环某个元素的指令。

<view v-for="(item) in datas"  v-text="item"></view>
<view v-for="(item) of datas"  v-text="item"></view>
datas:['a','b','c']

上面 v-for in 和 v-for of 其实是一样的，都是用来循环，在vue中没有区别。

如果是数组也可以展示数组下标，如下，

<view v-for="(item,index) of datas">
	{{index}}--->{{item}}
</view>

v-for除了可以用来循环数组，也可以用来循环一个Object，如下，

<view v-for="(value,key) in info">
    {{key}}-->{{value}}
</view>
info:{name:"king",age:22}

这样就会在页面展示

name–>king ,

age–>22

注意点

​ 上面的v-for没有加入key，一般都会写成如下方式，加入一个 :key=""

<view v-for="(item,index) in datas" :key="index">
</view>

<view v-for="(value,key) in info" :key="key">
</view>

原因是因为v-for是将标签直接循环，然后添加内容，如果不加入key，那么上述标签就会变为如下，

<view>a</view>
<view>b</view>
<view>c</view>

datas:['a','b','c']

那么如果datas其中有一个内容改变了，比如c变成d， datas:[‘a’,‘b’,‘d’]，

那么v-for就会将循环重新再刷一遍，就会重新循环一遍，而不是直接将c改为d，

如果加上一个:key，那么就会在虚拟dom中生成这个key，就变成如下所示，（虚拟dom中生成的在页面f12是看不到的）

<view  key='0'>a</view>
<view  key='1'>b</view>
<view  key='2'>c</view>

v-once

是一个只在页面加载时动态加载元素或者组件一次，以后每次都是把元素作为静态资源加载。

可以用于提高性能。

<view>{{msg}}</view>    //动态资源
<view v-once>{{msg}}</view>   //静态资源

msg:"hello world"

首次显示的话是hello world，写一个定时器，动态更新时间，下面这个还是hello world，并不会随着msg改变而改变页面内容。

updateTime(){
    var ths = this;
    setInterval(function(){
    	ths.msg = new Date().getTime();
    },1000);
}

此时会发现只有上面没有加v-once的改变了，变为了时间，下面一个并没有改变。