Vue介绍和安装，创建项目，组件使用，指令

最新推荐文章于 2023-09-19 19:54:15 发布
最新推荐文章于 2023-09-19 19:54:15 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： vue 文章标签： vue.js npm 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51346837/article/details/121197661
版权

目录

1. Vue的介绍

1.1 Vue是什么？

Vue是一个构建用户界面（UI）的JS库。是一个构建数据驱动的渐进式框架。渐进式（非常多的周边，可以学一点用一点） （vue vue-router element-ui vuex …）

1.1 Vue的特点？

  • 易用 【上手难度非常的低】
  • 灵活【周边丰富 可以轻松的技术选型】
  • 高效 【高效虚拟dom 压缩非常的小】

1.2 Vue的历史

  • 13年起草项目、
  • 15年1.0版本
  • 16年2.0版本【大红大紫】
  • 目前版本2.6.14
  • 3.0 19年

1.3 和常见框架对比

  • JQ ： 兼容IE6 7，便捷的DOM操作库。
  • AngularJS（1.X）： 基于脏检查的数据双向绑定机制，API量大。针对大型的复杂应用。
  • Angular（2+) 与AngularJS没任何关系。深度兼容TS，学习曲线非常陡峭。针对大型的复杂应用。
  • React： 庞大的全球生态系统，语法紧跟ES官方，运行稳健，适合中大型项目。
  • Vue： 简单快速，项目运行快, 支持双向数据绑定，适合中型或小型项目。【难度低，工资高，市场占有率高】

2. Vue的安装

2.0 淘宝镜像配置

npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
#查看镜像
npm config get registry 或 yarn config get registry

#还原yarn 淘宝镜像
yarn config set https://registry.yarnpkg.com
#检测还原的淘宝镜像
yarn config get registry

2.1 直接引入vue.js

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>

2.2 @vue/cli

2.2.1 全局安装 @vue/cli 脚手架
#yarn 安装
yarn global add @vue/cli

#npm 安装
npm i @vue/cli -g

#检测是否安装成功
vue --version
2.2.2 使用脚手架创建项目
vue create 项目名

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 启动项目
#yarn 
yarn serve

#npm
npm run serve
  • powershell 权限
# 以管理员身份运行PowerShell

- win10搜索powershell 右键以管理员方式运行

执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned

 选择Y

 注意：一定要以管理员的身份运行PowerShell，不是cmd窗口！

3. 项目目录详解

一级目录:
 node_modules       //>> 依赖的第三方模块
 public             //>> vue服务器静态文件目录，只有唯一的一个index.html
 src                //>> 我们的开发目录，最重要的目录，源文件（我们写的代码）目录
 .gitignore         //>> git忽略列表
 babel.config.js    //>> es6编译配置
 package-lock.json  //>> 包描述文件（记录更详细，记住当时的版本信息）
 package.json       //>> 包描述文件
 README.md          //>> 说明文档

二级目录:
src：
    assets          //>> 静态资源 styles images fonts
    components      //>> 组件,是.vue的文件,主要是公用的小组件
    views           //>> 页面级别的组件
    App.vue         //>> 整个应用的顶级组件.
    main.js         //>> 入口文件

4. 项目代码详解

4.1 入口文件 main.js
import Vue from 'vue' //引入vue
import App from './App.vue' //引入App根组件

Vue.config.productionTip = false //生产提示

new Vue({
  render: h => h(App),
}).$mount('#app') //$mount 把渲染好的根组件挂载在id为app的index.html 标签上

5. 组件

每一个.vue文件就是一个单文件组件。

5.1 vscode vue插件

# vetur ( 让 .vue 文件高亮， 具备格式化 )
# Vue VSCode Snippets  【快速生成.Vue文件模板代码】

5.2 单文件组件

  • App.vue
<template>
  <div>
    <h1>Hello</h1>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </div>
</template>

<script>
 //里面可以写js
  export default { //相当于输出new vueComponent()实例对象
    
  }
</script>

<style lang="less" scoped>
.box1{
  width: 100px;
  height: 100px;
  background: saddlebrown;
  .box2{
    width: 50px;
    height: 50px;
    background: sandybrown;
  }
}
</style>

5.3 自定义单文件组件的使用步骤

#1引入组件
import 组件名 from '地址'

#2注册组件
export default {
    components:{
        组件名
    }
}

#3使用组件
<template>
   #单标签写法
   <组件名 />
       
   #双标签写法
   <组件名></组件名>
</template>

6. Mustache胡须表达式

6.1 语法

{{表达式}}

7. 指令

指令是写在标签上的一种自定义属性。

<标签 id=”” class=”” V-*=”xxx”></标签>

7.1 指令说明？

作用：帮助我们操作dom

7.2 v-text和v-html

#语法
<标签 V-text=”表达式”></标签> 
<标签 V-html=”表达式”></标签> 

#注意
v-text 相当于textContent innerText 
v-html相当于 innerHtml

7.3 v-show和v-if

#语法 
<标签 V-show=”表达式”></标签> 
<标签 V-if=”表达式”></标签> 

#注意
v-show 切换display属性 
v-if 渲染或者不渲染dom 
如果频繁切换显示隐藏用v-show 性能好

7.4 v-if 和 v-else-if 和 v-else

#语法 
<标签 V-if=”表达式”></标签> 
<标签 V-else-if=”表达式”></标签> 
<标签 V-else-if=”表达式”></标签> 
<标签 V-else></标签> 

#注意
从上往下满足一个条件即可 如果都不满足执行v-else

7.5 v-for

item 每个数组里面的元素 index索引
<标签 V-for=”(item,index) in 数组”></标签> 

value是值 key是属性
<标签 V-for=”(value,key) in 对象”></标签>

7.6 v-model

<template>
  <div>
    <h1>v-model表单的王</h1>
    <!-- 千寻的注册 -->
    <div class="form">
      <!-- 姓名 -->
      <div class="form-item">
        姓名： <input type="text"
               v-model="formData.name"
               name=""
               id="">
      </div>
      <!-- 年龄 -->
      <div class="form-item">
        年龄：<input type="text"
               v-model="formData.age"
               name=""
               id="">
      </div>
      <!-- 性别 -->
      <div class="form-item">
        性别： <input type="radio"
               v-model="formData.sex"
               value="男"
               name=""
               id="">男
        <input type="radio"
               v-model="formData.sex"
               value="女"
               name=""
               id="">女
      </div>
      <!-- 爱好 -->
      <div class="form-item">
        爱好：
        <input type="checkbox"
               name=""
               v-model="formData.hobs"
               value="唱歌"
               id=""> 唱歌
        <input type="checkbox"
               name=""
               v-model="formData.hobs"
               value="跳舞"
               id=""> 跳舞
        <input type="checkbox"
               name=""
               v-model="formData.hobs"
               value="打篮球"
               id=""> 打篮球
      </div>
      <!-- 地址 -->
      <div class="form-item">
        地址
        <select name=""
                id=""
                v-model="formData.address">
          <option value="上海">上海</option>
          <option value="成都">成都</option>
          <option value="武汉">武汉</option>
        </select>
      </div>
      <!-- 自我介绍 -->
      <div class="form-item">
        自我介绍: <textarea v-model="formData.desc"
                  name=""
                  id=""
                  cols="30"
                  rows="10"></textarea>
      </div>
      <!-- 同意 -->
      <div class="form-item">
        同意 <input type="checkbox"
               v-model="isAgree"
               name=""
               id="">
      </div>
      <!-- 按钮 -->
      <button @click="submit">提交数据</button>
    </div>
    <p>{{formData.name}}</p>
  </div>
</template>

<script>
export default {
  //数据 
  data () {
    return {
      formData: {
        name: '千寻',
        age: 12,
        sex: '女',
        hobs: ['唱歌', '跳舞'],
        address: '武汉',
        desc: '我喜欢蔡徐坤'
      },
      isAgree: false
    }
  },
  //函数
  methods: {
    //数据和方法相当于绑定在this的第一层
    submit () {
      if (this.isAgree) {
        console.log(`this.formData`, this.formData)
      }
    }
  },
}
</script>

<style lang="less" scoped>
.form-item {
  margin-bottom: 20px;
}
</style>

8. 事件

8.1 v-on

#语法
<标签 v-on:事件类型=”函数名”></标签>
<标签 @事件类型=”函数名”></标签>

9. 计算属性computed

#语法
export default {
    //计算属性
    computed: {
        函数名 () {
          return 计算好的数据   //计算好的数据 就会赋值给函数名，函数名相当于挂载在data上
        }
  },
}
#注意
计算属性的优势 ：只需要执行一次 后面的都可以使用前面的缓存结果，不需要再执行
The Qing
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue技巧
boy火巨的博客
08-29 470
方法绑定 {{ name() }} 返回 展示： <template> <div>{{name()}}</div> </template> <script> export default { data{ return { text："是？" } ...
Vue 创建组件的方式
虔诚带着决然
08-07 7191
方式一 1.1使用Vue.extend来创建全局的Vue组件 var tem1 = Vue.extend({ template:'&amp;amp;amp;lt;h3&amp;amp;amp;gt;这是使用 Vue.extend 创建的组件&amp;amp;amp;lt;/h3&amp;amp;amp;gt;' //指定组件要展示的HTML结构 }); 1.2使用Vue.component('组件名称',创建出来的组件模板对象)
vue组件（组件的使用和组件的指令和事件）
weixin_33787529的博客
03-07 546
组件的使用三步骤： 1.创建template 2.定义和注册一个组件 3.使用组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的使用</title> </head> <body> &lt...
Vue中的MVVM
weixin_44942740的博客
10-17 333
什么是MVVM? MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。 View层： 视图层 在我们前端开发中，通常就是DOM层。 主要的作用是给用户展示各种信息。 Model层： 数据层 数据可能是我们固定的死数据，更多的是来自我们服...
Vue项目的详细目录结构解析
ATCO[这里，只是顺手插曲]
09-19 3785
在创建项目时，如果你选择把依赖的配置信息以独立文件形式存放，那么你的项目内，和package.json文件同级的，就还会有比如.browserslistrc， .eslintrc， babel.config.js， jest.config.js， tsconfig.json等独立配置文件。而我们现在使用的Vue.js等框架开发的项目，并不能为浏览器所识别，所以就需要编译打包这一步操作，来转换成实际生产环境（浏览器）所需的文件。这个也没什么好说的，也就是罗列一下，之后Git上传时，需要忽略的文件。
vue入门基础语法基本使用以及组件配置安装教程.zip
最新发布
05-15
以下是一个关于 Vue.js 入门基础语法、基本使用以及组件配置和安装的简要教程 1. Vue.js 基础语法和基本使用 数据绑定 指令 事件处理 2. 组件配置和安装 全局组件注册 局部组件注册 使用 Vue CLI 搭建项目并安装组件...
vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发
05-27
想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的帖子npm install vue-response-components（可选）从“ vue...
vue的基础内容，包括vue指令，vue组件，vue生命周期，vue路由，vue的工程化项目等内容。
02-10
Vue.js 基础知识总结 ...Vue.js 是一个功能强大且灵活的前端框架，提供了许多强大的特性和工具，例如指令、组件、生命周期、路由和工程化项目。通过学习和掌握这些知识点，开发者可以更好地构建复杂的应用程序。
详解在Vue中通过自定义指令获取dom元素
12-08
(component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive)...
vue-cli3.0使用及部分配置详解
12-02
2.创建项目（这个就跟react创建脚手架项目比较像了）   这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是 让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个 在...
怎样创建一个VUE项目（超简单）
热门推荐
m0_70619994的博客
09-25 7万+
一、安装node.js 二、搭建vue环境 1、全局安装@vue/cli模块包 2、执行命令 3、检查是否安装成功 三、创建vue项目 1、创建项目 2、选择模板和包管理器，等待项目创建完毕 四、启动vue项目 1、执行命令 2、浏览项目页面 五、vue项目目录文件含义和作用 六、修改端口号 七、清理欢迎界面 补充：解决App.vue 代码是黑白色的方法
css中div布局学习（1）
小小黑
01-23 910
看完慕课网中的div布局，简单记录一下里面的内容： 1.实现效果： 上面实现效果主要是考虑如何实现块元素居中的问题，关键代码： margin: 0 auto; 实现代码： 布局aaa --> body { margin: 0; padding: 0 } .top{height: 100p
vue上线服务器后，地址一级目录可刷新，二级目录刷新404
Honins的博客
08-22 7246
如上图，当路径是 “xxx.com/项目名/aaa/aaa”时，刷新页面404. 当页面路径是“xxx.com/项目名/aaa”时，页面刷新没问题。这种情况我是配置nginx解决的，当时以为完全没问题了，但是后来发现路径是2级时，还是会报404。 nginx配置是这样的 这么配置项目的1级目录没问题。 排查的时候，发现有这个问题： 多了一个work，而这个work是我ur...
vue-cli—02一级目录和文件介绍
jiaojsun的博客
07-06 516
build:webpack配置相关 config:生产环境和开发环境的一些配置参数 node_modules:安装的第三方依赖 src:项目源码，这里面的东西会被webpack进一步处理 static: 放置的一些第三方资源 .babelrc:是因为很多浏览器不支持一些高级的语法，比如es6，所以需要安装babel这个编译器，当我们启动babel的时候，webpack会在项目目录里面...
Vue中创建组件及引入组件及调用
On the way
04-01 4998
第一章 Vue中创建组件及引入组件及调用 文章目录一、什么是组件？二、如何注册组件？1.注册组件2.vue项目中引入组件总结 Vue创建组件 ` Vue框架最核心思想就是组件化，方便开发，便于维护管理，那么，如何在vue中创建组件及如何引用呢？ 一、什么是组件？ 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 二、如何注册组件？ 1
vue添加全局的方法、组件、过滤器、和自定义指令等
weixin_38169886的博客
08-13 793
1. 先来说一说export， export default，module.exports的区别和使用他们都是成对使用的，不能乱用：（1）module.exports 和 exports对应的是require：是属于CommonJS模块规范。module.exports导出如下： // 在fun.js 写入 const arr = [1, 2, 3] module.exports ...
H5学习小结——div+css创建电子商务静态网页
duenyang的博客
07-30 5266
使用Sublime Text软件编写电子商务类网站静态形式首页    经过差不多一星期的学习，基本掌握了div+css的用法之后，开始了实战练习。首先要做的就是要练习一下一般电子商务网页的编写，我做的是下图效果的网页，是一个关于台湾特产的网页。如图：      拿到图片之后，首先要分析一下整个网页的结构，上图所示的网页稍微分析一下就可以看出具体分为四个部分，为头部header，中间的广
Vue 创建组件的两种方法
cofecode的博客
07-07 1万+
创建组件方法var child=Vue.extend({})var parent=Vue.extend({})Vue.extend() 全局方法 生成构造器，创建子类使用基础 Vue 构造器，创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用Vue.component()直接创建和注册组件：Vue.component(id,options) 全局方法 用来注册全局组件id 是strin
Spring Boot合并SSM框架maven管理的单体项目练习
gaofengyan的博客
01-21 348
          idea下用spring boot搭建整合SSM框架的单体微服务项目过程可参考另一篇博客：https://blog.csdn.net/gaofengyan/article/details/85268253，这里不再赘述，直接上练习代码。既然是微服务项目，在idea下能完成，也可以直接迁移到Linux系统，增加对分布式文件的上传，下载等操作。          如果需要源码和联...
vue2项目使用Loading 组件
07-15
在 Vue 2 项目中使用 Loading 组件可以通过以下步骤实现： 1. 首先，你需要创建一个名为 Loading 的组件。可以在你的项目中创建一个新的 .vue 文件来定义这个组件。这个组件可以包含一个加载动画或者其他你想要展示的内容。 2. 在你的组件中，你可以使用 Vue 的数据绑定来控制 Loading 组件的显示与隐藏。可以在组件的 data 中添加一个布尔类型的变量，比如 `isLoading`，默认值为 `false`。 3. 在需要显示 Loading 组件的地方，可以使用 `v-if` 指令来判断 `isLoading` 是否为 `true`，如果是则显示 Loading 组件。例如： ```html <template> <div> <button @click="showLoading">显示Loading</button> <loading v-if="isLoading"></loading> </div> </template> ``` 4. 在组件的方法中，你可以定义一个函数来改变 `isLoading` 的值，从而控制 Loading 组件的显示与隐藏。例如： ```javascript <script> import Loading from './Loading.vue'; export default { components: { Loading, }, data() { return { isLoading: false, }; }, methods: { showLoading() { this.isLoading = true; // 模拟异步操作 setTimeout(() => { this.isLoading = false; }, 3000); }, }, }; </script> ``` 在上面的示例中，点击按钮会调用 `showLoading` 方法，在方法中将 `isLoading` 设置为 `true`，然后通过 `setTimeout` 模拟一个异步操作，3 秒后将 `isLoading` 设置为 `false`，从而隐藏 Loading 组件。 这样就可以在你的 Vue 2 项目中使用 Loading 组件了。当需要展示加载状态时，通过改变 `isLoading` 的值来显示 Loading 组件，加载完成后再将其隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值