01_hello小案例

xixihaha_coder

于 2022-02-27 17:50:12 发布

阅读量453

点赞数 1

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

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123167493

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

Vue是简介

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

谁开发的尤雨溪

Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

01_hello小案例

<!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>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<!-- 
初识Vue:
1.想让vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{Xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变，那么页耐中用到该数据的地方也会自动更新;
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue的实例
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务 通常为css选择器
            data:{//data中用于存储数据，数据供el所指定的容器去使用
                name:'vue'
            }
        
        });
        
    </script>

</body>

</html>

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01_hello小案例

Vue是简介是一套用于构建用户界面的渐进式JavaScript框架谁开发的尤雨溪Vue的特点1.采用组件化模式，提高代码复用率、且让代码更好维护。2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。01_hello小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫