VUE笔记(一)初识vue

这篇具有很好参考价值的文章主要介绍了VUE笔记(一)初识vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、vue的简介

1、什么是vue

官网地址:Vue.js

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架

  • 构建用户界面:之前在学习vue之前通过原生js对DOM操作进行构建用户界面的

使用原生js构建用户界面的不足
- 没有规范,统一性不强,不利于团结写作开发
- 大量的DOM操作,开发效率很低
- 没有性能优化
  • 渐进式:声明式渲染+组件系统(vue的核心)+客户端路由+状态机+工具链等部分组成

渐进式:你可以在自己的项目只使用vue的一部分内容,不需要全部使用,这个vue不强制
       随着项目的变大,大家可以将页面中公共部分封装成组件,然后调用组件,这样可以提高开发效率
       在随着项目的变大,需要客户端路由+状态机
  • 框架:框架是应用程序的半成品,框架内已经将公共的部分完成了,程序使用框架的好处

    • 快速的提高开发效率

    • 程序员不用关注非核心内容,只关注业务本身

    • 框架规范行为,让代码统一性变得更强

2、特点

优点

  • 声明式编程,不需要程序员编写大量的DOM就能够完成页面的构建

  • 使用组件模式,可以让代码进行复用,增强代码的可维护性

  • 采用虚拟DOM+diff,使得按需更新,不需要构建全部DOM操作

  • vue是一个轻量级的一个框架,相对与其他框架更好容易上手

缺点

  • 首屏加载速度慢

  • VUE的网站不利于SEO优化

3、vue的作者

尤雨溪(Evan You),前端框架 Vue.js 作者,独立开源开发者,现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 Java 项目,最后自己也走上了开源之路,现在全职开发和维护 Vue.js

VUE笔记(一)初识vue,vue.js,笔记,前端

4、vue版本情况
  • 2013年Evan You收到了Anglur启发,开发出来了Seed,后来在同年12月份,将Seed改名为vue,当时的版本是0.6.0

  • 2014年正式对外开放,版本是0.8.0

  • 2015年12月份,vue1.0版本出现

  • 2016年12月1日,vue2.0版本

  • 2020年9月18日,vue3.0版本出现

二、vue环境的搭建

vue环境的搭建有两种方式,第1种方式:使用script标签的方式引入到网页上,这种方式比较使用学习使用,不太使用实际开发,第2种方式:使用vuecli脚手架方式来进行项目搭建,这种方式比较适合实际企业开发用

1、使用script方式引入

具体的实现步骤有如下

  • 在html页面中通过script标签的方式引入vue.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  • 在body标签之间定义一个div元素,用来作为vue内容渲染的容器

<div id="app"></div>
  • 创建vue实例

 <script>
        /*
            通过new的方式调用构造函数来进行创建vue实例
            Vue的构造函数的参数是一个对象,该对象中的属性
            就是vue的选项,这里边的选项都是固定的
            el:vue挂载目标,这里的值是目标挂载点的选择器
            data:可以是一个对象,也可以是一函数
                对象的属性是自定义的
        */
        const vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!~'
            }
        })
    </script>

data选项的后面也可以是一个函数

 /*
            通过new的方式调用构造函数来进行创建vue实例
            Vue的构造函数的参数是一个对象,该对象中的属性
            就是vue的选项,这里边的选项都是固定的
            el:vue挂载目标,这里的值是目标挂载点的选择器
            data:可以是一个对象,也可以是一函数
                对象的属性是自定义的
        */
        const vm=new Vue({
            el:'#app',
            data:function(){
                return{
                    message:'Hello Vue!!!!!!!'
                }
            }
        })
  • 在HTML页面中渲染vue实例的data数据

如果要渲染vue中的data数据的方式很多,但是最常见的是一个插值表达式(双花括号)

 <div id="app">
      {{message}}
 </div>
2、使用vue/cli命令行工具安装
  • 首先安装vue/cli

npm i -g @vue/cli
  • 创建vue项目

vue create 项目名称
  • 手动安装

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features
  • 安装相关依赖包

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
>(*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  • 选择vue的版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x
  • 选择css预处理语言

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus
  • 选择配置文件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  • 是否保存预设

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
  • 启动项目

npm run serve
  • 运行项目

3、vue/cli图形界面方式

步骤如下

  • 在终端上输入如下命令打开图形界面方式

vue ui

三、目录结构

1、目录结构的分析
project
|- node_modules:第三方依赖包
|- public:存放静态资源的,这里的静态资源不会被webpack编译
	|-favicon.ico:icon图标
	|-index.html:项目index.html文件
|- src:源代码
	|-assets:静态资源,会被webpack所编译
	|-components:自定义组件
	|-App.vue:项目的根组件
	|-main.js:vue项目的入口文件
|-.gitignore:git上传的忽略文件
|-babel.config.js:babel的配置文件
|-jsconfig.js:js的配置文件
|-package.json:项目配置文件
|-vue.config.js:在文件中可以对webpack的配置进行修改
2、vue项目运行流程

项目启动后,首先运行的是main.js

//导入vue第三依赖包
import Vue from 'vue'
//导入根组件
import App from './App.vue'
//关闭生成提示
Vue.config.productionTip = false
//创建vue实例
//vue的选项
//render:vue2的渲染函数
new Vue({
  el:'#app',
  render: h => h(App),
})

注意点:vue2中设置目标挂载点有两种方式

new Vue({
  el:'#app',
  render: h => h(App),
})

还有一种方式

new Vue({
  render: h => h(App),
}).$mount('#app')
3、单文件组件

凡是以后缀.vue结尾的都成称为单文件组件,单文件组件有三个部分组成

  • template:该标签之间存放的HTML代码,用来定义结构的

  • script:编写的js代码

  • style:编写的css代码

<template>
    <h1>Hello <span>{{name}}</span></h1>
</template>

<script>
export default{
    data:function(){
      return{
          name:'Giles'
      }
    }
}
</script>

<style lang="scss">
    h1{
        span{
            color:red
        }
    }
</style>

如上代码,如果要向让其有高亮显示和智能提示需要安装vetur插件

四、打包与部署

开发完的vue项目都必须打包并部署到服务器上

部署vue到nginx服务器上的步骤

  • 在vue.config.js文件中需要配置部署路径,具体配置如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./'    
})
  • 在终端上进行打包,具体打包的命令如下

npm run build
  • 将生成dist目录进行重命名,并且上传到到外网服务器(阿里云)

这里我将目录上传到/opt目录下

  • 在/etc/nginx/config.d/default.confi下的server节点下进行如下配置

location /first {
     alias /opt/first;
     index index.html;
 }
  • 执行如下命令

ps aux|grep nginx
killall -9 nginx
  • 重新启动nginx服务器

/usr/sbin/nginx

五、vue.config.js的配置

如果要进行webpack的配置可以在vue.config.js中进行

const { defineConfig } = require('@vue/cli-service')
module.exports =defineConfig({
    //部署应用包时的基本 URL
    publicPath:'./',
    //更改打包后的输出目录名称
    outputDir:'build',
    //设置放静态资源的目录
    assetsDir:'static',
    //指定生成的index.html的输出路径
    indexPath:'home.html',
    //设置devServer的选项
    devServer:{
        //自动打开页面
        open:true,
        host:'127.0.0.1',
        port:'8888'
    }
})

六、插值表达式

1、什么叫插值表达式

vue中的内容如果要动态的渲染到页面之上,可以在<template>部分使用插值表达式动态渲染vue中data选项的数据

2、插值表达式语法
{{插值表达式}}

插值表达内容如下

  • 常量

  • 变量

  • 表达式(运算符+操作数)文章来源地址https://www.toymoban.com/news/detail-683765.html

<template>
  <!--在vue2template模板中的根元素只能是一个,不能是多个-->
  <div>
    <div>姓名:{{name}}</div>
    <div>年龄:{{38}}</div>
    <div>性别:{{gender==1?'男':'女'}}</div>
    <div>爱好:{{hobby.slice(0,1)}}</div>
    <div>求和:{{nums.reduce((prev,cur)=>prev+cur,0)}}</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:'Giles',
      gender:1,
      hobby:['basketball','football','apple'],
      nums:[10,20,30,59,89,67]
    }
  }
}
</script>

<style>

</style>

到了这里,关于VUE笔记(一)初识vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE笔记(一)初识vue

    一、vue的简介 1、什么是vue 官网地址:Vue.js Vue (读音 /vjuː/,类似于 view ) 是一套用于构建用户界面的 渐进式框架 。 构建用户界面:之前在学习vue之前通过原生js对DOM操作进行构建用户界面的 渐进式: 声明式渲染+组件系统 (vue的核心)+客户端路由+状态机+工具链等部分组成 框

    2024年02月10日
    浏览(35)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 前端开发 5: Vue.js 框架

    在前端开发中,Vue.js 是一个流行且灵活的 JavaScript 框架,用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。在本篇博客中,我将为你介绍 Vue.js 的基础知识和常用技巧,帮助你更好地掌握前端开发中的框架部分。 Vue.js 是一个轻量级的 Jav

    2024年01月19日
    浏览(43)
  • vue.js前端框架应用案例

    Vue.js 是一种流行的前端框架,它可以帮助开发者构建单页应用(SPA)和复杂的用户界面。以下是几个 Vue.js 的案例,涵盖了不同领域的应用: Vue.js 官方文档 :Vue.js 的官方文档本身就是一个使用 Vue.js 构建的项目。它展示了 Vue.js 的各种功能和最佳实践,包括组件、指令、混

    2024年02月21日
    浏览(49)
  • Vue.js 现代前端开发的利器

    作者:阿发家的阿花 在当今的前端开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一。它的简洁性、灵活性和强大的功能使其成为许多开发者首选的工具。本文将介绍Vue.js的核心概念、主要特点以及为什么它在现代前端开发中如此重要。我们还将探讨Vue.js在构建交互式和

    2024年02月10日
    浏览(47)
  • 前端埋点需求(vue.js)

    提示:基于运营活动的需求,需要对用户行为进行埋点监控,因此以下文章是代码埋点的实现。 前端埋点有两种:全局埋点、代码埋点。 全局埋点 :收集的用户所有行为,但是收集的数据驳杂,要进行处理。 代码埋点 :收集的用户所有行为更加精准,能够进行更细节的处

    2023年04月13日
    浏览(41)
  • 《Vue.js前端开发实战》课后习题答案

    本答案仅供参考,禁止用于抄袭等不法用途 一、 填空题 用户界面 ViewModel refs vue-devtools 组件 二、 判断题 对 对 对 对 对 三、 选择题 D C D A A 四、 简答题 请简述什么是Vue。 Vue(读音/Vjuː/,类似于View)是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计

    2024年02月03日
    浏览(57)
  • 【Vue】笔记六:webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

    Webpack 是一个非常强大的打包工具,广泛用于前端项目的构建。Webpack 的功能十分强大,但也十分复杂,光是配置就有一堆参数。本篇文章将从基础部分到深入层次逐步讲解 webpack 的应用,帮助您了解 webpack 配置文件和各个组成部分的作用,以及如何优化 webpack 性能。 Webpack

    2024年02月08日
    浏览(43)
  • vue系列--通过js生成前端水印的方法

    此方法开箱即用,在vue项目中import即可。 例如:

    2024年02月22日
    浏览(55)
  • ChatGPT给出的前端面试考点(Vue.js)

    答案 1. Vue.js是什么?它的主要特点是什么? Vue.js是一个渐进式JavaScript框架,用于构建用户界面。它的主要特点包括: 数据绑定:Vue.js使用双向数据绑定,即视图会自动更新以匹配数据的变化,反之亦然。 组件化:通过组件化的方法可以构建可重用的视图组件。 轻量级:

    2024年01月20日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包