Vue2学习

最新推荐文章于 2024-05-25 16:59:51 发布

啊渊啊渊.

最新推荐文章于 2024-05-25 16:59:51 发布

阅读量161

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64376967/article/details/128442238

版权

一、Vue是什么

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

渐进式：Vue可以自底向上逐层的应用，对于简单的应用可以使用轻量小巧的核心库；对于复杂的应用可以使用各种各样的Vue插件。

二、Vue的特点

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

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

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

三、搭建Vue开发环境

方式一：<script>标签引入

引入vue时，全局多了一个名为Vue的构造函数

<head>
        <meta charset="UTF-8">
        <title>初试vue</title>
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

引入后需要在浏览器安装vue调试工具，浏览器不同安装的工具不同，安装教程点击vue调试工具vue-devtools安装及使用（亲测有效，望采纳）最后付上（Vue.js is detected on this page的解决方法） - ____chen - 博客园vue调试工具vue-devtools安装及使用（亲测有效，望采纳）最后付上（Vue.js is detected on this page的解决方法）本文主要介绍 vue的调试工具 vhttps://www.cnblogs.com/chenhuichao/p/11039427.html引入了Vue的开发版本，vue启动时会生成生产提示；

解决方案如下：

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

四、入门案例

<!DOCTYPE html>
<html>
    <!--
        小结：
            1.想让vue工作，就必须先创建一个vue实例，且要传入一个配置对象；
            2.root容器里的代码仍然符合html规范，只不过混入了一些特殊的vue语法；
            3.root容器里的代码被称为【Vue模板】
            4.vue容器和实例是一一对应的；
            5.真实开发中只有一个vue实例，且会配合着组件使用；
            6.一旦date中的数据发生改变，那么页面中的用到该数据的地方也会自动更新；
            7.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到date中的所有属性。
    -->
    <head>
        <meta charset="UTF-8">
        <title>初试vue</title>
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h1>hello,{{name}}</h1>
            <h1>{{age}}</h1>
        </div>

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

            //创建vue实例
            new Vue({
                //也可写成 el:document.getElementById('root')
                el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{     //date中用于存储数据，数据供el所指定的容器使用，值我们暂时先写成一个对象。
                    name:'sunyuan',
                    age:18
                }
            });
        </script>
    </body>
</html>