130Vue-概述Hello Vue

最新推荐文章于 2024-07-24 12:54:56 发布

教练我真的想敲代码

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量202

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Gy_9543/article/details/107799127

版权

vue 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

国产框架
vue：渐进式JavaScript框架
声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
官网vue官网

与原生js区别

在这里插入图片描述

Hello Vue

<!-- 基本使用 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

在这里插入图片描述

基本使用步骤

vue 的基本使用步骤
1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法功能了
4、把vue提供的数据填充到标签里

<body>
    <div id="app">
        <div>{{msg}}</div>
        <P>{{1+2}}</P>
    </div>
    //<!-- 基本使用 -->
    //<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    //<!-- 生产环境版本，优化了尺寸和速度 -->
    //<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->


    <script>
        /* vue 的基本使用步骤
        1、需要提供标签勇于填充数据
        2、引入vue.js库文件
        3、可以使用vue的语法功能了
        4、把vue提供的数据填充到标签里
        */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
        /*
         1.
            实例参数分析
            el 元素的挂载位置（值可以是 CSS 选择器或者 DOM 元素）
            data ：模型数据（值是一个对象
            2.
            插值表达式用法
            将数据填充到 HTML 标签中
            插值表达式支持基本的计算操作

            3. Vue
            代码运行原理分析
            概述编译过程的概念（ Vue 语法 -> 原生语法 */
    </script>
</body>