vue学习-基础篇1

VIP文章 已于 2022-05-31 21:37:03 修改
阅读量618 收藏 2
点赞数 3
文章标签： vue.js 学习 前端
于 2022-05-27 10:02:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgt15679799695/article/details/124991311
版权

 

目录

 

插件安装推荐

vue.js是什么

vue的基本使用

v-text指令（类似于innerText）

v-html指令（类似innerHTML）

v-model指令

v-on指令

vue实例中的this

v-on常用的几个修饰符

v-bind指令之基本用法

v-bind指令之对象用法

v-for指令

v-if,v-else-if,v-else指令

补充：es6数组方法findIndex,数组与字符串判断 的includes

插件安装推荐

vscode有二个常用插件：vetur，Vue 2 Snippets

  1. vetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。

    • 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等

    • 语法高亮，包括 html/css/sass/scss/less/js/ts等

  2. Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示

    官网地址(里面列出了相关提示快捷词)： Vue 3 Snippets - Visual Studio Marketplace

安装方式有二种：在线安装（能上网，条件允许推荐在线安装）,离线安装

在线安装：在vscode中按（ctrl+shift+x）,搜索插件名称（例：vetur），

会出现相关插件，如果里面有install.就点击安装，如果安装完成就没install了

离线安装：拷贝相应的压缩包解压到相应目录下面（2个vscode插件.zip）

C:\Users\电脑用户名\.vscode\extensions

安装完成后，重启一下vscode就可使用插件了

vue.js是什么

官网地址

我们学习一个知识，首先是不是要了解它是什么？有什么特点？

vue.js是什么：vue就是一个javascript框架，

特点：无需再操作dom,只关心数据

vue做法与传统js对比

<!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>Document</title>
</head>
​
<body>
    <!-- js传统做法 -->
    <input type="text" id="txt">
    <p id="p">您输入了:</p>
    <script>
        let _txt = document.getElementById("txt")
        let _p = document.getElementById("p")
        _txt.oninput = function () {
            _p.innerText = "您输入了:" + _txt.value
        }
    </script>
​
    <!-- vue做法 -->
    <div id="app">
        <input type="text" v-model="msg">
        <p>您输入了:{
  {msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
      
最低0.47元/天 解锁文章
钟bug
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue day02
weixin_63471708的博客
02-24 257
更新DOM对象的innerText/innerHTML v-text="Vue数据变量" v-html="Vue数据变量" 注意: 会覆盖插值表达式 区别 v-text把值当成普通字符串显示 v-html把值当成标签进行解析显示 vue如何控制标签显示/隐藏 v-show或v-if, 给变量赋予true/false, 显示/隐藏 区别 v-show是用css方式隐藏标签 v-if直接从DOM树上移除 v-if 可以配合v-else或者v-else-if使用 v-for...
Vue教程基础篇.doc
06-16
Vue教程基础篇.doc
Vue 指令(一)
huhu_nihao的博客
06-19 427
Vue 指令(一) 指令：绑定在dom属性上 1. v-html 更新元素的 innerHTML 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）) eg: <body> <div id="app"> <p v-html = "h"></p> </div> </b...
Vue 自定义指令
m0_71459231的博客
08-18 628
学习内容
vue.js 3设计与实现 -- 响应系统的作用与实现（一）
qq_36973122的博客
12-07 172
vue3响应系统的作用与实现
Vue基本语法
weixin_52497498的博客
08-16 120
**Vue基本语法**文本渲染指令属性绑定指令事件处理指令条件渲染指令循环遍历指令事件处理指令 文本渲染指令 v-text：更新元素的innerText v-html：更新元素的innerHTML <div id="app"> <div v-html="msg"></div> <div v-text="msg"></div> </div> <script src="https://cdn.jsdelivr.net/
Vue学习笔记
TSCCG的博客
11-05 1951
1.Vue基础 1.1Vue简介 Vue官网：https://cn.vuejs.org/ 官方介绍： Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue特性： 是一个javaScript框架：必须要遵守一定规则才能使用 简化Dom操作：Vue会自动操纵由Vue的特殊语
Vue学习之路(1)
m0_66342465的博客
02-17 244
Vue概述 1.什么是Vue 官方网站：https://cn.vuejs.org 框架作者：尤雨溪 技术文档：https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套 用于构建用户界面 的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以 自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
基于vue编写的一些自定义bpmn.js案例-基础篇.zip
最新发布
03-18
基于vue编写的一些自定义bpmn.js案例-基础篇.zip基于vue编写的一些自定义bpmn.js案例-基础篇.zip基于vue编写的一些自定义bpmn.js案例-基础篇.zip基于vue编写的一些自定义bpmn.js案例-基础篇.zip基于vue编写的一些...
vue - vue基础-vue核心内容（终结篇）.doc
07-08
vue - vue基础-vue核心内容（终结篇）.doc
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
包含vue基础篇、vue进阶篇、Vue模块篇三部分
VUE基本指令介绍
qq_56597325的博客
07-06 437
VUE指令、MVVM模型
vue基础
zhoulib__的博客
10-21 150
vue的设计理念MVVM设计理念 基本的指令 v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少 v-html: 元素的innerHTML v-if : 判断是否插入这个元素,相当于对元素的销毁和创建 v-else-if v-else v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换...
Vue常用指令及使用
louyuqi520的博客
07-29 292
Vue 常用指令 指令是以数据去驱动DOM行为，简化DOM操作。常用指令如下 v-text innertext，不能解析文本中的html标签 v-html innerhtml，可解析文本中的html标签 v-show 控制元素的显示、隐藏 v-if、v-else-if、v-else 满足条件才显示对应的元素 v-for 遍历数组、对象 v-bind 单向数据绑定 v-model 双向数据绑定 v-on 事件绑定 demo v-text、v-html、v-show <div id=
Vue获取节点$ref
qq_52600282的博客
10-27 510
Vue获取节点$ref
Vue基础——常用指令
NanBeiW的博客
11-05 2650
Vue基础——常用指令 指令： Vue的指令是以v-开头的，作用于页面中的元素，所以需要将指令绑定与元素中，从而达到给绑定的元素添加行为的目的。 ​ 语法：<元素标签 v-指令 = “表达式”> 1.v-text和v-html ​ v-text 和v-html作用相近，都是更新元素的中的内容，可以理解为innertext和innerHTML，而不能一味的滥用这两个指令 ，如果需要更新的只是部分的元素则应该使用的是双大括号的插值：{{value}}。 另外 v-
innerText和innerHTML以及v-bind
weixin_44119864的博客
12-15 2133
innerHTML：设置或返回表格行的开始和结束标签之间的 HTML innerText：设置文本的，甚至标签内容，是没有标签的效果的 Vue.js v-bind ：在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组 案例 <!DOCTYPE html> <html lang="en" xmlns:v-on="http://...
vue2笔记10 插槽
路过君的博客
02-02 607
让父组件向子组件指定位置插入html结构 默认插槽 定义 <template> <div class="hello"> <h3>title</h3> <!-- 定义一个插槽，将使用组件标签时传递的内容（innerText/innerHtml）填充到此处 --> <slot>默认值，使用组件标签时没有传内容则显示这个</slot> </div> </template>
Vue学习【一】
qq_43759721的博客
07-09 159
​ 构建用户界面的渐进式框架​ 渐进式:Vue使用起来本身很简单,但是可以通过引入插件完成更加复杂的额外操作,由简单到复杂的构建.​ 框架: 将经常使用的功能提前进行了封装.以后用户只需要调用特定的函数即可完成功能.​ 1)体积很小,只需要引入vue.js文件就能够使用​ 2)运行效率高,采用的是虚拟的DOM,能够使得数据实时刷新,不需要重新页面刷新​ 3)双向数据绑定,通过vue只需要很少的代码就能完成页面与数据的绑定,不管是在页面修改还是在后台修改都可以双向同步给对应属性路径:https://c
vue实战入门基础篇二:从零开始仿门户网站实例-开发框架搭建
06-20
### 回答1： 在vue实战入门基础篇二中，我们将会从零开始搭建一个仿门户网站的实例，这个实例包括了前端页面的设计和后端API的实现。在开始这个实例之前，我们需要选定一个开发框架，这个框架将会支持我们在开发中的需求，并且方便我们的团队协作和项目管理。 在选择框架之前，我们需要考虑以下因素：开发速度、团队协作、可维护性和可扩展性。因此，我们应该选择一个适合我们现有技术栈的框架，并且具备这些因素。 在这个实例中，我们选择了vue.js作为我们的开发框架。vue.js是一个流行的JavaScript框架，它提供了强大的工具来开发富客户端应用程序。它易于使用和学习，并且对于大多数应用程序而言，它具有良好的性能。 在搭建框架时，我们采用了vue-cli工具来建立vue.js的项目模板。vue-cli可以为我们自动配置开发环境、构建工具和其他常见的开发工具，从而减少我们的开发时间。使用vue-cli搭建框架时，我们可以根据我们的需求选择所支持的特性，并且自定义构建配置。 搭建好框架后，我们还需要依次配置vue-router、vuex、axios等工具，用于路由管理、状态管理和API请求。这些工具可以加速我们的开发过程，并且有助于我们在开发过程中实现更好的代码组织，提高代码质量和可维护性。 总之，搭建一个好的开发框架是成功的开发的关键之一。我们应该选择一个适合我们项目需求的框架，同时尽可能地利用现有的工具和库来支持我们的开发过程。 ### 回答2： Vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建，主要是介绍如何使用Vue.js开发一个门户网站的搭建方法。在此基础篇中，我们将会学习如何使用vue-cli建立Vue.js的基本项目框架，并结合Bootstrap、FontAwesome等前端开发产品来丰富我们的门户网站页面。 首先，我们需要安装Vue CLI，这是Vue.js官方提供的脚手架工具，可以快速生成Vue.js项目的基本架构。安装Vue CLI之后，我们可以通过命令行在终端中进入到目标项目目录，并通过vue create projectName命令来创建一个Vue.js项目。 接下来，我们需要安装Bootstrap和FontAwesome，因为它们是实现我们门户网站样式和布局的重要工具。我们可以通过npm命令来安装它们：npm install bootstrap @fortawesome/fontawesome-free。 安装成功之后，我们可以在Vue.js的组件中使用Bootstrap和FontAwesome提供的样式和图标。在项目开发中，我们可以通过组件化的思想，将各个部分拆分为独立的组件，再通过父子组件的嵌套来构建整个门户网站的页面。 在搭建门户网站页面的过程中，还需要注意一些细节问题。比如在Vue.js中如何使用路由功能来实现不同页面之间的跳转，如何进行页面的布局和调整等等。通过综合运用Vue.js的基本语法和其它前端产品，我们可以初步完成一个仿门户网站的实例。 总之，Vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建，是一个非常实用的课程，可以帮助我们了解Vue.js在实际项目开发中的具体应用。掌握这些基础知识之后，我们可以更加专业、高效地进行门户网站开发工作。 ### 回答3： 本次教程是基于Vue.js框架来实现仿门户网站的实例教程，本文将重点介绍如何搭建开发框架。 首先，我们需要安装Vue.js框架，可以通过官网下载或者使用npm命令行工具安装，具体方法可以参考Vue.js官网上的介绍。 安装好Vue.js之后，我们需要使用Vue.js提供的命令行工具Vue CLI来搭建开发框架。首先，我们需要在命令行中输入以下命令： ``` npm install -g @vue/cli ``` 接着，我们可以创建一个新的Vue项目，可以使用以下命令： ``` vue create project-name ``` 其中，project-name是你自定义的项目名称。接下来，我们可以根据自己的需求选择不同的配置。例如，我们可以选择手动配置，来选择需要的插件和功能。然后，我们需要安装一些Vue.js的插件，例如Vue Router和Vuex。 ``` npm install vue-router vuex --save ``` 安装好插件之后，我们需要在项目中创建一些组件和页面。这些组件和页面可以根据实际需求来创建，例如首页组件、新闻组件、产品组件等。在创建组件和页面之前，我们需要在src目录下创建一个views文件夹来存放页面组件，在src/components文件夹下创建组件。 接着，我们可以使用Vue.js提供的语法来编写组件、页面和路由等。在编写代码的过程中，我们可以参考Vue.js官方文档和各种教程、博客等。 总而言之，搭建好开发框架是Vue.js实现仿门户网站的第一步。在开发过程中，我们需要不断学习和掌握Vue.js的语法、功能和特点，结合实际需求来不断优化和完善代码，最终实现一个完整的门户网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值