VUE第七天

<div id="root">
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是：{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是：{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是：{{time | timeFormater}}</h3>
      <!-- 过滤器实现（传参） -->
      <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
      <h3 :x="msg | mySlice">尚硅谷</h3>
    </div>
    <div id="root2">
      <h2>{{msg | mySlice}}</h2>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice',function(value){
      return value.slice(0,4)
    })
    new Vue({
      el:'#root',
      data:{
        time:1621561377603, //时间戳
        msg:'你好，尚硅谷'
      },
      computed: {
        fmtTime(){
          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
        }
      },
      methods: {
        getFmtTime(){
          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
        }
      },
      //局部过滤器
      filters:{
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
          // console.log('@',value)
          return dayjs(value).format(str)
        }
      }
    })
    new Vue({
      el:'#root2',
      data:{
        msg:'hello,atguigu!'
      }
    })
  </script>

我们学过的指令：
        v-bind: 单向绑定解析表达式, 可简写为 :xxx
        v-model: 双向数据绑定
        v-for: 遍历数组/对象/字符串
        v-on: 绑定事件监听, 可简写为@
        v-if: 条件渲染（动态控制节点是否存存在）
        v-else: 条件渲染（动态控制节点是否存存在）
        v-show: 条件渲染 (动态控制节点是否展示)
        v-text指令：
  1.作用：向其所在的节点中渲染文本内容。
  2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
        v-html指令：
  1.作用：向指定节点中渲染包含html结构的内容。
  2.与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
                (2).v-html可以识别html结构。
  3.严重注意：v-html有安全性问题！！！！
                (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
                (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
            v-cloak指令（没有值）：
                1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
                2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
            v-once指令：
                1.v-once所在节点在初次动态渲染后，就视为静态内容了。
                2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
            v-pre指令：
                1.跳过其所在节点的编译过程。
                2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。