创建实例、基础指令、跑马灯、修饰符、样式、key, v-model

框架 / Vue
Word count: 1.6k   |   Reading time≈ 8 min

# Vue 第一天

这是我第 5 遍学习 Vue 了（可能是因为感觉自己达不到游刃有余的感觉吧，也可能是以前学的不系统，要学就得学扎实了。）

# 创建一个实例

<script src="../../vue.min.js"></script>
<div id="app">
  <p>{{ title }}</p>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      title: "欢迎学习Vue！",
    },
  });
</script>

# 指令

# v-cloak （ 能够解决 插值表达式闪烁问题 ）

<style>
  [v-cloak] {
    display: none;
  }
</style>
<div id="app">
  <p v-cloak>{{ title }}</p>
</div>

# v-text (功能与插值表达式相同，优点：没有闪烁问题 ，缺点：会覆盖元素中原本的内容)

<p v-text="“title”"></p>

# v-html (能够解析文本里面的 HTML 标签)

<p v-html="msg"></p>

# v-bind（ 用于绑定属性的指令 ）(简写形式 :)

<input type="button" value="按钮" v-bind:title="mytitle" />
<input type="button" value="按钮" :title="mytitle" />

# v-on (绑定事件) （简写形式 @ ）

<input type="button" value="按钮" v-on:click="alert('hello')" />
<input type="button" value="按钮" @click="alert('hello')" />

# 练习

# 跑马灯

<div id="app">
  <p>{{msg}}</p>
  <input type="button" value="开始" @click="start" />
  <input type="button" value="停止" @click="stop" />
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      msg: "猥琐发育，别浪~~~~",
      timer: null,
    },
    methods: {
      start() {
        if (this.timer != null) return;
        this.timer = setInterval(() => {
          let start = this.msg.substring(0, 1);
          let end = this.msg.substring(1);
          this.msg = end + start;
        }, 200);
      },
      stop() {
        clearInterval(this.timer);
        this.timer = null;
      },
    },
  });
</script>

mark

# 事件修饰符

# stop (阻止冒泡)

<div id="app">
  <div class="inner" @click="DivClick">
    <input type="button" value="点击" @click.stop="BtnClick" />
  </div>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      DivClick() {
        console.log("触发了inner点击事件");
      },
      BtnClick() {
        console.log("触发了按钮点击事件");
      },
    },
  });
</script>

mark

# prevent (阻止默认行为)

<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

mark

# capture （捕获触发事件机制）（从外向里 ）

<div class="inner" @click.capture="DivClick">
  <input type="button" value="点击" @click="BtnClick" />
</div>

mark

# self (只有点击当前元素才能触发事件)

<div class="inner" @click.self="DivClick">
  <input type="button" value="点击" @click="BtnClick" />
</div>

mark

# once （只触发一次事件）

<a href="http://www.baidu.com" @click.prevent.once="linkClick">去百度</a>

# v-model

# 案例（计算器）

# 代码：
<div id="app">
  <input type="text" v-model="n1" />
  <select name="" id="" v-model="opt">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" v-model="n2" />
  <input type="button" value="=" @click="btnClick" />
  <input type="text" v-model="result" />
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      n1: 0,
      n2: 0,
      result: 0,
      opt: "+",
    },
    methods: {
      btnClick() {
        switch (this.opt) {
          case "+":
            this.result = parseInt(this.n1) + parseInt(this.n2);
            break;
          case "-":
            this.result = parseInt(this.n1) - parseInt(this.n2);
            break;
          case "*":
            this.result = parseInt(this.n1) * parseInt(this.n2);
            break;
          case "/":
            this.result = parseInt(this.n1) / parseInt(this.n2);
            break;
        }
      },
    },
  });
</script>

# 代码优化（投机取巧，正式开发中尽量少用）

（使用 eval，eval () 函数可计算某个字符串，并执行其中的的 JavaScript 代码）

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      n1: 0,
      n2: 0,
      result: 0,
      opt: "+",
    },
    methods: {
      btnClick() {
        // switch (this.opt) {
        //     case '+':
        //         this.result = parseInt(this.n1) + parseInt(this.n2)
        //         break
        //     case '-':
        //         this.result = parseInt(this.n1) - parseInt(this.n2)
        //         break
        //     case '*':
        //         this.result = parseInt(this.n1) * parseInt(this.n2)
        //         break
        //     case '/':
        //         this.result = parseInt(this.n1) / parseInt(this.n2)
        //         break
        // }
        let codeStr = "parseInt(this.n1)" + this.opt + "parseInt(this.n2)";
        this.result = eval(codeStr);
      },
    },
  });
</script>

mark

mark

# Vue 中使用样式

# 使用 class 样式

# 第一种方式：直接传递一个数组

<style>
  .red {
    color: red;
  }

  .thin {
    font-weight: 200;
  }

  .italic {
    font-style: italic;
  }
</style>
<div id="app">
  <h1 :class="['red','thin','italic']">这是h1</h1>
</div>

# 在数组中使用三元表达式

<div id="app">
  <h1 :class="['red','thin',flag?'italic':'']">这是h1</h1>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      flag: true,
    },
  });
</script>

或者：

<div id="app">
  <h1 :class="['red','thin',{'italic':flag}]">这是h1</h1>
</div>
  1. 直接使用对象（true 和 false 可用变量来代替）
<div id="app">
  <h1 :class="{red:true,thin:true,italic:false}">这是h1</h1>
</div>
  1. data 里面定义
<div id="app">
  <h1 :class="classObj">这是h1</h1>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      classObj: { red: true, thin: true, italic: true },
    },
  });
</script>

# 使用内联样式

直接使用

<h1 :style="{color:'red','font-weight':200}">这是h1</h1>

data 里面调用

<div id="app">
  <h1 :style="styleObj">这是h1</h1>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      styleObj: { color: "red", "font-weight": 200 },
    },
  });
</script>

运用数组

<div id="app">
  <h1 :style="[styleObj1,styleObj2]">这是h1</h1>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      styleObj1: { color: "red", "font-weight": 200 },
      styleObj2: { "font-style": "italic" },
    },
  });
</script>

# Vue 指令之 V-for 和 key 属性

# v-for 简单实用

<div id="app">
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      list: [1, 2, 3, 4, 5, 6],
    },
  });
</script>

mark

# 索引值：

<div id="app">
  <ul>
    <li v-for="(item,index) in list">{{item}}---{{index}}</li>
  </ul>
</div>

mark

# 循环对象数组

<div id="app">
  <ul>
    <li v-for="(item,index) in list">
      {{item.id}}---{{item.name}}---{{index}}
    </li>
  </ul>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      list: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 3,
          name: "王五",
        },
        {
          id: 4,
          name: "隔壁老王",
        },
      ],
    },
  });
</script>

mark

# 遍历对象

<div id="app">
  <ul>
    <li v-for="(val,key,index) in user">{{key}}--{{val}}---{{index}}</li>
  </ul>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      user: {
        id: 1,
        name: "张三",
        hobby: "打篮球",
        sex: "男",
      },
    },
  });
</script>

mark

# 迭代数字

<div id="app">
  <p v-for="count in 5">这是第 {{count}} 次循环</p>
</div>

mark

# Vue 指令之 v-if 和 v-show

基本使用

<div id="app">
  <h3 v-if="flag">这是v-if控制的元素</h3>
  <h3 v-show="flag">这是v-show控制的元素</h3>
  <button @click="flag=!flag">点击</button>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      flag: true,
    },
  });
</script>

mark

mark

# 总结

  1. MVC 和 MVVM 的区别

  2. 学习了 Vue 中最基本的代码结构

  3. 基本指令

  4. 事件修饰符

  5. v-for 要会使用 key 属性

  6. v-model 只能应用于表单元素

Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2015-2021 zhou chen
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信