VUE基础知识09

其他常用指令
1.v-show v-if v-else v-else-if v-for(Array,Object,number,string,Iterable) v-on v-bind v-model
2.v-text,v-html注入text和html
3.v-pre跳过这个元素和它的子元素的编译过程，可以用来显示原始的mustache标签，跳过大量没有指令的节点会加快编译。
4.v-cloak：防止闪现；和CSS规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
5.v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新性能。
6.特殊属性：ref

新建组件：OtherInstruct.vue

//App.vue里面加载这个组件
<OtherInstruct/>
import OtherInstruct from './components/OtherInstruct'
components:{OtherInstruct}

<p>{{content}}</p>
<p v-text="content"></p>
//前者内部可以加内容，后者不能加，因为不显示，不拼接，覆盖！
<p v-html="contentOne"></p>//显示为超链接格式，能够简析里面的标签！不建议使用，在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
<p v-pre>{{intro}}</p>//不会编译，当暂时用不到这个标签的时候。
<p v-cloak>{{message}}</p>//没有渲染完成的时候，不会展示的！
<p v-once>{{name}}</p>//只更改一次，不会再次更改！
<p>{{name}}</p>
<input type="text" placeholder="请输入姓名！" v-model="name">
<p ref="fish"></p>
<button @click="log"></button>

data(){
  return{
    content:'I love you!',
    contentOne:'<a href="http://www.itlike.com">love FJ</a>',
    intro:'Like IT',
    message:'good luck!',
    name:'hi'
  }
},
methods:{
    log(){
       console.log(this.$refs.fish);
       console.log(this.$refs.fish.innerHTML);//拿到标签里面的内容！
    }
}

[v-cloak]{
   display:none;
}