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

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

v-text:—————解析文本和{{ }} 作用一样
v-html:————— 解析html
v-bind—————–vbind 的基本用途是动态更新 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选项，下列正确的是？

A.app.el

B.$app.el

C.app.$el

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

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

最后编辑于：2018.09.03 01:01:16