【Vue】1.初识vue

最新推荐文章于 2023-05-07 16:26:04 发布

豆沙睡不醒

最新推荐文章于 2023-05-07 16:26:04 发布

阅读量1.5k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_45675097/article/details/122338452

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

b站视频链接

001 Vue简介

1.简介

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

2.vue特点

1.组件化模式，提高代码复用率，让代码更好维护（vue:html+css+js）

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

在这里插入图片描述
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

3.vue官网

点击跳转

002 初识vue

在IDEA里运行vue

添加vue.js插件
在这里插入图片描述

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <!--引入vue    -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        1.想让vue工作，必须创建vue实例，且要传入vue对象
        2.root容器里的代码依然符合html规范，只不过混入了特殊的vue语法
        3.root容器的代码成为vue模板
    -->
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法-->
        <h1>HELLO,{{name}}</h1>
        <h1>我的年龄是：18</h1>
    </div>



    <script type="text/javascript">
        Vue.config.productionTip=false;//阻止vue在启动时生成生产提示vue=
        //创建vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            //了解：el:document.getElementById('root')
            //el:'.root' class="root"
            data:{//data中用于存储数据，数据供el指定的容器所使用，值暂时先写成一个对象
                name:'yiui'
            }
        })
    </script>
</body>
</html>

页面效果
在这里插入图片描述

增加一个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <!--引入vue    -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        1.想让vue工作，必须创建vue实例，且要传入vue对象
        2.root容器里的代码依然符合html规范，只不过混入了特殊的vue语法
        3.root容器的代码成为vue模板
    -->
    <!--准备好一个容器-->
    <div class="root">
        <h1>HELLO,{{name}}</h1>
    </div>
    <div class="root">
        <h1>HELLO,{{name}}</h1>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip=false;//阻止vue在启动时生成生产提示vue=
        //创建vue实例
        new Vue({
            el:'.root',
            data:{
                name:'yiui'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
容器和vue是一对一的关系
{{}}里必须写js表达式
1.表达式：一个表达式可以产生一个值，可以放在任何一个需要值的地方：

a
a+b
demo(1)
x==y?‘a’:‘b’
2.js代码语句
if
for

003 总结：

1.想让vue工作，必须创建vue实例，且要传入vue对象
2.root容器里的代码依然符合html规范，只不过混入了特殊的vue语法
3.root容器的代码成为vue模板
4.vue实例和容器一一对应
5.真实开发中只有一个vue实例，并且和组件配合使用
6.{{xxx}}中的xxx要写js表达式，而且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，页面中用到该数据的地方就会自动更新