学习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>