Vue

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

Vue的特点

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM,提高开发效率
使用虚拟DOM+Diff算法，尽量复用DOM节点

Vue第一个实例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<!--    准备好一个容器-->
<div id="root">
    <h1>hello,{{name}}</h1>
</div>

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

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

初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

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

表达式：一个表达式可以生成一个值，可以放在任何一个需要值的地方
（1）a
（2）a+b
（3）demo(1)
（4）x===y?‘a’:‘b’;
js代码（语句）
（1）if(){}
(2) for(){}

模板语法

插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip=false;
        new Vue({
            el:"#app",
            data:{
                name:"Jack"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

指令语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令语法</title>
</head>
<body>
<div id="app">
    <a v-bind:href="baidu">百度一下，我就知道</a>
    <a :href="wangyi">网易</a>   <!-- v-bind的简写-->
</div>
<script src="js/vue.js" ></script>
<script>
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{
            baidu:"http://www.baidu.com",
            wangyi:"http://www.163.com"
        }
    })
</script>
</body>
</html>

在这里插入图片描述
Vue模板语法有2大类：

插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式。且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
举例： v-bind:href=“xxx” 或简写为 :href=“xxx”,xxx同样要写js表达式，且可以直接读取到data中的所有属性

数据绑定

单线数据绑定和双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>
<body>
<div id="app">
    <div>单向数据绑定：<input type="text" :value="name" ></div>
    <div>双向数据绑定：<input type="text" v-model:value="school.name"></div>
    <div>双向数据绑定：<input type="text" v-model="name"></div>
</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
    Vue.config.productionTip=false;

    new Vue({
        el:"#app",
        data:{
            name:"百度",
            school:{
                name:"幸福中学"
            }
        }
    })
</script>
</html>

在这里插入图片描述

Vue中有两种数据绑定的方式：

单向绑定（v-bind）: 数据只能从data流向页面
双向绑定（v-model)：数据不仅能从data流向页面，还能从页面流向data
注意： 1.双向绑定一般用于表单类元素上（如input，select等）
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值

在这里插入图片描述

el与data中的两种写法

el的两种写法

<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>
<body>
<div id="app">
    <div>单向数据绑定：<input type="text" :value="name" ></div>
    <div>双向数据绑定：<input type="text" v-model:value="school.name"></div>
    <div>双向数据绑定：<input type="text" v-model="name"></div>
</div>

</body>
&lt;!&ndash; 开发环境版本，包含了有帮助的命令行警告 &ndash;&gt;
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
&lt;!&ndash;<script src="js/vue.js" ></script>&ndash;&gt;
<script>
    Vue.config.productionTip=false;

    new Vue({
        el:"#app",
        data:{
            name:"百度",
            school:{
                name:"幸福中学"
            }
        }
    })



</script>
</html>-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    你好，{{name}} <br>
</div>

<script>
    //第一种写法
    new Vue({
        el:"#app",
        data:{
            name:"张三"
        }
    })
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--    你好，{{name}} <br>-->
    欢迎来到{{school.name}}
</div>

<script>
    //第一种写法
    // new Vue({
    //     el:"#app",
    //     data:{
    //         name:"张三"
    //     }
    // })

    // 第二种写法
    const v=new Vue({
        data:{
            school:{
                name:"幸福中学"
            }
        }
    })
    v.$mount("#app")
    
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--    你好，{{name}} <br>-->
<!--    欢迎来到{{school.name}}-->
    学校Id是{{school.id}}
</div>

<script>
    //第一种写法
    // new Vue({
    //     el:"#app",
    //     data:{
    //         name:"张三"
    //     }
    // })

    // 第二种写法
    // const v=new Vue({
    //     data:{
    //         school:{
    //             name:"幸福中学"
    //         }
    //     }
    // })
    // v.$mount("#app")

    //第二种写法应用：
    const d=new Vue({
        data:{
            school:{
                id:123456
            }
        }
    })

    setTimeout(()=>{
        d.$mount("#app")
    },2000)



</script>

</body>
</html>

在这里插入图片描述

data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data的两种写法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    你好，{{name}}
</div>
<script>
    Vue.config.productionTip=false
    // data的第一种写法：对象式
    /*new Vue({
        el:"#app",
        //data的第一种写法
        data:{
            name:"张三"
        }
    })*/

    // data的第二种写法：函数式  经常用于Vue组件中
    new Vue({
        el:"#app",
        /*
        data:function(){
            console.log("函数的this对象是Vue对象,",this)   //此处的this是Vue的实例对象
            return{
                name:"李四"
            }
        }
        */

        // 简写为：
        data(){
            console.log("函数的this对象是Vue对象,",this)   //此处的this是Vue的实例对象
            return{
                name:"李四"
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

el与data的两种写法：

el有2种写法：
（1）new Vue时候配置el属性
（2）先创建Vue实例，再通过vm.$mount(‘#root’)指定el的值
data有2种写法：
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
注意：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是windows实例