跟着尚硅谷学vue-day1-优快云博客

前言：企业多用vue3,但是考虑到时间较充足,先学vue2,学vue3较为方便。

1.vue是什么？

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

构建用户界面：数据->界面

渐进式：Vue可以自底向上逐层的应用简单应用: 只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件（核心库可以引入各式各样的vue插件）

2.vue的特点？

1.采用组件化模式，提高代码复用率、且让代码更好维护（可以引入xxx.vue）

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。与声明式相反的是命令式。

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

原生js是通过直接操作DOM来实现的。

3.vue.js的下载，vue-devtools插件的下载

安装 — Vue.js

3.1 VueDemo

点击vscode页面html页面，点击open with five server ，进入chrome页面，ctrl+shift+l 进入开发者工具模式。

3.2 安装vue-devtools

安装较多人使用的Vue.js devtools (v5) 5.3.4，打开扩展程序进行安装，但是我的在chrome开发者工具当中没有发现Vue,采用了这个博主的文章，成功解决

完美解决Vue Devtools调试工具无法显示在F12的问题_f12没有vue devtool-优快云博客

配置调试工具LiveServer服务器参数_liveserver软件英文界面请教设置、拓展设置的英文词汇-优快云博客

4.Vue.config

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改 property

5.案例demo

1.html页面当中id不能重复，但是class可以重复，所以会出现多个模版（容器）对应一个实例，这是一个错误,结果就是只有第一个模版有解析，第二个模版语法没有解析

2.一个模版对应两个实例

3.总结，一个实例只能接管一个容器

4.在容器当中，用到模版语法的变量必须要在data当中存在。{{xxx}}中的xxx要号js表达式，且xxx可以自动读取到data中的所有属性

注意区分:

js表达式和js代码(语句)

1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方，共同点是需要一个变量去接收这个值。
(1).a(2).a+b(3).demo(1)(4).x === y ?'a’ :'b’
2.js代码(语句)
(1). if(){} (2).for(){}

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用

6.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新:

点击编辑之后，保存修改，可以看到页面上已经有修改值了。

6.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 出现vue内置函数 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 相当于给全局引入vue的构造函数 -->
</head>

<body>
    <div id="root">
        <h1>早上好，{{name}}</h1>
        <h1>年龄，{{age}}</h1>  
        <!-- 插值语法 -->
    </div>
    {{name}}
    <script type="text/javascript">
        // 打开的时候，就已经在本机5500的端口上开了一台服务器，或者说，主机本来就是一台服务器。
        Vue.config.productionTip = true;
        new Vue({
            el:'#root',
            data:{
                name:'小红',
                age: 13
            }  
            
        });//给vue传配置对象,css选择器document.getElemetByid #，用class的是 '.root'
        // 1.想让Vue工作，就必须创建一个Vue实例，且要传入个配置对象;
        // 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
        // 3.root容器里的代码被称为【Vue模板】;


    </script>
</body>

</html>