[Vue]----Vue的基本使用和概述

最新推荐文章于 2024-06-03 15:34:02 发布

_筱龙

最新推荐文章于 2024-06-03 15:34:02 发布

阅读量146

点赞数

分类专栏： vue全家桶资料文章标签： vue

本文链接：https://blog.csdn.net/IT_qslong/article/details/109402915

版权

vue全家桶资料专栏收录该内容

20 篇文章 3 订阅

订阅专栏

Vue

1.Vue的概述

Vue:渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建

2.Vue的基本使用

Vue的基本使用步骤

需要提供标签用于填充数据
引入vue.js库文件
使用vue的语法做功能
吧vue提供的数据填充到标签里面

2.1Vue.js之HelloWorld细节分析

实例参数分析

el:元素的挂载位置(值可以是css选择器或者DOM元素)
data:模型数据（值是一个对象）

1、提供标签用于填充数据

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

2、引入vue.js库文件

<script  type="text/javascript" src="../script/vue.js"></script>
1

3、使用vue的语法写功能

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        }
})
</script>
12345678

4、将vue提供的数据填充到标签里

<!-- 1、提供标签用于填充数据 -->
<div id="app">
    <!-- 4、将vue提供的数据填充到标签里 -->
    <div>{{msg}}</div>
    <div>{{1 + 1}}</div>
</div>

具体完整实例代码如下：

<!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>
    <div id="app">
        /*插值表达式用法*/
        <div>{{msg}}</div>
        <div>{{1+2}}</div>
        <div>{{msg+'----'+123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                    Vue的使用步骤
                    1.需要提供标签用于填充数据
                    2.引入vue.js库文件
                    3.可以使用vue的语法做功能了
                    4.吧vue提供的数据填充到标签里面
                */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>

</body>

</html>

_筱龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue]----Vue的基本使用和概述

Vue1.Vue的概述Vue:渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建2.Vue的基本使用Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件使用vue的语法做功能吧vue提供的数据填充到标签里面2.1Vue.js之HelloWorld细节分析实例参数分析el:元素的挂载位置(值可以是css选择器或者DOM元素)data:模型数据（值是一个对象）1、提供标签用于填充数据<div id="app
复制链接

扫一扫