黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目day1(一） [打印本页]

作者: 谷粒姐姐 时间: 2019-8-15 17:45
标题: 【郑州校区】前端笔记Vue项目day1(一）
本帖最后由谷粒姐姐于 2019-8-15 17:46 编辑

day01
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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2