vue 不同条件展示不同页面_Vue 指令 / 页面展示

页面展示

基本指令

v-text

用于在页面中展示数据，可以简写为{ { }}的形式

{ {msg}}

v-html

同样是用于展示数据，与v-text区别相当于innerHtml和textContent

v-pre

用来在展示页面是跳过渲染某一段代码，该方法主要可以用来跳过没有指令的代码来提高加载速度

{ {msg}}

v-once

添加了该指令的元素/组件只会渲染一次，之后vue重新渲染时会直接跳过该元素/组件，即使我们改变元素/组件引用的数据，元素也不会重新渲染，我们可以在内容固定的元素/指令上使用该指令来节省性能

{ {msg}}

v-bind

可以绑定一个或多个动态，或者一个组件的prop，在vue中可以使用v-bing来将元素本身的属性变为动态特性， 成为动态特性后可以接受变量值，使元素更加灵活，可以简写为 " : " 的形式

v-on

绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名字或者是一个内联语句，当用在普通元素上时只支持原生DOM事件，用在组件上时可以支持自定义事件，可以简写为"@"形式

v-cloak

该指令是vue用来配合css样式在vue没有在页面渲染完成之前，使用该指令的元素不显示，使用户界面不会展示在渲染未完成之前的{ {msg}}之类的修饰符，该指令会在页面渲染完成之后自动被去除

[v-cloak]{

display:none;

}

ref

ref用来给元素或者子组件设定引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM上使用，引用指向的就是DOM元素对象，如果在组件上使用，引用指向的就是子组件对象

{ {picked}}

new Vue({

...

created(){

console.log(this.$refs.p,"created"); // p undefined

this.$refs.p.style.color="red"; //Cannot read property 'style' of undefined"

},

mounted(){

console.log(this.$refs,"mounted"); //p:p

this.$refs.p.style.color="red";

}

})

通过ref注册的元素/组件可以在父组件的this.$refs中获取，但是需要注意的是，我们注册的元素/组件初始渲染时不能被获取到的，只有在创建完成时才能被获取，因为ref本身是作为渲染结果被创建的，同时refs也不是响应式的

绑定HTML class样式

hello

hello

hello

hello

hello

new Vue({

data: {

bool: true,

classList: {

colGreen: true,

style: true

},

c