2024年Web前端最全Day03-Vue入门,面试必备知识点

前端资料汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

Document

{{message}}

2.2、入门案例创建步骤:

使用Vscode创建html页面文件,在文件第一行输入英文!号,按下Tab,将会自动生成代码。

在这里插入图片描述引入vue.js文件,需要在电脑中磁盘文件夹位置引入,不能再vscode中复制到文件中。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3、在vs code中创建代码片段,快速生成html文件


打开vscode。文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段:vue-html.code-snippets。将下面代码复制到新建的文件中。

注意:制作代码片段的时候,字符串中如果包含文件中复制过来的“Tab”键的空格,要换成“空格键”的空格

{

“vue htm”: {

“scope”: “html”,

“prefix”: “vuehtml”,

“body”: [

“”,

“<html lang=“en”>”,

“”,

“”,

" <meta charset=“UTF-8”>",

" <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>",

" <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>",

" Document",

“”,

“”,

“”,

" <div id=“app”>",

“”,

" ",

" <script src=“vue.min.js”>",

"

" new Vue({",

" el: ‘#app’,",

" data: {",

" $1",

" }",

" })",

" ",

“”,

“”,

“”,

],

“description”: “my vue template in html”

}

}

然后,在vscode中创建新的html文件,在文件第一行输入vue html按下Tab键即可快速生成Vue模板代码。

二、基本语法

=====================================================================

1、基本数据渲染和指令


创建 01-基本数据渲染和指令.html

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)

data: {

content: ‘我是标题’,

message: '页面加载于 ’ + new Date().toLocaleString()

}

{{content}}

{{content}}

2、双向数据绑定


创建 02-双向数据绑定.html

双向数据绑定和单向数据绑定:使用 v-model 进行双向数据绑定

{{searchMap.keyWord}}

data: {

searchMap:{

keyWord:‘你好’

}

}

3、事件


创建 03-事件.html

查询

<button @click=“search()”>查询

4、修饰符


修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():即阻止事件原本的默认行为

保存

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值