美文网首页
第2课:vue实例、生命周期钩子、文本插值、数据绑定、指令事件、

第2课:vue实例、生命周期钩子、文本插值、数据绑定、指令事件、

作者: 我七 | 来源:发表于2018-09-01 17:42 被阅读0次

    第1题.分别写出 v-text ,v-html,v-bind,v-on指令的作用,v-bind的语法糖?v-on的语法糖?

    v-­text:—————­解析文本 和{{ }} 作用一样
    v­-html:————— 解析html
    v­-bind—————–v­bind 的基本用途是动态更新 HTML 元素上的属性,比如 id 、class 等
    v­-on——————它用来绑定事件监听器

    v-bind语法糖是冒号:
    v-on语法糖是@

    第2题.

    代码实战:
    要求:
    渲染文本到页面
    渲染HTML到页面
    动态绑定属性(任意属性均可)
    绑定一个事件
    必须使用到过滤器
    上述要求必须使用到,v-text,v-html,v-bind,v-on,过滤器,内容不限,场景不限,旨在对本节课的指令事件进行练习

    实战


    第1题.请用代码写出一个包含el和data选项的vue实例,并挂载到页面中id为app的div上

    <div id="app">
        {{msg}}
        <br>
        {{tips}}
        <br>
        {{6+6*3}}
        <br>
        {{6<3 ? msg:a}} 
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          msg: '我是msg',
          tips:'页面加载于 ' + new Date().toLocaleString(),
          a: 111
        } 
      })
    </script>
    

    第2题.想访问一个name为app的vue实例的el选项,下列正确的是?

    C

    A.app.el

    B.$app.el

    C.app.$el

    第3题.第一次页面加载会触发哪几个钩子?

    beforeCreate//触发
    created//实例完成后调用
    beforeMount//触发
    mounted//挂载到实例上调用
    updated
    destroyed

    相关文章

      网友评论

          本文标题:第2课:vue实例、生命周期钩子、文本插值、数据绑定、指令事件、

          本文链接:https://www.haomeiwen.com/subject/qbzbiftx.html