vue脚手架的基础搭建过程

MVVM架构

Vue框架底层设计遵循MVVM架构。

Model层(M)模型层(业务逻辑层)

View层(V)视图层 主管UI

ViewModel层(VM)

将项目代码划分清晰的层次结构后,非常有利于后期代码功能维护。如果需要修改ui,则只需要修改view层代码;如果需要修改业务逻辑,则只需要修改model层代码。

基于脚手架的环境开发vue项目

开发vue项目的方式主要有两种:

  1. 基于vue.js:在html中引入vue.js,让vue.js管理页面的div#app元素。

  2. 基于脚手架环境:通过vue脚手架环境可以方便的创建一个通用的vue项目框架模板,在此基础之上开发vue向更加便捷。适合工程化开发。

vue脚手架工具:VueCLIVite

VueCLI提供了简单的创建项目包、vue项目开发模式。需要安装VueCLI

npm config get registry  # 查看npm源
npm set registry https://registry.npmmirror.com  # 设置国内npm镜像源
​
npm  install  -g  @vue/cli

VueCLI项目很大,文件很多,大多数都在node_modules中,所以以后传代码不会带着node_modules,大家下载了项目后由于缺少依赖模块,项目跑不起来的。如果需要运行项目,则应该在项目目录下执行命令:npm install。将会默认读取package.json,下载所需要的依赖包,就可以正常跑项目了。npm run serve

脚手架的运行过程: 当脚手架启动时,将会打开 public/index.html ,并且在该网页中运行 main.js ,将会创建 Vue 对象,通过 Vue 对象来管理 index.html 中的 #app 内容的显示。初始化状态下,默认将 App.vue 组件中的内容渲染到 #app 中,从而看到页面效果。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
​
Vue.config.productionTip = false
​
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

VueCLI项目中,所有的资源都会显示在div#app中。 在此过程中就需要实现根据不同的请求资源路径,显示不同的页面内容。这个功能由VueRouter脚手架的路由系统来管理。

脚手架路由系统(VueRouter)的设计与应用

平时在开发项目的过程中,需要访问不同的路径来看到不同的页面内容,在脚手架项目中,由VueRouter来管理项目的路由系统。 实现:访问不同的路由地址,看到不同的页面。

案例:写一个页面:首页,该页面只有首页两个字。访问:http://localhost:8080/index时,看到该页面。

实现思路:

  1. 先准备好一个vue组件:views/Index.vue。写好内容。

  2. 手动配置路由,使得当访问:/index时,看到该组件。

  3. 测试路由地址即可。http://localhost:8080/index

案例:写个登录页面:账号密码两个输入框,一个提交按钮。要求访问地址:

http://localhost:8080/login 时,看到该登录页面。

案例:写个注册页面:账号、密码、确认密码、手机号,一个提交按钮。要求访问地址:

http://localhost:8080/register时,看到该注册页面。

Vue文件的语法

在脚手架项目中,每一个vue文件都成为是一个组件。一个组件封装了页面中的局部内容(包括局部内容的html结构、局部内容的css样式、局部内容的js功能)。这样就需要研究一下.vue文件的语法。

.vue文件的基础结构

template部分用于定义当前组件的页面结构。

注意:template中的内容有且仅有一个根元素。

script部分用于定义当前组件的js脚本。

注意:可以在script中通过data来定义响应式变量,通过methods定义方法。

style部分用于定义当前组件的css样式。

在style标签中可以添加scoped属性,一旦style标签上有scoped属性,则在此style段中定义的样式,仅仅针对当前组件的生效(原理是当前组件的每一个元素都会生成一个属性,然后vue将在style中定义的选择器改为使用属性选择器,仅仅选择当前组件内的元素)。如果没有scoped属性,则样式一旦加载,全局生效。

Vue的常用指令

  1. v-on 绑定事件

  2. v-bind 动态绑定属性

  3. v-show 设置元素显示或隐藏 display:none

  4. v-if v-else-if v-else 判断元素是否输出

  5. v-html v-pre v-text

  6. v-for

案例:编写一个组件页面:views/Directive.vue 当访问:/directive时,看到它。

v-for指令的用法

v-for指令用于重复输出当前元素。

案例:写一个新的组件页面:For.vue 当访问: /for时看到它。

场景1

遍历字符串数组输出每一个列表项元素:

data: {
    nav: ['京东超市','京东家电','秒杀','拍卖','京东生鲜','PLUS会员']
}
       
  • {{item}}

上述写法,类似于:

for(let i=0; i ${item} `
}
场景2

遍历对象数组输出每一个列表项元素:

data: {
    movies: [
        {id:1, name:'交换余生', showingon:'2021-10-10', duration:124},
        {id:2, name:'杀手', showingon:'2022-10-09', duration:114},
        {id:3, name:'功夫', showingon:'2023-1-10', duration:194},
        {id:4, name:'功夫熊猫', showingon:'2011-05-10', duration:141}
    ]
}
   
      ID:{{item.id}}    |         名称:{{item.name}}   |         上映时间:{{item.showingon}}   |         时长:{{item.duration}}分钟    
拓展1

在使用v-for遍历输出数组数据的同时,引用数组的下标:

  ..{{i}} 下标
拓展2

纯粹的按照数量重复输出元素:

内容
:key的作用

v-for指令一般都需要配一个v-bind:key(简写 :key)来为每一个列表项设置一个唯一标识符(简单理解为每一个item一个名字)。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了,后续由于列表数据的变化需要重新渲染列表时,将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过(比较列表项的key在原始列表中是否已经存在),如果已经渲染过,就不会重新创建DOM了。

那么一般将什么设置为:key的值?

id是唯一属性
下标 但不建议

:key的数据类型只能是number和string,不能是对象。同一个列表中的列表项的key不能重复,否则控制台报错。

你可能感兴趣的:(vue.js,前端,javascript)