一、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue基础学习

1 Vue对象创建

javascript
<body>
    <div id="app">
        <h1>name:{{ name }}, age:{{ age }}</h1>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            //变量声明
            name: "张三", 
            age: 18
        },
        methods: {
            //方法声明
        },
    })

    //vue中内置的属性前缀为$, 可直接获取
    console.log(app.$data)  //{name: "张三", age: 18}
</script>

2 指令

2.1 v-html,v-text,{{ }}

v-html和v-text可以向标签中添加内容，而插值表达式可以在任意地方插入内容；
使用v-html会解析内容中的标签，而v-text和插值表达式原样显示；
在v-html,v-text,{{ }}中可以使用JavaScript表达式；
单向绑定，若Vue对象中的值发生改变，则对应标签中的内容也会发生改变；

javascript
<body>
    <div id="app">
        <!-- title中的标签“<h1></h1>”会被解析 -->
        <span v-html="title"></span>
        <!-- 原样显示 -->
        <span v-text="title"></span>
        <!-- 插值，可插入变量，函数，还可以进行计算 -->
        {{ num }} {{ hello() }} {{ num+10 }}
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            title: "<h1>test01</h1>",
            num: 100
        },
        methods:{
            hello() {
                return "你好！"
            }
        }
    })
</script>

2.2 v-bind,v-model

v-bind和v-model可以改变标签中的属性的值；
v-bind只能单向绑定，而v-model可以双向绑定(标签内容和Vue对象的值其中一方改变，另一方也一起改变)；
v-bind
可缩写为
；
从 2.6.0 开始, 新增动态参数功能，根据变量指定属性；

javascript
<body>
    <div id="app">
        <!-- 对超链接动态赋值 -->
        <a v-bind:href="url">gogogo</a>

		<!-- 动态修改样式 -->
        <span v-bind:style="{color: hello1.color, fontSize: hello1.fontSize}">hello1</span>

        <!-- 动态禁/启用class -->
        <span v-bind:class="{colorClass: hello2.colorClass, sizeClass: hello2.sizeClass}">hello2</span>

        <!-- 双向绑定，输入框改变，使Vue对象的值改变，然后span内容改变 -->
        <input type="test" v-model:value="age" />
        <span>今年{{ age }}</span>

        <!-- 从 2.6.0 开始, 新增动态参数功能，根据变量指定属性 -->
        <a :[attr]="url">百度</a>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            url: "https://www.baidu.com",
            age: 20,
            attr: "href",
        }
    })
</script>

2.3 v-on

https://cn.vuejs.org/v2/guide/events.html

用于给标签添加事件
v-on:num 可以简写为 @num
修饰符是以. 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，如：v-on:submit.prevent="onSubmit"，相当于event.preventDefault()

javascript
<body>
    <div id="app">
        <!-- 根据按钮绑定单击事件实现加一减一 -->
        <div v-text="num"></div>
        <button v-on:click="num++">加一</button>
        <!-- v-on:num可以简写为@num -->
        <button @click="num--">减一</button>

        <div style="border: 1px red solid; width: 200px;" @click="num++">加一
 			<!-- 修饰符:.sop,阻止事件冒泡 -->
            <div style="border: 1px blue solid; width: 100px;" @click.stop="num--">减一</div> 
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num: 20
        }
    })
</script>

2.4 v-show 与 v-if、v-else-if、v-else

条件渲染

v-if只有条件为true时才渲染；而v-show无论如何都会渲染，通过style的display切换，切换效率比v-if快；

javascript
<body>
    <div id="app">
        <!-- 条件渲染 -->
        <span v-if="num=20">
            num=20
        </span>

        <!-- 和v-if使用方法相同 -->
        <span v-show="num=20">
            num=20
        </span>

        <!-- 渲染后template标签消失 -->
        <!-- 多条件判断渲染 -->
        <template v-if="num>50">
            <span>num>50</span>
        </template>
        <template v-else-if="num>30">
            <span>num>30</span>
        </template>
        <template v-else>
            <span>num<30</span>
        </template>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num: 20
        }
    })
</script>

2.5 v-for

列表渲染

v-for中使用v-if可实现筛选功能，但不推荐使用，推荐使用计算属性computed过滤后再进行遍历。

javascript
<body>
    <div id="app">
        <ul>
            <!-- 遍历数组 -->
            <!-- key:唯一值，提高渲染效率 -->
            <li v-for="(user,index) in filterUsers" :key="index">

                <div>索引：{{index}}, 姓名：{{user.name}}, 年龄：{{user.age}}</div>

                <!-- 遍历对象属性 -->
                <span v-for="(value,key,index) in user">
                    {{index}}=={{key}}=={{value}}
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </span>
                <br/>

            </li>
        </ul>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            users: [
                {name: "张三", age: 18},
                {name: "李四", age: 19},
                {name: "王二", age: 20}
            ]
        },
        methods: {
            //方法声明
        },
        computed: {
            //使用计算属性进行筛选
            filterUsers() {
                return this.users.filter((item) => {
                    return item.age > 18
                })
            }
        }
    })
</script>

3 Vue对象属性

3.1 声明周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

javascript
<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            show() {
                return this.name;
            },
            add() {
                this.num++;
            }
        },
        beforeCreate() {
            console.log("=========beforeCreate=============");
            console.log("数据模型未加载：" + this.name, this.num);
            console.log("方法未加载：" + this.show());
            console.log("html模板未加载：" + document.getElementById("num"));
        },
        created: function () {
            console.log("=========created=============");
            console.log("数据模型已加载：" + this.name, this.num);
            console.log("方法已加载：" + this.show());
            console.log("html模板已加载：" + document.getElementById("num"));
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        beforeMount() {
            console.log("=========beforeMount=============");
            console.log("html模板未渲染：" + document.getElementById("num").innerText);
        },
        mounted() {
            console.log("=========mounted=============");
            console.log("html模板已渲染：" + document.getElementById("num").innerText);
        },
        beforeUpdate() {
            console.log("=========beforeUpdate=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板未更新：" + document.getElementById("num").innerText);
        },
        updated() {
            console.log("=========updated=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html模板已更新：" + document.getElementById("num").innerText);
        }
    })
</script>

3.2 filters

通过filters可以定义过滤器，管道式调用

javascript
<body>
    <div id="app">
        <ul>
            <li v-for="user in users">
                {{user.name}}=={{user.gender | genderPipe}} <!-- 管道式调用 -->
            </li>
        </ul>
    </div>
</body>
<script>
    // //全局过滤器
    // Vue.filter("genderPipe", (gender) => {
    //     return gender == 0 ? "女" : "男"
    // })

    let app = new Vue({
        el:"#app",
        data:{
            users: [
                {name: "张三", gender: 1},
                {name: "李四", gender: 0},
                {name: "王二", gender: 1}
            ]
        },
        filters:{
            genderPipe(gender) {
                return gender == 0 ? "女" : "男"
            }
        }
    })
</script>

3.3 computed(计算属性)

对Vue对象中data的多条数据进行计算，若其中任意一条数据发生改变，该方法会被重新调用；

javascript
<body>
    <div id="app">
        <!-- 遍历购物车的数据，可以改变单件的数量 -->
        <div v-for="value in shoppingTrolley">
            商品：{{value.title}}----单价：{{value.price}}----数量：<input type="number" v-model:value="value.count" />
        </div>
        <!-- 动态获得总价格 -->
        <div style="font-size: 30px;">
            总价格：{{totalPrice}}
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //购物车
            shoppingTrolley: [
                {
                    title: "西游记",
                    price: 98.9,
                    count: 0
                },
                {
                    title: "水浒传",
                    price: 95.2,
                    count: 0
                }
            ]
        },
        computed: {
            totalPrice() { //计算总价格
                let totle = 0
                for (value of this.shoppingTrolley) {
                    totle += value.price * value.count
                }
                return totle
            }
        }
    })
</script>va

3.4 watch(监听)

用于监听Vue对象data中的数据变化

javascript
<body>
    <div id="app">
        <input type="number" v-model:value="num" />
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            num: 10
        },
        watch: {
            num(newNum, oldNum) {  //监听num是否超出范围，若超出则还原
                console.log(newNum, oldNum)
                if(newNum < 0 || newNum > 20) {
                    alert("0 <= num <= 20")
                    this.num = oldNum;
                }
            }
        }
    })
</script>

4 组件化

4.1 作用

可以将代码封装起来，方便重复使用

4.2 特点

组件中的data不是对象，而是函数，函数的返回值为数据；
同一个组件使用多次，数据是隔离的；

4.3 全局和局部组件

全局组件

javascript
<body>
    <div id="app">
        <!-- 使用组件 -->
        <red-button></red-button>
        <red-button></red-button>
    </div>
</body>
<script>
    //全局组件声明
    Vue.component("red-button", {
        template: `<button style="color: red" @click="count++">红色按钮,第{{count}}次点击</button>`,
        data() {
            return {
                count: 0
            }
        }
    })

    let app = new Vue({
        el: "#app",
        data: {

        }
    })
</script>

局部组件

javascript
<body>
    <div id="app">
        <!-- 使用组件 -->
        <blue-button></blue-button>
        <blue-button></blue-button>
    </div>
</body>
<script>
    //局部组件声明
    let blueButton = {
        template: `<button style="color: blue" @click="count++">蓝色按钮,第{{count}}次点击</button>`,
        data() {
            return {
                count: 0
            }
        }
    }

    let app = new Vue({
        el: "#app",
        data: {

        },
        components: {  //指定要使用的组件
            "blue-button": blueButton
        }
    })
</script>

4.3.3 子父组件传递数据

javascript
//1.子组件提供事件
this.$emit(事件名, 事件参数...)

//2.父组件使用子组件的事件
<category :指定的事件名="绑定函数"></category>

5 vue脚手架

5.1 创建vue-cli脚手架工程

javascript
//准备
//1.安装vue命令
npm install -g vue-cli

//2.安装webpack
npm install webpack -g

//3.安装vue脚手架
npm install -g @vue/cli-init


//创建vue脚手架工程
vue init vubpack 项目名

启动工程
npm run dev

5.2 路由

可根据请求的url访问不同的组件

javascript
//安装路由
npm install vue-router

步骤

在 src\components\ 中自定义组件
在 src\router\index.js 中定义路由，url和组件对应关系
在页面中使用<router-view/>，指定组件渲染位置
使用 <router-link to="/"> 组件快速切换路由

目录

一、Vue简介

二、Vue基础学习

1 Vue对象创建

2 指令

2.1 v-html,v-text,{{ }}

2.2 v-bind,v-model

2.3 v-on

2.4 v-show 与 v-if、v-else-if、v-else

2.5 v-for

3 Vue对象属性

3.1 声明周期钩子

3.2 filters

3.3 computed(计算属性)

3.4 watch(监听)

4 组件化

4.1 作用

4.2 特点

4.3 全局和局部组件

4.3.3 子父组件传递数据

5 vue脚手架

5.1 创建vue-cli脚手架工程

5.2 路由