VUE在当前前端的地位

论框架知名度，现阶段国内前端VUE的名声可以说无人可出其左右，谈到国产框架，前端人提到VUE无不自豪。

为何一个国人写的框架能在众多大神技术和外国领导起航的javascript脱颖而出，那么小编接下来带领大家一览VUE框架

Vue 是什么？

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
• vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

使用Vue将helloworld 渲染到页面上

指令

• 本质就是自定义属性
• Vue中指定都是以 v- 开头

v-cloak

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

  {{msg}}

  
  
  
  
  
  

v-text

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

• 如果数据中有HTML标签会将html标签一并输出

• 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

  {{msg}}

v-html

• 用法和v-text 相似 但是他可以将HTML片段填充到标签中

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

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

  
  　　

      <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
      
  　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
  </div>
  <script>
  　　let app = new Vue({
  　　el: "#app",
  　　data: {
  　　　　message: "<span>通过双括号绑定</span>",
  　　　　html: "<span>html标签在渲染的时候被解析</span>",
  　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
  　　}
   });
  </script>
  

v-pre

• 显示原始信息跳过编译过程

• 跳过这个元素和它的子元素的编译过程。

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

    <span v-pre>{{ this will not be compiled }}</span>    
    <!--  显示的是{{ this will not be compiled }}  -->
    <span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
  

v-once

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

  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>