Vue学习笔记1---初识vue

最新推荐文章于 2024-03-29 14:11:47 发布

lazy91

最新推荐文章于 2024-03-29 14:11:47 发布

阅读量234

点赞数

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

本文链接：https://blog.csdn.net/qq_59954212/article/details/125642592

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、vue的前世今生

在vue之前，有angular、react前端框架，vue算是后起之秀。

2013年【中】尤雨溪

大佬的GitHub主页 ^_^

gigyyx990803 (Evan You) (github.com)https://github.com/yyx990803

2、vue的特点

组件化

一个.vue文件就是一个组件，包括HTML、css、js。

提高代码复用率，代码更好维护。

声明式编码

无需直接操作DOM，与原生js命令式编码对应。

虚拟DOM

3、vue2.x学习

vscode 中 live server插件

一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

01-初识vue

想让vue工作，必须创建一个vue实例，在{ }中传入一个配置对象。

root容器中的代码仍然符合HTML规范，只不过加入了一些特殊的vue语法。

root容器中的代码被称为【Vue模板】。

<!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>初识vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> -->
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
        <h1>你几岁了？{{age}}</h1>
    </div>

    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        //没有这段代码，会显示成产模式的消息，当前为开发模式
        //在火狐浏览器一切正常，在谷歌不起作用？？？不知道为啥
        Vue.config.productionTip = false

        //创建vue实例 
        //{***} vue实例中的配置对象
        const a = new Vue({
            //element,当前vue实例为哪个容器服务，css选择器
            el:'#root',
            //data中存储数据，数据供el中指定的容器使用
            data: {
                name:'vue',
                age:18
            }
        })
    </script>
</body>
</html>

el选项中，css选择器与容器不对应的情况

①一个实例，找到了多个容器

<body>
    <!-- 准备一个容器 -->
    <div class="root">
        <h1>hello,{{name}}</h1>
        <h1>你几岁了？{{age}}</h1>
    </div>

    <div class="root">
        <h1>hello,{{name}}</h1>
        <h1>你几岁了？{{age}}</h1>
    </div>

    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        //没有这段代码，会显示成产模式的消息，当前为开发模式
        //在火狐浏览器一切正常，在谷歌不起作用？？？不知道为啥
        Vue.config.productionTip = false

        //创建vue实例 
        //{***} vue实例中的配置对象
        const a = new Vue({
            //element,当前vue实例为哪个容器服务，css选择器
            el:'.root',
            //data中存储数据，数据供el中指定的容器使用
            data: {
                name:'vue',
                age:18
            }
        })
    </script>
</body>

结果：

②一个容器，多个实例

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
        <h1>你几岁了？{{age}}</h1>
    </div>

    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        //没有这段代码，会显示成产模式的消息，当前为开发模式
        //在火狐浏览器一切正常，在谷歌不起作用？？？不知道为啥
        Vue.config.productionTip = false

        //创建vue实例 
        //{***} vue实例中的配置对象
        const a = new Vue({
            //element,当前vue实例为哪个容器服务，css选择器
            el:'#root',
            //data中存储数据，数据供el中指定的容器使用
            data: {
                name:'vue',
                age:18
            }
        })

        const b = new Vue({
            //element,当前vue实例为哪个容器服务，css选择器
            el:'#root',
            //data中存储数据，数据供el中指定的容器使用
            data: {
                name:'vue2.0',
                age:3
            }
        })
    </script>
</body>

结果：

③总结

一个容器只能对应一个vue实例。

实际开发中只有一个实例，并且会配合着组件一起使用。

一旦data中的数据发生变化，模板中用到该数据的地方也会自动更新。

区分js表达式和js代码（语句）

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                                   (1). a
                                   (2). a+b
                                   (3). demo(1) 函数调用表达式
                                   (4). x === y ? 'a' : 'b'

2.js代码(语句)
(1). if(){ }
(2). for(){ }