【无标题】

最新推荐文章于 2024-09-28 19:02:04 发布

Mozarty

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量73

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Mozarty/article/details/133297251

版权

本文介绍了Vue框架的基础知识，包括Vue的安装与验证，VueRouter的配置，模板语法（文本插值、绑定、表达式），条件渲染（v-if/v-show），列表渲染，数据监听，事件处理，样式绑定，表单交互，以及组件的封装和注册方式。

摘要由CSDN通过智能技术生成

Vue基础

1. Vue 的安装

安装详情

2. Vue 脚手架

安装vue-cli 3.0

npm install -g @vue/cli
# or
yarn global add @vue/cli

安装成功查看版本

vue-V

如果出现安装失败或者提示errno 4048，是权限问题，使用管理员身份执行，记得重复2，3两步（多试几遍就好了）

创建项目

vue create projectname

选择需要的功能
请添加图片描述
运行项目

cd projectname
npm run serve

更详细的安装

3. 路由

Vue Router 允许你构建单页应用程序的路由。安装 Vue Router：

npm install vue-router@4

在项目中使用 Vue Router：

路由的基本使用流程

// history模式
import {
    createRouter,
    createWebHashHistory,
} from 'vue-router'

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
//设定组件和路径的映射关系
const routes = [
    {
        path:'/',
        redirect:"/home"
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
]

// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes//设定组件和路径的映射关系
})
export default router;

main.js

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')//在main里引入并使用路由对象

App.vue

<template>
  <div>
    <router-link to="/home">home</router-link>//相当于链接a
    <router-link to="/about">about</router-link>
      <router-view></router-view>//路由到的组件在此渲染
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

4. 模板语法

文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<template>
<span>Message: {{ msg }}</span>
</template>
<script>
export default {
  data() {
    return {
      msg: 'Hello, Vue!'
    }
  }
}
</script>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

原始 HTML
双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<template>
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: red">This should be red.</span>'
    }
  }
}
</script>

Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<template>
<div v-bind:id="dynamicId"></div>//v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
<div :id="dynamicId"></div>//因为 v-bind 非常常用，我们提供了特定的简写语法,简写为:
<button :disabled="isButtonDisabled">Button</button>//当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
<div v-bind="objectOfAttrs"></div>
</template>
<script>
export default {
  data() {
    return {
      dynamicId:'div',
      isButtonDisabled:true,
      objectOfAttrs:{
  id: 'container',
  class: 'wrapper'
}
    }
  }
}
</script>

使用 JavaScript 表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
<time :title="toTitleDate(date)" :datetime="date">//还可以调用函数
  {{ formatDate(date) }}
</time>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
因此，下面的例子都是无效的：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

5. 条件语句

v-if

你可以使用 v-if 指令来实现条件渲染,
特点：不展示的DOM元素直接被移除,切换成本较高,适用于切换频率低的场景。

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="changeMessage">换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      message1: '1'
    }
  },
  methods: {
    changeMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

补充： v-else-if 和 v-else用法：

<template>
  <div>
    <p v-if="like>=10000">热门</p>
    <p v-else-if="like>=500">不温不火</p>
    <p v-else>冷门</p>
  </div>
</template>

v-show

通过修改 display 属性来控制元素的可见性,响应更快,适用于切换频率较高的场景,可获取DOM元素。

<template>
  <div>
    <p v-show="showMessage">{{ message }}</p>
    <button @click="changeMessage">换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      message1: '1'
    }
  },
  methods: {
    changeMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

6. 列表渲染

使用 v-for 指令来进行循环渲染（可以循环渲染数组以及对象）：

<template>
  <ul>//一定要设置key属性，且不要是数组的索引
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

7. 监听

watch(监听的数据，副作用函数，配置对象)
vue中watch用来监听数据的响应式变化.获取数据变化前后的值
watch(data, (newData, oldData), {immediate: true, deep: true}) => {}

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch(message,(newValue, oldValue)=>{
        console.log(`Message changed from "${oldValue}" to "${newValue}"`)
  })
    }
  }
}
</script>

8. 事件

v-on

你可以使用 v-on 指令来监听 DOM 事件：

<template>
  <button v-on:click="handleClick">Click me</button>
  <button @click="handleClick">Click me</button>//简写
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

事件传参

<template>
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button></template>
<script>
export default {
  methods: {
   warn(message, event) {
  // 这里可以访问原生事件
  if (event) {//阻止默认提交事件
    event.preventDefault()
  }
  alert(message)
}
  }
}
</script>

事件修饰符

用法：

//阻止冒泡
<a v-on:click.stop="handleClick"></a>

种类：

. prevent：阻止默认事件的发生默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。
. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。
. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
. once：设置事件只能触发一次，比如按钮的点击等。
. passive：该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。

按键别名

Vue 为一些常用的按键提供了别名：

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

.ctrl
.alt
.shift
.meta

鼠标按钮修饰符:

.left
.right
.middle

9. 样式绑定

绑定内联样式

style（内联样式）

 <div :style="{ color: 'red', fontSize:'15px' }">Vue</div>

style直接绑定样式对象

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

 <div :style="styleObject">Vue</div>

style数组

<div :style="[baseStyles, overridingStyles]"></div>

多重值只会绑定最后一个浏览器支持的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

v-bind

你可以使用 v-bind 来动态绑定元素的样式：

class属性绑定

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="{ 'active': isActive }"></div>

:class指令可以与普通的class属性共存

class 数组

<div class="static" :class="[activeClass, errorClass]"></div>

渲染的结果是：

<div class="active text-danger"></div>

用三元表达式来切换

<div :class="[isActive ? activeClass : '', errorClass]"></div>

10. 表单

Vue 使处理表单变得简单，你可以使用 v-model 指令双向绑定表单输入：

<template>
  <div>
    <input v-model="username" placeholder="Username">//placeholder就是框里的初始值
    <input v-model="password" type="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 处理登录逻辑
    }
  }
}
</script>

11. 封装组件

Vue 允许你创建可重用的组件，使你的代码更模块化和可维护：

<template>
  <div>
    <my-button @click="handleClick">{{ buttonText }}</my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    'my-button': MyButton
  },
  data() {
    return {
      buttonText: 'Click me'
    }
  },
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

vue 组件组成结构

每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构

<template>
    <!-- 当前组件的Dom结构需要定义到 template 标签的内部 -->
</template>

script -> 组件的 JavaScript 行为
style -> 组件的样式

组件注册的两种方式
vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：
被全局注册的组件，可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的范围内使用
如果某些组件在开发期间的使用频率很高，推荐进行全局注册；
如果某些组件只在特定的情况下会被用到，推荐进行局部注册。

//调用 app.component() 方法全局注册组件
app.component(Swiper.name, Swiper)
app.component(Test.name, Test)
 
 
export default {
  name: 'MyApp',
  components: {  // 通过 components 节点注册私有组件
      // 注册
    MyStyle
  }
}