学习v-text, v-html, v-cloak 基本命令和过滤器的使用

2 years ago · 0184ae76b3
parent e9f774d5a4
commit 0184ae76b3
5 changed files with 200 additions and 0 deletions
--- a/01_初识Vue/基础模板.html
+++ b/01_初识Vue/基础模板.html
@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>xxxx</title>
  <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
  <h1>Hello, {{name}}， {{address}}， {{Date.now()}}</h1>
 </div>
 <script type="text/javascript">
  Vue.config.productionTip = false  // 组织开发环境提示
  // 创建Vue实例
  const x = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      address: '北京'
    }
  })
 </script>
 </body>
 </html>
--- a/14_过滤器/过滤器.html
+++ b/14_过滤器/过滤器.html
@ -0,0 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
 </head>
 <body>
 <div id="root">
    <h2>显示格式化后的时间</h2>
    <!--    计算属性实现-->
    <h3>计算属性实现：{{formatDatetime}}</h3>
    <!--    方法实现-->
    <h3>方法实现：{{fmtDatetime()}}</h3>
    <!--    过滤器实现-->
    <h3>过滤器实现1：{{time | formatDt}}</h3>
    <!--    过滤器传参-->
    <h3>过滤器实现2：{{time | formatDt('YYYY_MM_DD')}}</h3>
    <!--    多过滤器-->
    <h3>多过滤器实现：{{time | formatDt('YYYY_MM_DD') | yearSlice}}</h3>
    <!--    全局过滤器-->
    <h3>全局过滤器：{{time | formatDt('YYYY_MM_DD') | globalSlice}}</h3>
    <!--    绑定时使用过滤器-->
    <h3 :t="time | formatDt">绑定时使用过滤器：F12</h3>
 </div>
 </body>
 <script type="text/javascript">
    Vue.config.productionTip = false
    // 全局过滤器
    Vue.filter('globalSlice', function (val) {
        return val.slice(0, 4)
    })
    const vm = new Vue({
        el: '#root',
        data: {
            time: Date.now()
        },
        methods: {
            fmtDatetime() {
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        computed: {
            formatDatetime() {
                return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        filters: {
            formatDt(val, fmt_str = "YYYY_MM_DD HH:mm:ss") {
                return dayjs(val).format(fmt_str)
            },
            yearSlice(val) {
                return val.slice(0, 4)
            }
        }
    })
 </script>
 </html>
--- a/15_内置指令/1.v-text_指令.html
+++ b/15_内置指令/1.v-text_指令.html
@ -0,0 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>v-text</title>
  <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <!--
 v-bind: 单向绑定，可简写为 :xxx
 v-model: 双向绑定
 v-for: 循环逻辑
 v-on: 绑定监听事件，可简写为 @xxx
 v-if\v-else: 条件逻辑
 v-show: 条件渲染
 v-text: 所在标签替换文本
 -->
 <div id="root">
  <h1>Hello, {{name}}， {{address}}， {{Date.now()}}</h1>
  <h1 v-text="name"> </h1>
 </div>
 <script type="text/javascript">
  Vue.config.productionTip = false  // 组织开发环境提示
  // 创建Vue实例
  const x = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      address: '北京'
    }
  })
 </script>
 </body>
 </html>
--- a/15_内置指令/2.v-html_指令.html
+++ b/15_内置指令/2.v-html_指令.html
@ -0,0 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>v-html</title>
  <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <!--
 v-bind: 单向绑定，可简写为 :xxx
 v-model: 双向绑定
 v-for: 循环逻辑
 v-on: 绑定监听事件，可简写为 @xxx
 v-if\v-else: 条件逻辑
 v-show: 条件渲染
 v-text: 所在标签替换文本
 v-html: 将文本渲染成html代码，具有安全隐患
 -->
 <div id="root">
  <h1>Hello, {{name}}， {{address}}， {{Date.now()}}</h1>
  <h1 v-text="name"> </h1>
  <div v-html="htmlStr"></div>
 </div>
 <script type="text/javascript">
  Vue.config.productionTip = false  // 组织开发环境提示
  // 创建Vue实例
  const x = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      address: '北京',
      htmlStr: "<h1>测试v-html</h1>"
    }
  })
 </script>
 </body>
 </html>
--- a/15_内置指令/3.v-cloak_指令.html
+++ b/15_内置指令/3.v-cloak_指令.html
@ -0,0 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <style>
        [v-cloak]{display: none}
    </style>
 </head>
 <body>
 <!--
 v-bind: 单向绑定，可简写为 :xxx
 v-model: 双向绑定
 v-for: 循环逻辑
 v-on: 绑定监听事件，可简写为 @xxx
 v-if\v-else: 条件逻辑
 v-show: 条件渲染
 v-text: 所在标签替换文本
 v-html: 将文本渲染成html代码，具有安全隐患
 v-cloak: 在vue.js加载完成前加载html代码，结合css防闪烁
 -->
 <div id="root">
    <h1 v-cloak>{{name}}</h1>
 </div>
 <script type="text/javascript" src="../vue.js"></script>
 </body>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const x = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        }
    })
 </script>
 </html>