lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 模板语法 -->
      <!-- 注意：在视图容器中，所有指令或者插值语法的表达式 所处的作用域范围 是 vm实例 -->
      <!-- 1. 文本插值 {{ js表达式 }}-->
      <p>{{ msg }}</p>
      <p>你好，{{ name }}！</p>
      <p>{{ msg + name }}</p>
      <p>1 + 1 = {{ 1 + 1 }}</p>
      <p>当前时间：{{ formatDate(Date.now()) }}</p>
      <!-- 下面写法是错误的 -->
      <!-- <p id="{{msg}}"></p> -->
      <!-- 2. 指令：是Vue构建用户界面的核心。指令就Vue框架 给 HTML 元素 添加的那些自定义属性。通常这些属性名都是以 "v-"开头，并且具有一定功能和含义的。
      <tag v-*="js表达式"></tag>
      -->

      <!--  2.1 v-html 更新元素的 innerHTML -->
      <!-- 下面代码：会将p元素的innerHTML属性设置为 vm实例的name数据属性值 -->
      <p v-html="name">已有一些文本内容</p>
      <!-- v-text指令：更新元素的 textContent（innerText） -->
      <p v-text="msg + name"></p>
    </div>
    <script>
      // 定义一个全局函数，用来 格式化时间
      function formatDate(date) {
        var d = new Date(date);

        var y = d.getFullYear();
        var m = d.getMonth() + 1;
        var r = d.getDate();

        var h = d.getHours();
        var mm = d.getMinutes();
        var s = d.getSeconds();
        return `${y}年${m}月${r}日 ${h}时${mm}分${s}秒`;
      }
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello, Vue.',
          name: 'guoguo',
        },
        // 如果想要给Vue实例vm添加实例方法，需要通过methods来添加
        methods: {
          formatDate,
        },
      });
    </script>
  </body>
</html>