从零学习Vue - 01初始Vue

最新推荐文章于 2024-06-21 14:30:54 发布

OtnIOs

最新推荐文章于 2024-06-21 14:30:54 发布

阅读量194

点赞数

分类专栏：前端学习文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_44610169/article/details/127917600

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是vue

vue - 一套用于构建用户界面的渐进式JavaScript框架
构建用户界面 - 在合适的时候发送合适的请求将得到的数据展示到合适的位置，将数据变成界面
渐进式 - vue可以自底向上逐层的应用，简单应用只需要引入一个小巧的核心库，复杂应用可以引入各式各样的vue插件

版本情况

2015.10.27 - vue1.0
2016.10.01 - vue2.0
2020.09.18 - vue3.0

vue特点

-采用组件化模式，提高代码复用率且让代码更好维护
组件化 - 每一个.vue文件就是一个组件 vue文件中包含HTML片段、.css、js文件，被封装的组件，可以直接拿来使用
-声明式编程，无需直接操作DOM，提高开发效率
-使用虚拟DOM+优秀Diff算法，尽量复用DOM节点
HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
数据会先产生虚拟DOM后生成页面真实DOM，如果新增虚拟DOM会与之前的虚拟DOM进行Diff比较，相同的虚拟DOM对应的真实DOM会被保存，仅新增。

vue2.0

下载vue.js在html中引入
<script type="text/javascript" src="/study-vue/js/vue.js"></script>
打开后在控制台输入vue有返回

需要安装vue开发者工具，之前按过所以没有提示，上面是提示你使用的是开发版本的js。修改配置属性，取消上面的提示。

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false
    </script>
</body>

Hello小案例

    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello Vue</h1>
    </div>

由于Live Server默认会请求页签图标，所以报错。Live Server会在本机5500的端口上开了内置的服务器，把整个工程所有文件和文件夹作为这太服务器的根资源进行使用。直接访问http://127.0.0.1:5500/ 就会显示出来我们当前工程的所有资源。

随便加个页签图标试试，就不会报错了。需要放在根目录下。

当引入js后全局就i多了一个Vue的构造函数，使用new去调用。最好放在调整后的位置使用。vue实例和上面创建的容器是需要有某种联系的。

    // 创建vue实例
    new Vue({一个配置类型对象})

可以通过使用id让两者建立起某种关系，vue就可以知道让自己的工作成功放入相同id的容器中去。vue实例会通过配置对象将对应的容器拿过来，通过解析扫描Vue自己的语法。解析之前的容器被称为Vue模板，模板经过解析，就变成了正常的html片段。

<body>
    <!-- 准备一个容器 -->
    <!-- 
        想要vue工作，必须创建一个Vue实例，且要传入一个配置对象
        root容器中的代码依然需要符合html的规范，只不过混入了一些特殊的Vue语法
        root容器中的代码被称为 Vue模板
     -->
    <div id="root">
        <h1>Hello {{ name }}</h1>  
    </div>
    <h1> 插值语法 {{ data中存储的数据 }} </h1>

    <script type="text/javascript">
        Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    // 创建vue实例
    new Vue({
        el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串  id=>#  class=>.
        data: {     // data中用于存储数据，数据供实例指定的容器所使用，暂时写成函数
            name: 'lucy',
            age: '22'
        }           // 可以将容器中需要变化的数据交给Vue实例保管， 
    })
    </script>
</body>

分析Hello案例

一个vue实例不能同时接管两个容器，会根据dom顺序，会根据先后顺序解析上方的容器。

一个容器只能被一个实例接管，下面的例子中address不生效。双方之间是一对一的关系。

虽然Vue实例只有一个，但是Vue实例下有很多组件。

OtnIOs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
从零学习Vue - 01初始Vue

vue - 一套用于构建用户界面的渐进式JavaScript框架构建用户界面 - 在合适的时候发送合适的请求将得到的数据展示到合适的位置，将数据变成界面渐进式 - vue可以自底向上逐层的应用，简单应用只需要引入一个小巧的核心库，复杂应用可以引入各式各样的vue插件。
复制链接

扫一扫