vue框架的配置与基础语法

vue的简介

Vue是一个流行的JavaScript前端框架。它由Evan You创建并维护，目前由Vue.js团队负责开发和维护。Vue的特点是轻量级、简单易用、灵活可扩展。Vue采用了虚拟DOM和组件化的思想，提供了一组简洁灵活的API，使得开发者可以更加高效地构建出交互丰富、组件化的单页面应用程序（SPA）。

vue的优点

1. 简单易用：Vue提供了简单灵活的API，易于理解和上手。
2. 轻量级：Vue的核心库非常小巧，可以快速加载和渲染页面，提升用户体验和页面性能。
3. 组件化开发：Vue支持组件化开发，可以将页面拆分成多个组件，降低代码耦合度，提高代码重用性。
4. 双向数据绑定：Vue实现了双向数据绑定，当数据发生变化的时候，自动更新视图，大大简化了开发过程。
5. 虚拟DOM：Vue采用了虚拟DOM技术，减少了频繁操作DOM的开销，提高了页面的性能。
6. 生态系统丰富：Vue有一个非常丰富的生态系统，包括路由、状态管理、UI库、测试等方面的插件和工具，可以极大地提高开发效率。
7. 社区活跃：Vue的社区非常活跃，有很多开发者在积极维护和推广它，提供了大量的中文文档和教程，很容易找到解决问题的帮助和支持。

vue的缺点

1. 学习曲线：Vue虽然易于上手，但对于初学者来说，仍然需要一定的学习曲线，特别是如果要深入掌握Vue的高级特性和性能优化等方面，需要更深入的学习和实践。
2. 缺少官方约定：Vue并没有像Angular和React那样有固定的工程化实践和约定，对于大型项目的组织和管理，需要更多的自我探索和试错。
3. 开发工具较少：Vue的生态系统发展相对较晚，缺少像React那样丰富的生态体系和周边工具支持，特别是对于移动端开发，缺少像React Native那样的成熟框架。
4. 静态类型检查支持不足：Vue并不能像TypeScript和Flow那样提供完整的静态类型检查支持，对于一些需要精密类型处理的场景，会稍微有一些局限性。

如何引用vue在项目中使用

1、直接引入cdn到运行的html文件中：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、使用vue的集成环境：

• 创建一个项目文件夹：alipay
• 初始化一个package.json文件：npm init -y
• 安装vue脚手架：cnpm i -D @vue/cli
• 创建对应的项目：npx vue create [alipay]
• 启动vue：yarn serve

3、可视化管理方式配置vue项目：vue ui

4、使用HbuilderX创建项目选择vue项目，使用HbuilderX提供的默认模板

简单语法

使用双大括号{{}}绑定表达式，可以在HTML标签中插入Vue实例中的数据，并生成响应式的渲染视图。例如：

<h1>{{ "hello,"+msg }}</h1>

data() {

return {

msg: "Vue",

}

}

基础指令

1、v-cloak：使用这个指令的主要目的是防止在Vue实例未渲染完成时显示无法正确展示的模版内的变量或其他属性的未编译的代码。示例：

<div v-cloak>{{ message }}</div>

在这个示例中，当Vue实例被创建但是尚未完成编译和渲染时，这个div元素会被隐藏。等Vue完成了对这个 div元素的渲染工作后，它就会显示出来，这样用户就能看到正确的内容了。 当然，需要在CSS中添加以下样式规则：

[v-cloak] {

display: none;

}

2、v-html 指令的作用：设置元素的innerHTML。内容中有html结构会被解析为标签。示例：

<div v-html="content"></div>

data() {

return {

content:"<a href='#'>回到顶部</a>"

}

}

3、v-text是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容，用于设置或更新元素的内容

4、v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译。

5、v-bind指令主要用于响应式的更新html属性:<h1 v-bind:title="text"></h1>

而v-bind的语法糖简写为：<h1 :title="text"></h1>

绑定事件

可以使用v-on:[事件]=""和@[事件]=""两种方法绑定想要的事件，绑定事件以后需要在js代码中

data() {

return {

// 存放需要操控的数据

}

}

的同级下有一个

methods:{

// 用于存放想要的事件函数

}

事件修饰符

1. stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
2. prevent 阻止默认事件
3. capture 添加事件侦听器时让事件在捕获阶段触发
4. self  其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件,  虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
5. once 事件只触发一次,触发完之后,事件就解绑