Vue

官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

0-vue 目录结构

Vite

node_modules: npm 加载的项目依赖模块

public: 公共资源目录

src: 开发的目录，基本上要做的事情都在这个目录里

assets: 放置一些图片，如logo等。

components: 目录里面放组件文件，可以没有

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录

main.js: 项目的核心文件，貌似做的只是创建App

index.css: 样式文件

package.json: 项目配置文件

README.md: 说明文件

dist: 使用 npm run build 命令打包后会生成目录

1-模板

模板语法 | Vue.js (vuejs.org)

0-简单实例

类似temp 挖空然后动态的填值这里使用了{{}}、v-html以及v-bend,详细的解释见注释内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<template>
  <h4> mhqdz's vue </h3>
  <div>
      <!-- {{}}对于文本不作解释 相当于字符串用``包裹 -->
      <div>{{ baidu }}</div>
      <!-- v-html 会将传入的值当作html来解释 {{a}}等同于v-text=a v-text的用法与v-html相同-->
      <div v-html="baidu"/>
      
      <!-- {{}} 支持简单的js表达式 包括三目运算符-->
      <p>{{ ok==true?"行":"不行" }}</p>

      <!-- v-bind 可以省略写为:如:id==v-bind:id 用于动态写入标签的值如id、class -->
      <div :id="mhId" v-bind:class="mhClass"/> 
  </div>
</template>

<script>
  // export default 默认值
  export default {
    data() {
      return{
        // http/https 如果不加的话会转跳到 localhost:8081/www.baidu.com 而非百度
        baidu:"<a href='https://www.baidu.com'>百度</a>",
        mhId:1002,
        mhClass:"c02",
        ok:true
      }
    }
  }
</script>

使用 npm run serve运行的结果

1-指令 v-…

内置指令 | Vue.js (vuejs.org)

指令是带有 v- 前缀的[属性](attribute

中的name) Vue 提供了许多内置指令,包括上面我们所介绍的 v-bind 和 v-html,v-指令不局限于某个标签 div里能用的指令 p\h1等也都可以用

v-if-elseif-else

用法与后端的 if-else相同 if=后面跟一个bool值无论是直接传的true\false还是比较之后得到的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<template>
  <p v-if=ok>
    👌 ok
  </p>

  <h1  v-else-if="'a'!='a'">
    a不是a
  </h1>

  <p v-else-if="flag==='b'">
    flag是b
  </p>

  <div v-else>
    🙌 不ok 
  </div>
</template>

<script>
export default {
  data(){
    return {
      ok:false,
      flag:'b'
    }
  }
}
</script>

v-show可见性

控制可见性

用法与v-if几乎相同差别在于传入值不局限于bool而是any

1

<h1 v-show="ok">Hello!</h1>

v-show和v-if的区别在于v-show控制的是可见性尽管一个标签不可见但它依然存在于网页源代码中但v-if如果不满足则根本不会让它被网页渲染

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适

v-html&v-text

v-text

v-text通过设置标签的的 textContent 属性来工作因此它将覆盖所有现有的内容如果只需要部分的改变请使用{{}}来实现比如<p>不需要改变的信息{{msg}}</p>或<p>{{'不需要改变的信息'+msg}}</p>

1
2
3


<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

v-html

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替

1

<div v-html="<a href='https://www.baidu.com'>百度</a>"></div>

v-for

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<script setup>
import { ref } from 'vue'

const parentMessage = ref('Parent')
const items = ref([{ mId:1, message: 'Foo' }, { mId:2, message: 'Bar' }])
</script>

<template>
  <!-- 等价于go的for index,item range items -->
  <!-- v-for="(item,index) in items" in&of在这里作用相同 of是javaScript里的习惯写法-->
  <!-- 如果只有一个参数 v-for = item in items 则不会出现 0\1 这个index-->
  <!-- 关于 key 见代码框下方 -->
  <li v-for="(item,index) of items" :key="item.mId">
    {{ parentMessage }} - {{ index }} - {{item}} - {{ item.message }}
  </li>
</template>

1
2
3
4


<!-- v-for 遍历的对象也支持数字,结果是从1开始到10结束的10个数字 -->
<li v-for="i of 10">
  {{ i }}
</li>

:key 在用v-for更新已渲染的元素列表的时候,会使用就地复用的策略;这就是说列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改了就重新渲染,不然就复用之前的元素省略key虽然也可以跑但不少编译器都会报错

注:v-for代表循环而不是列表所以它支持嵌套并且不局限于<li>标签它也可以放在<div>甚至<template>

运行结果:

v-on事件监听

v-on(一般简写为@)可以用来监听dom事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<script setup>

import {ref} from 'vue'

const counter = ref(0)
const msg = ref("别碰我")

function f1(event){
  console.log(event)
  // 点击事件后更改信息
  event.target.innerHTML = '已经打印了'
}
</script>

<template>
  <!--
    click这类鼠标事件 在p标签上也可以被监听
    @click="counter" 等价于 v-on:click="counter"
  -->
  <button @click="++counter>10?counter='手指不够了':counter">
    {{ '点击次数:' + counter }}
  </button>

  <!-- 
    => 语法:
    var y = x => x+1;
    y(1);// y(1) = 2 相对于运行了 x=1 然后y=x+1 这里x+1也可以是函数等更复杂的数据处理
  -->
  <!-- 通用写法:(event)=>f1(event) event是一个事件信息的常量所以可以直接用$event来使用"-->
  <p @click="f1($event)">打印event</p>
</template>

事件修饰符

.stop:阻止冒泡事件

.prevent:阻止默认行为

.self:只监听触发该元素的事件

.capture:阻止捕获

.once:只有第一次触发有效

.passive:

.left:左键事件

.right:右键事件

.middle:中间滚轮事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<script setup>

import {ref} from 'vue'

function f1(){
  alert('你好')
}
</script>

<template>
   <!-- 单击后 '你好'这条信息会出现 但不会转跳到百度 -->
   <a href="http://www.baidu.com" @click.prevent="f1">点我提示信息</a>
</template>

事件修饰符可以套娃

v-model

<input v-model="text">等价于

<input :value="text" @input="event => text = event.target.value">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<script setup>

import {ref} from 'vue'

var text1,text2 = ref()

</script>

<template>
  <input :value="text1" @input="event => text1 = event.target.value">
  <input v-model="text2">

  <p> 
    text1:  {{ text1 }}
    <br>
    text2: {{ text2 }}
  </p>
</template>

v-modle 会自动匹配

更多用法请参照:表单输入绑定 | Vue.js (vuejs.org)

vue

Vue