Vue小白入门

推荐慕课网Vue.js视频教学,简单、易学、时间短,小白的入手必备

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue入门</title>
   <script src="Vue.js"></script>
</head>
<body>
<!--1、挂载点(相当于绑定关于可以相当于类选择或者id选择)、模板可以写在Vue中的tempate中也可以写在挂载点中、实例之间的关系-->
<!--2、Vue实例中的数据 data函数、事件 methods和方法 this.content-->
<!--Vue中的属性绑定和双向数据绑定-->
<!--todolist功能开发-->
<div id="root">
   <div @click="handleClick" :title="title">
      <!--  @等于v-on:  -->
      <!-- :等于v-bind: -->
      <!-- v-model:双向绑定-->
      <!--{{content}}-->
      hello world
   </div>
   <input v-model="content"/>
   <div :value="content">{{content}}</div>
   姓:<input v-model="firstName"/>
   名:<input v-model="lastName"/>
   <div>{{fullName}}</div>
   <div>{{count}}</div>
   <div v-if="show">hello world</div>
   <button @click="handleClick">toggle</button>
   <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
   </ul>
   <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
      <ul>
         <li v-for="(item,index) of list" :key="index">{{item}}</li>
      </ul>
   </div>


</div>
<!--v-text与v-html的区别
v-text会进行转义,v-html不会进行转义,同样的内容例如<h1>Hello</h1>  v-text会显示<h1>Hello</h1>  v-html会显示Hello   -->
<!-- v-show 与 v-if 区别
 使用v-show属性只是给控件添加了一个style="display:none" css属性值
 使用v-if 是移除标签
 v-show性能比较好点,如果使用频率大的话使用v-show,不大使用v-if  -->


<script>
   new Vue({
      el:"#root",//接管那个元素,将id为root的元素绑定
      data:{
          content:"this is content",
         title:"this is hello world",
         firstName:'',
         lastName:'',
         count:0,
         show:true,
         list:[],
         inputValue:"",
      },
      //Vue中的计算属性复合运算
      computed:{
          fullName:function () {
            return this.firstName + '' + this.lastName
            }
      },
      //侦听器 内容发生变化时使用
      watch:{
          fullName:function () {
            this.count++
            },
      },
      methods:{
         // handleClick:function () {
            // this.content = "world"
            // },
            handleClick:function () {
                this.show = !this.show
            },
            handleSubmit:function () {
            this.list.push(this.inputValue)
            this.inputValue=''
            }
      }
   })
</script>
</body>
</html>

此篇文章是本人学习时的文章,仅供参考

### 关于 Vue 前端项目的入门资料与教程 对于初学者来说,Vue 是一种非常友好的前端框架,其简单易学的特点使得许多开发者能够快速上手并构建功能丰富的应用。以下是针对 Vue 前端项目的小白入门教程及相关知识点: #### 一、Vue3 入门推荐资源 一份详尽的 Vue3 入门教程可以帮助新手从零开始掌握 Vue 的基础知识以及实际开发技巧[^1]。该教程涵盖了 Vue3 的核心概念,例如响应式系统、组合 API 和模板语法等内容。 #### 二、Element Plus 集成指南 如果计划在 Vue3 项目中使用 Element Plus 这样的 UI 库,则可以按照官方文档中的说明完成集成操作。具体步骤如下: - 下载依赖库 `npm install element-plus --save`; - 在入口文件 main.js 中全局引入或按需加载组件样式; - 使用 `<script setup>` 或传统方式编写基于 Element Plus 的界面逻辑。 #### 三、Vue Router 路由管理器介绍 为了实现页面之间的跳转和动态更新视图的功能,在 Vue 项目里通常会借助 **Vue Router** 插件来定义不同的路径及其对应的显示内容[^2]。它的主要作用就是通过声明式的配置映射 URL 到特定的组件实例上去渲染出来给用户查看。 ##### (1)安装与初始化过程概述 遵循标准流程设置好环境之后就可以着手处理以下几个方面的工作了: 1. 执行命令行工具添加必要的支持模块:`npm i vue-router@next`; 2. 导入所需类库至 JavaScript 文件头部位置; 3. 调用方法激活插件机制使其生效在整个应用程序范围内可用 ; 4. 构建包含多个子项的对象结构用来描述各个可能访问的目标地址连同关联起来呈现出来的部分 ; 5. 把最终形成的 navigation graph 注册进去根级别容器当中去接管整个生命周期事件流控制权柄. ##### (2)关键要素解析 除了上述提到的基础搭建之外还需要注意两个重要环节——即创建具体的 view component 并指定它们各自的 routing rule;另外就是在布局设计阶段预留空白区域作为 placeholder 来承载即将被替换掉的内容区块也就是所谓的 “router-view”。 #### 四、实践建议 当熟悉理论知识以后不妨尝试动手做一些简单的练习题目巩固记忆效果比如模仿现有网站制作登录表单或者商品列表页等等形式多样化的案例演练有助于加深理解程度提高解决问题的能力水平。 ```javascript // 示例代码片段演示如何配置一个基本的 Vue Router 实例 import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') // 动态懒加载 Home 组件 }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ]; export const router = createRouter({ history: createWebHistory(), routes, }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值