Vue相关指令

Vue是什么？

Vue（读音/vju:/）是一套用于构建用户界面的渐进式框架。

Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

指令

1.本质就是自定义属性

2.Vue中指定都是以v-开头。

V-cloak

防止页面加载时出现闪动问题

   [v-cloak]{
display:none;//先让元素进行隐藏
}


<div id='app'>
<div v-cloak>{{msg}}</div> //添加v-cloak属性，
</div>

<script type="text/javascript" src="js/vue.js">//引入vue.js库文件
<script>
var vm=new Vue({
el:'#app', //指定元素id是app的元素
data:{ //data存储数据
msg:'hello vue'
}

v-text

1.v-text 指令用于将数据填充到标签中，作用与插值表达式类似，但是v-text没有闪动问题

2.如果数据中有html标签会将html标签一并输出

3.此绑定为单向绑定，数据对象上的值改变，插值会发生改变，但是当插值发生变化并不会影响数据对象的值。

<div id='app'>
<p v-text='msg'></p> //在指令中不要写插值语法，直接写变量名称，
</div>  //Vue只有在html标签中采用插值表单式
var vm=new Vue({
el:'#app',
data:{
msg:'nihao'
}

v-html

1.用法和v-text相似，但是它可以将html片段填充到标签中

2.可能有安全问题，一般只在可信任的内容上使用v-html，永不用在用户提交的内容上

3.它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行解析，但v-html会将其当html标签解析后输出。

<div id='app'>
<p v-html='html'></p> //输出，html标签在渲染时被解析 会在页面显示h1标题样式的内容
</div>

<script>
var vm=new Vue({
el:'#app',
data:{
html:'<h1>nihao</h1>
}

v-pre

1.显示原始的信息跳过编译过程

2.跳过这个元素和它的子元素的编译过程

3.一些静态的内容不需要编译加这个指令可以加快渲染

<div id='app'>
<span v-pre>{{msg}}</span> //即使在data里面已经定义了msg标签，但是在这里仍然显示的{{msg}}
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'hello',
}
</script>

v-once

1.执行一次性的插值，当数据改变时，插值处的内容不会继续更新

<span v-once>{{ msg}}</span>
//即使data里面定义了msg，后期我们修改了，数据仍然显示的是第一次data里面缓存的数据    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

双向数据绑定

1.当数据发生变化的时候，视图也就跟着变化

2.当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model是一个指令，只能限制在input，select textarea components中使用

<div id="app">
      <div>{{msg}}</div>
      <div>
          当输入框中内容改变的时候，  页面上的msg  会自动更新
        <input type="text" v-model='msg'>
      </div>
  </div>

指令还有很多，会慢慢列举的。