vue学习笔记三

最新推荐文章于 2024-04-02 20:06:01 发布
最新推荐文章于 2024-04-02 20:06:01 发布
阅读量467 收藏 1
点赞数
分类专栏： vue 学习过程 文章标签： vue webapck
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbnight/article/details/71077452
版权

vue学习笔记三

vue学习笔记一 

vue学习笔记二


才发现写了两篇一直是webpack的东西。今天用点vue的组件:

根目录下新建一个template文件夹, 顾名思义，是用来放vue组件的

在template新建一个hello.vue



hello.vue里面写点东西,顺便加点样式

<template lang="html">
  <div id="hello">
    {{message}},{{name}}
  </div>
</template>
<script>
export default {
  name:"hello",
  data(){
    return {
        message:"hello",
        name:"world"
    }
  }
}
</script>
<style lang="css">
  #hello{
    font-size:14px;
    color:#ff0202
  }
</style>

修改src/js/index.js文件




引入我们刚刚写的.vue模板

import helloVue from './../../template/hello.vue' ;


之前的data数据我们现在可以不要了,  删掉后注册引入的组件

new Vue({
el: "#app" ,
components: { "helloVue" : helloVue }
})


修改根目录的index.html文件;


<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title >vue_study</ title >
</ head >
< body >
< div id = "app" >
< hello-vue ></ hello-vue >
</ div >
</ body >
</ html >

只留刚刚的注册的那个组件


安装 vue-loader 模块;


然后我们需要修改webpack.config.js；

添加vue的解析:

{
test: / \. vue $ / ,
use: [ 'vue-loader' ]
},

到这里基本上已经完成了。


执行打包:

webpack


如果没有意外的话，刷新页面应该是这样的





到这里一个基本的.vue打包已经完成了。

下次我们写个dotolist


我也是一个vue新人，有什么不对的地方欢迎大家指正交流





jex_久尘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue学习笔记（超详细）
jiey0407的博客
03-09 5512
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
VUE学习笔记3
qq_40853460的博客
02-06 373
createApp(App).use(ElementPlus).mount("#app")写成下面好一点，因为可以在create和mount间加入引用或者声明全局组件。vue3引入element-ui引入不了，引入elementPlus就可以，见。
Vue学习笔记3--全局事件总线
jxncxgx的专栏
01-11 731
Vue学习笔记3--全局事件总线。
vue3学习笔记
weixin_70856517的博客
03-04 1024
definProps 是宏函数可以不用引入npm i mitt// 引入mitt import mitt from 'mitt' // 调用mitt得到emitter，emitter能：绑定事件、触发事件 const emitter = mitt() /* // 绑定事件console.log('test1被调用了')})console.log('test2被调用了')})// 触发事件}, 1000);}, 3000);
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 726
vue、vue学习教程、vue教程、vue3
Vue3学习笔记+报错记录
最新发布
qq_46617150的博客
04-02 1463
中可以访问到setup中的属性，方法。传统的是先打包好再启动服务器，vite是先启动服务器，再按需编译，不再等待整个应用编译完成。但是setup中不能访问到vue2配置（data，methods，computed…如果返回一个对象，则对象中的属性，方法，在模板中均可以直接使用！2.组件中所用到的：数据、方法等，均要配置在setup中。vite的启动速度会更快，动态引用（代码分割）1.Vue3中的一个新的配置项，值为一个函数。如果返回一个渲染函数，则可以自定义渲染内容。，去你想创建的目录下，执行该语句。
vue学习笔记
weixin_42765975的博客
09-21 903
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
VUE学习笔记
helloworldZZZ的博客
03-02 365
vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning。vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance。
Vue3学习笔记（尚硅谷天禹老师）
2301_76201197的博客
01-03 6040
Vue3相较于Vue2打包大小减少41%；初次渲染快55%，更新渲染快133%；内存减少54%。
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
webpack打包vue时提取css
hbnight的专栏
05-04 8015
webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: {
vue学习笔记四
hbnight的专栏
05-03 864
Vue学习笔记四 vue学习笔记一  vue学习笔记二 vue学习笔记三 今天写个todolist， 在前几篇的基础上做的。需要的同学可以点击上面的链接； 在template文件夹下新建一个list.vue； 现在是空的，先写上一点假数据 data(){ return{ items:[ // 模拟一些数据 {
vue学习笔记一
hbnight的专栏
04-27 631
vue学习笔记 (1)    学习vue也有一段时间了。断断续续从刚刚上看教程，也买过一本《vue.js权威指南》;期间一直没有做一个系统的笔记，经常学到这边，那边又忘记了。今天开始，不定期记录整理学习过程，方便下次查阅，也希望能给其他童鞋带来一点点帮助，记录中有什么不对的地方欢迎大家指正，不胜感激; 废话不多说，从零开始； 创建项目文件夹并进入:  mkdi
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值