什么是vue
vue不是一门语言，只是通过JavaScript封装的一套用于构建用户界面的前端框架，有自己独特的API和开发模式，它最主要的使用场景是进行单页应用开发，能够在我们进行web单页开发的时候大大提升开发效率
什么是单页应用
-
多页面应用
- 单页面应用
vue 开发的就是单页应用
第一个vue案例-Helloworld
Document
{{msg}}
// 3.创建一个vue实例,它可实现渲染（数据和模板的关联），所以你得告诉它你的模板和数据
let VM = new Vue({
// 4.添加配置
// 4.1 el:指定模板，指定选择器，它就是后期vue实例所影响的范围
el: '#app',
// 4.2 data,data用于指定模板所对应的数据(业务处理数据)，它是一个对象
data: {
msg: 'hello world',
}
})
什么是mvvm
- m：model:数据
- v:view:视图模板
- vm:vue实例，可以实现数据和模板的关联(渲染)
- 特点
- 数据变化 ，模板视图自动刷新渲染
- 模板视图中的数据变化 ，数据也会自动的变化
在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。
- MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分
- 当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
- 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
html版本的全局组件的创建和使用
什么是组件
- 一个组件相当于是一个小模块
- 它是html、css与js的集合体，可以用于描述页面中的某个结构(模块)
- 组件是独立存在于我们的vue应用里面的，意味着它可以复用，不需要我们将结构代码或者是业务代码重复的编写，而且也很方便进行维护
- 在Vue中组件的出现是为了拆分Vue实例的代码量，让我们以不同的组件来划分不同的功能模块
创建vue的全局组件
-
语法
Vue.component(组件名称，组件的配置) -
配置说明(这里只列举其中两个)：
- template:用于描述当前组件的结构
- data：用于定义当前组件的关联的数据
-
一个示例
Vue.component('mycom', {
// 定义结构
template: `
我是组件的内容---{{msg}}
`,
// 定义数据
data() {
return {
msg: 'hello
}
}
}
template的作用及细节
- 作用：用于描述当前组件的结构，描述结构使用html
- 细节：template只能有一个根元素，意味着如果有多个元素，我们需要将其包裹到一个父容器中，这个父容器一般可以使用div
- 示例：
template: `
我是组件的内容---{{msg}}
`,
data必须是一个函数
- 作用：用于定义当前组件所需要使用到的数据
- 细节：组件的data必须是一个函数，且返回一个对象,以便每个实例可以维护一份被返回对象的独立拷贝
- 示例：
data: function () {
return {
成员...
}
}
使用全局组件
- 使用方式：
- 组件是html,js,css的集合，类似于一个元素，我们可以将组件作为自定义元素来使用
- 你可以将组件进行任意次数的复用
- 示例：
{{msg}}
单文件组件的添加和渲染
几乎所有的vue项目开发都是使用单文件组件，也就是常说的 组件化开发
组件化开发是什么
- 组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护
- 组件化开发的好处
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
- vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
- 在vue中，扩展名为.vue的文件也称为单文件组件，意思是使用一个文件来描述一个组件
脚手架创建项目的过程和运行项目的方式
- 下载安装脚手架
全局安装脚手架npm install -g @vue/cli - 使用脚手架创建vue项目
打开终端或powershellvue create 项目名称 - 运行脚手架项目
进行项目目录，打开终端或powershell
输入命令:npm run serve
编译完成之后通过浏览器展示
单文件组件的创建
- 扩展名为.vue的文件就是单文件组件
- 单文件组件结构的基本说明
- template:用于描述组件的结构
- script:用于添加组件的功能(script行为)，使用export default暴露当前的组件实例
- style:用于设置组件的样式
{{ msg }}
export default {
data() {
return {
msg: "hello word",
};
},
};
h1 {
color: aqua;
}
细节说明
- template模板结构只能有一个根元素（vue2.0中的规则）
- export default用于暴露当前的组件实例，default表示默认就会暴露的成员
- 单文件组件的data必须是一个函数，且返回一个对象
- 样式可以使用预处理器，scoped可以用于定义局部作用域样式
点击咨询 