Vue 学习笔记

Colin 2月前 ⋅ 104 阅读
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Vue</title>
  <style>
    /* v-cloak 将 {{}} 标记隐藏 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
<div id="root">
  <h2>插值语法</h2>
  <h3 v-cloak> hello, {{username}} </h3>

  <h3>插值语法+过滤器(函数处理)</h3>
  <p v-cloak>{{modelval|getType}}</p>
  <p v-cloak>{{modelval|getType|slice(20)}}</p>

  <h2>指令语法</h2>
  <h3>单项数据绑定</h3>
  <p><a target="_blank" :href="smallcode"> 轻代码 </a> <br> <a target="_blank" v-bind:href="workflow"> 工作流 </a></p>
  <h3>双向项数据绑定</h3>
  <p><input v-model:value="modelval"/></p>

  <h3>计算属性</h3>
  <p v-cloak>{{userinfo}}</p>
  <p v-cloak>{{user_info}}</p>


  <h2>调用点击事件</h2>
  <button v-on:click="alertfunction">点击调用alert v-on</button>
  <br>
  <button @click="alertfunction">点击调用alert @简写</button>
  <br>
  <button @click="alertfunction(12)">点击调用alert 参数传递</button>
  <br>
  <button @click="alertfunction($event, 12)">点击调用alert 参数传递, 传递event</button>
  <br>
  <a v-on:click="alertfunction">点击调用alert a link 方式 </a>
  <br>
  <a href="http://smallcode.cn" @click.prevent="alertfunction">prevent 阻止默认事件,点击后只调函数,不做跳转</a>
  <div @click="alertfunction"><br>
    <a href="http://smallcode.cn" @click.stop.prevent="alertfunction"> stop 阻止事件冒泡,同时阻止默认的跳转事件</a><br>
  </div>
  <button @click.once="alertfunction($event, 12)"> once 事件只触发一次 , 多次点击无效 (类似于 v-once)</button>
  <div @click.capture="showMsg(1)"><br>
    <a @click="showMsg(2)"> capture 使用事件的捕获模式</a><br>
  </div>

  <div @click.self="alertfunction"><br>
    <a @click="alertfunction"> self 只有event.target是当前元素时才触发。</a><br>
  </div>

  <h2>键盘事件</h2>

  <input v-model:value="modelval" @keydown.enter="enterval"/>

  <h2>动态修改样式</h2>
  <div class="default_class" :class="custClass" @click="changeClassName">冒号class指向data 最终 class="default_class
    cust_class"
  </div>
  <br>
  <div :style="custStyle" @click="changeStyleContent">冒号style指向data</div>
  <br>
  <h2>条件显示/隐藏</h2>
  <div v-show="1 === 1">
    v-show 里的表达式 返回 true 则显示,返回false 则隐藏
  </div>
  <div v-show="visible">
    v-show 里也可以是属性
    相当于 display="none"
  </div>
  <div v-if="1 === 1">
    v-if 里的表达式 返回 true 则显示,返回false 则隐藏
  </div>
  <div v-if="visible">
    v-if 里也可以是属性
    相当于 removeDom
  </div>

  <template v-if="visible">
    <h4>template 不会被解析成dom</h4>
    <h4>template 不能配合 v-show</h4>
    <h4>template 可以配合 v-if</h4>
  </template>

  <h2>循环遍历</h2>

  <ul>
    数组遍历
    <li>
      索引 -- 用户ID -- 姓名 -- 年龄
    </li>
    <li v-cloak v-for="(user, index) in userList" :key="user.id">
      {{index}} -- {{user.id}} -- {{user.name}} -- {{user.age}}
    </li>
  </ul>

  <ul>
    对象遍历
    <li>
      key -- value
    </li>
    <li v-cloak v-for="(value, key) in userDetail" :key="index">
      {{key}} -- {{value}}
    </li>
  </ul>

  <ul>
    字符串遍历
    <li>
      index -- char
    </li>
    <li v-cloak v-for="(char, index) in smallcode" :key="index">
      {{index}} -- {{char}}
    </li>
  </ul>

  <ul>
    空值遍历
    <li>
      index -- number
    </li>
    <li v-cloak v-for="(number, index) in 5" :key="index">
      {{index}} -- {{number}}
    </li>
  </ul>

  <h2>v-pre 不参与vue解析</h2>
  <p v-pre>{{visible}} {{modelval}}</p>


</div>


<!-- 网速慢的时候,可以先加载上面的代码 ,元素加上 v-cloak 属性 可以不显示,加载结束之后再展示数据。-->
<!-- script src="js/vue.js"></script -->



  // 阻止Vue在启动时生成生产提示;
  Vue.config.productionTip = false;
  // 对象设值
  const vm = new Vue({
      el: "#root",
      // 数据属性
      data: function () {
        return {
          // v-if v-show
          visible: true,
          custStyle: {
            fontSize: "40px"
          },
          custClass: "cust_class",
          username: "Colin",
          smallcode: "http://www.smallcode.cn",
          workflow: "http://www.workflow.net.cn",
          modelval: "双向绑定的数据",
          userList: [
            {id: 1, name: "James", age: 58},
            {id: 2, name: "Jack", age: 19},
            {id: 3, name: "Glen", age: 34},
            {id: 4, name: "Hank", age: 32},
            {id: 5, name: "Lisa", age: 26}
          ],
          userDetail: {id: 1, name: "James", age: 58, sex: 'male', address: "腻蒙古自治区李七庄子镇居委会外斜街484号院"}
        };
      },
      // 计算属性
      computed: {
        // 完整写法
        userinfo: {
          get() {
            return this.username.concat(" >> ").concat(this.modelval);
          },
          set(str) {
            //...
          }
        },
        // 简写
        user_info: function () {
          return this.username.concat(" 简写 >> ").concat(this.modelval);
        }
      },
      // 方法
      methods: {
        changeStyleContent() {
          this.custStyle = {fontSize: "60px"};
        },
        changeClassName() {
          // 动态改变样式名称
          this.custClass != "new_class" ? this.custClass = "new_class" : this.custClass = "cust_class";
        },
        alertfunction(a = "没传a", b = "没传b") {
          console.info("弹出", a, b);
        },
        showMsg(m) {
          console.info(m);
        },
        enterval(e) {
          console.info(e);
        }
      },
      // 监视
      watch: {
        // 被监视的属性对象
        modelval: {
          deep: false, //复杂对象中的属性用深度监听设置为 true,默认false
          handler(newValue, oldValue = "第一次没有") {
            console.info("监测 modelval 的变更", newValue, oldValue);
          }
        }
      },
      // 过滤器
      filters: {
        getType(v) {
          return typeof (v) + " == " + v;
        },
        slice(v, num) {
          return v.slice(0, num);
        }
      },
      // 挂载完成时执行
      mounted() {
        console.info("mounted!");
      }
    })
  ;
  // 也可以后期挂载(绑定root容器)
  // vm.$mount("#root");

  // 对象属性管理
  Object.defineProperty(vm, "user", {

    enumerable: true,   /* 可以被枚举到 */
    // region
    // writable: true,     /* 可以被修改 */
    // configurable: true, /* 可以被删除 */
    // end region
    get: function () {
      return "Midas";
    }
  });
  console.info(vm.username);
  console.info(Object.keys(vm));



</body>

</html>

全部评论: 0

    我有话说: