vue01

目录

创建vue项目：

插值表达式：带有返回值的式子；{{表达式}}

绑定动态属性:(v-bind)

v-on事件绑定；

vue指令-v-on事件对象

vue指令-v-on事件修饰符

-v-on按键修饰符

v-mode：双向绑定

vue指令 v-model修饰符

vue指令 v-text和v-html

vue指令 v-show和v-if

vue指令-v-for

面试题：

---

创建vue项目：

1. npm install -g @vue/cli
2. vue -V
3. vue create 项目
4. npm run serve/yarn serve

插值表达式：带有返回值的式子；{{表达式}}

<template>
  <div>
    <!-- 插值表达式 -->
    <h1>昵称：{{ msg }}</h1>
    <h2>名字：{{ obj.name }}</h2>
    <h2>年龄：<span>{{ obj.age}}:</span>{{ obj.age >= 18 ? '成年' : '未成年' }}</h2>
    <h2>文字: {{ obj.word }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //key相当于变量
      msg: '淡蓝色',
      obj: {
        name: 'pinkgirl',
        word: '你的名字',
        age: 20,
      },
    }
  },
}
</script>

<style></style>

绑定动态属性:(v-bind)

语法：v-bind:属性名="vue变量" ;

<template>
  <div>
    <a v-bind:href="url" v-bind:id="myid">谷歌</a><br />
    <img :src="imgsrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'http://www.google.com',
      myid: 'id',
      imgsrc:'https://pica.zhimg.com/v2-386b9942a0cb6dc59d6ccd188493b43e_1440w.jpg?source=172ae18b',
    }
  },
}
</script>

<style></style>

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

v-on事件绑定；

1. v-on:事件名="要执行的==少量代码=="

2. v-on:事件名="methods中的函数"

3. v-on:事件名="methods中的函数(实参)"

<template>
  <div>
    <p>小黑年龄 :{{ age }}</p>
    <button v-on:click="age++">age+1</button>
    <button v-on:click="agefn">age+3</button>
    <button v-on:click="ageconunt(10)">age:传参</button>
    <button @click="decfn">v-on简写</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 10,
    }
  },
  methods: {
    agefn() {
      this.age += 3
    },
    ageconunt(conunt) {
      this.age += conunt
    },
    decfn() {
      this.age--
    },
  },
}
</script>

<style></style>

vue指令-v-on事件对象

语法：

1. 无传参, 通过形参直接接收

2. 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <!-- 不传参 -->
    <a @click="skip" href="http://www.google.com">跳转1</a><br />
    <!-- 传参需要手动传参 -->
    <a @click="skipone(10, $event)" href="http://www.google.com">跳转2</a>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    skip(e) {
      e.preventDefault()
    },
    skipone(num, e) {
      console.log(num, e)
      e.preventDefault()
    },
  },
}
</script>

<style></style>

vue指令-v-on事件修饰符

语法：@事件名.修饰符="methods里函数"

1. .stop - 阻止事件冒泡

2. .prevent - 阻止默认行为

3. .once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div @click="fafn">
    <!--.stop 阻止冒泡 -->
    <button @click.stop="sonfn">按钮</button>
    <!-- 阻止冒泡和默认行为 -->
    <a @click.prevent.stop="fn" href="http://www.google.com">谷歌</a>
    <!-- 直接默认行为 -->
    <a @click.prevent href="http://www.google.com"></a>
    <!-- 只触发一次 -->
    <button @click.once="fnone">触发一次</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    fafn() {
      console.log('father')
    },
    sonfn() {
      console.log('son')
    },
    fn() {
      console.log(33)
    },
    fnone() {
      console.log('once')
    },
  },
}
</script>

<style></style>

-v-on按键修饰符

1. @keydown.enter - 监测回车按键

2. @keydown.esc - 监测返回按键

<template>
  <div @click="fafn">
    <!--.stop 阻止冒泡 -->
    <button @click.stop="sonfn">按钮</button>
    <!-- 阻止冒泡和默认行为 -->
    <a @click.prevent.stop="fn" href="http://www.google.com">谷歌</a>
    <!-- 直接默认行为 -->
    <a @click.prevent href="http://www.google.com"></a>
    <!-- 只触发一次 -->
    <button @click.once="fnone">触发一次</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    fafn() {
      console.log('father')
    },
    sonfn() {
      console.log('son')
    },
    fn() {
      console.log(33)
    },
    fnone() {
      console.log('once')
    },
  },
}
</script>

<style></style>

v-mode：双向绑定

• 语法: v-model="vue数据变量"

• 双向数据绑定

  • 数据变化 -> 视图自动同步

  • 视图变化 -> 数据自动同步

• 演示: 用户名绑定 - vue内部是MVVM设计模式

<template>
  <div>
    用户名 : <input v-model="uname" type="text" />
    <br />
    密 码 : <input v-model="pwd" type="password" /><br />
    所在城市:<select v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="杭州">杭州</option>
    </select>
    <br />
    <!-- 选中数据就把那一项从数组中拿出来，删除就把选中的数据从数组中移除 -->
    爱 好：<input v-model="hobby" value="读书" type="checkbox" />读书
    <input v-model="hobby" value="写字" type="checkbox" />写字
    <input v-model="hobby" value="跑步" type="checkbox" />跑步
    <br />
 <!-- 相同的name值实现单选 -->
    性别：<input type="radio" name="sex" value="男" v-model="gender" />男
    <input type="radio" name="sex" value="女" v-model="gender" />女
    <br />
    介绍：<br /><textarea v-model="intr" cols="30" rows="10"></textarea>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uname: '你好',
      pwd: '123',
      city: '杭州',
      hobby: ['读书'], //这个用一个数组来接收，不然会都返回为true默认值是读书
      gender: '女',
      intr: '',
    }
  },
}
</script>

vue指令 v-model修饰符

• .number 以parseFloat转成数字类型

• .trim 去除首尾空白字符

• .lazy 在change时触发而非inupt时

<template>
  <div>
    age: <input type="text" v-model.number="sex" />   <br>
    word:
    <input type="text" v-model.trim="word" />
    <br>
    <!-- .lazy全部输入完才会获取到内容， -->
    介绍：<br><textarea v-model.lazy="intr" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sex: '',
      word: '',
      intr: '',
    }
  },
  methods: {},
}
</script>

vue指令 v-text和v-html

• 语法:

  • v-text="vue数据变量":不能解析标签

  • v-html="vue数据变量"：能解析标签

• 注意: 会覆盖插值表达式

<template>
  <div>
    <!-- v-text不识别标签==innertext -->
    <h2 v-text="str"></h2>
    <!-- v-html识别标签 innerhtml-->
    <!-- v-html v-text会覆盖标签内容 -->
    <h2 v-html="str"></h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: ' <span>他朝若是同淋雪，此生也算共白头</span>',
    }
  },
  methods: {},
}
</script>

vue指令 v-show和v-if

语法:

• v-show="vue变量"

• v-if="vue变量"

<template>
  <div>
    <!-- v-show  false用的display:none隐藏 ,操作频繁-->
    <!-- v-if  false直接删除节点 不频繁操作-->
    <h1 v-show="show">v-show</h1>
    <h2 v-if="isif">v-if</h2>
    <h2 v-if="age > 18">美</h2>
    <h2 v-else>丽</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      isif: true,
      age: 18,
    }
  },
  methods: {},
}
</script>

<style></style>

vue指令-v-for

目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

<template>
  <div>
    <!-- <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}---{{ index }}</li>
    </ul> -->
    <ul>
      <li v-for="item in stuArr" :key="item.id">
        <span>{{ item.id }}</span>-
        <span>{{ item.name }}</span>-
        <span>{{ item.sex }}</span>-
        <span>{{ item.hobby }}</span>
      </li>
    </ul>
    <h3>对象遍历</h3>
    <ul>
      <li v-for='(value,key) in tObj' :key='key'>{{value}} ---{{key}}</li>
    </ul>
    <h3>序号</h3>
    <!-- <li v-for='i in 10'>{{i}}</li> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['aa', 'bb', 'cc', 'dd', 'ee'],
      stuArr: [
        {
          id: 1001,
          name: '孙悟空',
          sex: '男',
          hobby: '吃桃子',
        },
        {
          id: 1002,
          name: '猪八戒',
          sex: '男',
          hobby: '背媳妇',
        },
      ],
         tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    }
  },
}
</script>

<style></style>

面试题：

1、为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.