【郑州校区】前端笔记Vue项目之Vue 是什么？

【郑州校区】前端笔记Vue项目之Vue 是什么？

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

指令

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

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

[AppleScript] 纯文本查看 复制代码

<style type="text/css">

  /*

    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏

 */

  [v-cloak]{

    /* 元素隐藏    */

    display: none;

  }

  </style>

<body>

  <div id="app">

    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 

         在 数据渲染完场之后，v-cloak 属性会被自动去除，

         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签

                 也就是对应的标签会变为可见

    -->

    <div  v-cloak  >{{msg}}</div>

  </div>

  <script type="text/javascript" src="js/vue.js"></script>

  <script type="text/javascript">

    var vm = new Vue({

      //  el   指定元素 id 是 app 的元素  

      el: '#app',

      //  data  里面存储的是数据

      data: {

        msg: 'Hello Vue'

      }

    });

</script>

</body>

</html>

v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

[AppleScript] 纯文本查看 复制代码

<div id="app">
    <!--  
                注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
                一般属性中不加 {{}}  直接写 对应 的数据名 
        -->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
 
</script>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目之Vue 是什么？

0 个回复