【vue】入门介绍

简介: 【vue】入门介绍

一、前端开发工具vscode


前端代码编写工具,使用vscode:vscode官网

安装好之后,可以先装如下几个插件,方便后续的开发。


1268169-20201230142256593-1057409630.png


二、编写代码


1.vscode快捷键生成html代码


在vscode里新建一个html文件,然后输入一个 英文感叹号!,点击就可以快速生成html基础代码了。


1268169-20201230142949136-1418792688.png


2. 引入vue.js


要使用vue,要先引入。要下载的自取:


链接:https://pan.baidu.com/s/1PaML9ugU7iKt6EM4TrSsPg 
提取码:ikd4


这里暂时将下载下来的vue.js放到文件的同级目录下,然后引入(vue.min.js或者vue.js)。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- id标识vue作用的范围 -->
    <div id="app">
        <!-- {{}} 插值表达式,绑定vue中的data数据 -->
        {{ message }}
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>


3.vue结构


关注一下vue部分的代码,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,不需要繁琐的DOM操作。


比如在jQuery中,需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作。


// 创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
    </script>


这里就先创建了一个vue对象,此对象跟<div id="app">这个div元素进行绑定。最后,在html里使用差值表达式,


来获取data里的字段数据。


4. 插值表达式取值


{{ message }},2个花括号,中间写上data里的字段即可。


... ...
    <div id="app">
        <!-- {{}} 插值表达式,绑定vue中的data数据 -->
        {{ message }}
    </div>
... ...


可以在vscode文件里右键,点击open with live server,就是开始装的一个插件,就可以在浏览器中看到页面了。


1268169-20201230163539142-825231702.png


5. vscode创建代码片段


由于学习vue知识的过程中会创建多个html文件,导致编写很多重复代码,这里可以创建代码片段,以供直接创建。


点击文件——首选项——用户片段——创建新的代码片段/选择已创建的

这里的模板可以直接拿去使用,复制到你创建的代码片段即可。


{
  "vue htm": {
    "scope": "html",
    "prefix": "vuehtml",
    "body": [
      "<!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>",
      "    <div id=\"app\">",
      "",
      "    </div>",
      "    <script src=\"vue.min.js\"></script>",
      "    <script>",
      "        new Vue({",
      "            el: '#app',",
      "            data: {",
      "                $1",
      "            }",
      "        })",
      "    </script>",
      "</body>",
      "",
      "</html>",
    ],
    "description": "my vue template in html"
  }
}


使用的时候,可以直接输入 你的片段名称,比如上面的是"vue htm",输入后选择即可。


1268169-20201230162751577-1482685461.png

相关文章
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的

热门文章

最新文章

相关实验场景

更多