一元云购网站黑客攻击,百度百科词条,网站流量工具,wordpress 审核文章前端框架VUE入门 概述基础语法介绍组件特性组件注册Props 属性声明事件组件 v-model(双向绑定)插槽Slots内容与出口 组件生命周期样式文件使用1. 直接在style标签中写CSS2. 引入外部CSS文件3. 使用CSS预处理器4. 在main.js中全局引入CSS文件5. 使用CSS Modules6. 使用P… 前端框架VUE入门 概述基础语法介绍组件特性组件注册Props 属性声明事件组件 v-model(双向绑定)插槽Slots内容与出口 组件生命周期样式文件使用1. 直接在style标签中写CSS2. 引入外部CSS文件3. 使用CSS预处理器4. 在main.js中全局引入CSS文件5. 使用CSS Modules6. 使用PostCSS 完整示例1. 创建 Vue 项目如果还没有2. 定义和使用组件3. 在主应用中使用组件4. 运行应用完整项目结构 参考文献 概述
Vue.js发音为 /vjuː/类似于 “view”是一款用于构建用户界面的JavaScript框架。以下是Vue.js的一些核心特点和介绍 渐进式框架Vue被设计为可以自底向上逐层应用使其成为一个渐进式框架。这意味着开发者可以逐步地采用Vue.js而不必一开始就完全重写现有的项目。 视图层关注Vue的核心库只关注视图层易于上手并且便于与第三方库或既有项目整合。 MVVM架构Vue.js是一个提供了MVVMModel-View-ViewModel风格双向数据绑定的JavaScript库专注于View层。它的核心是ViewModel负责连接View和Model保证视图和数据的一致性。 轻量级框架Vue.js能够自动追踪依赖的模板表达式和计算属性提供MVVM数据绑定和一个可组合的组件系统具有简单、灵活的API。 双向数据绑定Vue.js允许采用简洁的模板语法将数据声明式渲染整合进DOM这是Vue.js的核心特性之一。 指令和组件化Vue.js通过内置指令与页面进行交互并且支持组件化开发使得开发者可以构建可复用的组件。 响应性Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。 生态系统Vue不仅仅是一个框架它还包括了一系列现代化的工具链和支持类库如vue-router、vuex等可以为复杂的单页应用提供完整的解决方案。 灵活性Vue的简单小巧的核心和渐进式技术栈使其足以应对任何规模的应用。 性能Vue.js拥有20kb的mingzip运行大小和超快的虚拟DOM性能提供了最省心的优化。
Vue.js适用于从简单到复杂的各种界面开发并且由于其灵活性和渐进式的特性它成为了生产环境中广泛使用的一个JavaScript框架之一。
基础语法介绍
Vue.js 是一个渐进式JavaScript框架用于构建用户界面。以下是Vue.js的一些基础语法 声明式渲染 div idapp{{ message }}
/div在Vue实例中message 是一个响应式的数据属性。 数据绑定 div idappp{{ user.name }}/p
/div这里user 是一个对象name 是它的属性。 指令 v-bind用于动态地绑定一个或多个属性或一个组件prop到表达式。img v-bind:srcimageSrcv-model在表单输入和应用状态之间创建双向数据绑定。input v-modelmessagev-on监听DOM事件并在事件触发时执行表达式。button v-on:clickcounter 1增加/buttonv-for基于源数据多次渲染元素或模板块。li v-foritem in items{{ item.text }}/liv-if、v-else-if、v-else条件渲染。p v-ifuser.isLoggedIn欢迎回来/pv-show根据表达式的真假值切换元素的CSS display 属性。p v-showuser.isLoggedIn欢迎回来/p计算属性 new Vue({el: #app,data: {firstName: Foo,lastName: Bar},computed: {fullName: function () {return this.firstName this.lastName;}}
});使用 fullName 时它将自动更新。 方法 button v-on:clicksayHelloSay hello/buttonnew Vue({el: #app,methods: {sayHello: function () {alert(Hello, this.fullName);}}
});事件处理 button v-on:clicksay(Hello)Say Hello/buttonnew Vue({el: #app,methods: {say: function (message) {alert(message);}}
});组件 Vue.component(my-component, {template: divA custom component!/div
});在父组件中使用 my-component/my-component生命周期钩子 new Vue({el: #app,created: function () {console.log(Vue instance created);}
});表单输入绑定 input v-modelmessage placeholderedit me列表渲染 ul idlistli v-foritem in items{{ item.text }}/li
/ul这些是Vue.js中一些基础的语法和概念Vue.js的功能远不止这些还有更多高级特性等待探索。
组件特性
组件注册
全局注册
import { createApp } from vue
const app createApp({})
app.component(// 注册的名字MyComponent,// 组件的实现{/* ... */}
)如果使用单文件组件你可以注册被导入的 .vue 文件
import MyComponent from ./App.vueapp.component(MyComponent, MyComponent)Props 属性声明 一个组件需要显式声明它所接受的 props这样 Vue 才能知道外部传入的哪些是 props哪些是透传 attribute defineProps方式
script setup
const props defineProps([foo])console.log(props.foo)
/script使用props属性的方式
export default {props: [foo],setup(props) {// setup() 接收 props 作为第一个参数console.log(props.foo)}
}事件
在组件的模板表达式中可以直接使用 $emit 方法触发自定义事件 (例如在 v-on 的处理函数中)
!-- MyComponent --
button click$emit(someEvent)Click Me/button父组件可以通过 v-on (缩写为 ) 来监听事件
MyComponent some-eventcallback /同样组件的事件监听器也支持 .once 修饰符
MyComponent some-event.oncecallback /像组件与 prop 一样事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样在模板中我们也推荐使用 kebab-case 形式来编写监听器。
组件 v-model(双向绑定)
!-- Child.vue --
script setup
const model defineModel()function update() {model.value
}
/scripttemplatedivParent bound v-model is: {{ model }}/divbutton clickupdateIncrement/button
/template父组件可以用 v-model 绑定一个值
!-- Parent.vue --
Child v-modelcountModel /插槽Slots内容与出口
举例来说这里有一个 组件可以像这样使用
FancyButtonClick me! !-- 插槽内容 --
/FancyButton而 的模板是这样的
button classfancy-btnslot/slot !-- 插槽出口 --
/button元素是一个插槽出口 (slot outlet)标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
组件生命周期
Vue组件的生命周期指的是组件从创建到销毁的整个过程Vue为这个生命周期提供了一系列的钩子函数允许我们在不同阶段执行代码。以下是Vue组件的主要生命周期钩子 beforeCreate 在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段组件实例的 data 和 methods 还未被设置因此不能访问 data 和 methods。 created 实例已经创建完成数据观测 (data observer)、属性和方法的运算watch/event 事件回调。然而挂载阶段还没开始$el 属性目前不可见$el 会在 beforeMount 钩子中被创建。 beforeMount 在挂载开始之前被调用相关的 render 函数首次被调用。此时 $el 已经被创建你可以访问到 $el但 $el 还没有被插入文档。 mounted 挂载结束$el 已经被新创建的 vm.$el 替换了data 已经被设置所有的子组件也都挂载完成了。可以执行DOM操作如访问子组件实例或执行DOM操作。 beforeUpdate 在数据变化之后DOM重新渲染之前调用此时可以在这个钩子中进一步地更改状态这不会触发额外的重渲染。 updated 由于数据更改导致的虚拟DOM重新渲染和打补丁在这之后会调用该钩子。可以执行依赖于DOM的操作。 beforeDestroy 实例销毁之前调用。在这一步实例仍然完全可用。可以执行清理工作例如解绑事件。 destroyed Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定所有的事件监听器会被移除所有的子实例也会被销毁。该钩子的调用标志着实例生命周期的结束。 errorCaptured (全局混入或组件内) 当捕获一个来自子孙组件的错误时被调用。这成为了“全局”生命周期钩子的一部分也可用于组件内。它提供了两个参数错误对象和错误来源的组件实例。 activated 和 deactivated 这两个钩子函数仅在 keep-alive 组件中生效。activated 在缓存组件被激活时调用。deactivated 在缓存组件被停用时调用。
这些生命周期钩子函数提供了在组件的不同阶段执行代码的能力使得开发者可以更好地控制组件的行为和状态。
样式文件使用
在Vue项目中引入CSS可以通过多种方式以下是几种常用的方法
1. 直接在style标签中写CSS
在Vue组件的style标签中直接编写CSS这样CSS只会作用于当前组件
templatediv classmy-component!-- 组件内容 --/div
/templatescript
export default {// 组件逻辑
};
/scriptstyle scoped
.my-component {/* 样式只会应用到当前组件 */
}
/style使用scoped属性可以确保样式只作用于当前组件避免影响到其他组件。
2. 引入外部CSS文件
在Vue组件中引入外部的CSS文件
templatediv classmy-component!-- 组件内容 --/div
/templatescript
export default {// 组件逻辑
};
/scriptstyle
import ./path/to/your-styles.css;
/style3. 使用CSS预处理器
Vue CLI支持Sass、Less等CSS预处理器可以在项目中引入预处理器并使用
templatediv classmy-component!-- 组件内容 --/div
/templatescript
export default {// 组件逻辑
};
/scriptstyle langscss scoped
.my-component {// 使用Sass语法$color: #333;background-color: $color;
}
/style4. 在main.js中全局引入CSS文件
如果你想在全局范围内使用某个CSS文件可以在项目的入口文件main.js中引入
import Vue from vue;
import App from ./App.vue;
import ./assets/global.css; // 全局引入CSS文件new Vue({render: h h(App),
}).$mount(#app);5. 使用CSS Modules
CSS Modules是一种CSS本地化技术可以在Vue中使用
templatediv :class$style.myComponent!-- 组件内容 --/div
/templatescript
export default {// 组件逻辑
};
/scriptstyle module
.myComponent {/* 样式 */
}
/style在模板中使用:class$style.myComponent来应用样式CSS Modules会自动处理类名使其唯一避免全局污染。
6. 使用PostCSS
PostCSS是一个用JavaScript工具和插件转换CSS代码的工具可以在Vue CLI项目中配置PostCSS来实现自动前缀添加、变量处理等功能。
以上是在Vue项目中引入CSS的几种方法你可以根据项目需求和个人喜好选择合适的方式。
完整示例
以下是一个简单的 Vue.js 组件定义和使用的完整代码示例。我们将创建一个名为 HelloWorld 的组件并在一个 Vue 应用中使用它。
1. 创建 Vue 项目如果还没有
首先如果你还没有 Vue 项目你可以使用 Vue CLI 创建一个新的 Vue 项目。在命令行中运行以下命令
npm install -g vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve2. 定义和使用组件
在 src/components 目录下创建一个新的文件 HelloWorld.vue并添加以下代码
!-- src/components/HelloWorld.vue --
templatediv classhelloh1{{ msg }}/h1pWelcome to your Vue.js app with a custom component!/p/div
/templatescript
export default {name: HelloWorld,props: {msg: String}
}
/scriptstyle scoped
h1 {color: #42b983;
}
/style这个组件包含一个简单的模板它显示一个标题和一个段落。它还有一个名为 msg 的 prop你可以将外部数据传递给这个 prop。
3. 在主应用中使用组件
打开 src/App.vue 文件并修改它以便使用 HelloWorld 组件
!-- src/App.vue --
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgHello Vue.js! //div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style在这个文件中我们导入了 HelloWorld 组件并在模板中使用了它。我们传递了一个 msg prop其值为 Hello Vue.js!。
4. 运行应用
确保你的开发服务器正在运行在 my-vue-app 目录下运行 npm run serve。然后打开浏览器并访问 http://localhost:8080你应该能看到应用已经正确渲染了 HelloWorld 组件的内容。
完整项目结构
你的项目结构应该类似于这样
my-vue-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js现在你已经成功定义了一个 Vue 组件并在你的 Vue 应用中使用了它
参考文献
vue官网地址
