前端技术-vue

最新推荐文章于 2022-11-30 20:53:09 发布

xiaogang_987654

最新推荐文章于 2022-11-30 20:53:09 发布

阅读量92

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45571513/article/details/118582015

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

前沿

Vue 是一套用于构建用户界面的渐进式框架。

Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动

官方网站:https://cn.vuejs.org

1.创建html页面，使用vscode快捷键生成html 代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2 .引入vue的js文件，下载地址 https://cn.vuejs.org

在<body></body>中引入

<script src="vue.min.js"></script>

3.在html页面创建div标签，div添加id属性

<div id="app"></div>

4.编写vue代码，固定的结构

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

5.使用差值表达式，获取data里面定义值 {{名称}}

<body>
    <div id="app">
        <!-- {{}}插值表达式，绑定vue -->>
        {{message}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        //创建一个vue对象
        new Vue({
            el:'#app', //绑定vue作用的范围
            data:{    //定义页面中显示的模型数据
                message:'Hello Vue!'
            }
        })
    </script>
</body>

在vs code中创建代码片段：

文件 => 首选项 => 用户片段 => 新建全局代码片段/或文件夹代码片段：

vue-html.code-snippets （注意尾缀.code-snippets固定）

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

xiaogang_987654

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端技术-vue

前沿Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动官方网站:https://cn.vuejs.org1.创建html页面，使用vscode快捷键生成html代码！<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫

专栏目录