Web前端系列之Vue应用基础解析

内容导读

vue3的安装与配置
vue3基本语法与常用指令
vue方法、计算属性与监听器
表单元素的数据绑定

一、vue.js的安装与配置

1. vue.js的简介与作用

vue.js读作为[vju:]与view读音相似，它也是一个js库，用于实现前端单页应用，以移动端优先的原则设计app应用，最主要要的功能是实现各种网页设计之外，能够方便地加载数据并进行渲染。

比如：不需要我们显式地找网页中的元素，而是通过vue.js的一系列指令直接操作网页中的元素

关开vue版本：vue2.0(2013年底将不再更新)，目前流行vue3.0版本

2. vue环境配置

（1）直接导入外部的依赖，实现vue.js网页的开发

比如:

<script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>

（2）使用类似于v-if或v-for等指令完成前端网页

说明：请下载专门前端开发工具HBuilder，或webstorm/sumline

二、vue3的基本语法与常用指令

基本语法，使用步骤

直接导入网络上的vue3的依赖-》生成Vue指定对象createApp-》使用对象调用Vue的构造方法，设置变量的值，最后通过mount方法挂载网页中的元素。

2. 常用六种指令

v-if：条件指令

v-html：插值指令

v-show：显示指令

v-for：循环指令

v-bind：属性绑定指令

v-on：事件指令

2.1 vue3的基本语法（使用格式）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue初步应用</title>

    </head>

    <body>
        <h2>1.vue的两插值(加载文本或网页标签)</h2>

        <!-- (1)直接通过vue的表达式输出语句加载内容 -->
        <h3 id="app">
            {
   
   {200+300}}
            &ensp;
            {
   
   {money}}
            {
   
   {msg}}
        </h3>

        <h3 id="app1">
            <p v-html="face"></p>

            <p v-html="msg"></p>

        </h3>

    </body>

    <!--1导入vue.js的依赖-->
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

    <!--2.生成一个vue.js的对象,指定此对象绑定的元素-->
    <script>
        //3.1 创建一个vue实例,名字必须是系统指定的对象名{createApp}
        const {createApp} = Vue;
        //通过app对象调用有参构造方法
        createApp({
            data() {
                return {
                    money: 99888,
                    msg: '我就是我',
                }
            }
            //必须直接挂载前端需要渲染的元素
        }).mount("#app");
        //可以调用vue对象来扩展功能
        //createApp
        
        //3.2 再挂其它元素
        createApp({
            data(){
                return{
                    face:"<i style='color:red'>98</i>",
                    msg:'一片冰在玉壶!'
                }
            }
        }).mount("#app1")
        
    </script>

</html>

2.2 vue3 常用指令（渲染数据）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue常用指令</title>

    </head>

    <body>
        <h3>1.v-html,加载网页内容</h3>

        <h3>2.v-if,条件判断</h3>

        <div id="app1">
            <p v-if="flag">
                {
   
   {msg}}
            </p>

        </div>

        <div id="app2">
            <p v-for="name in arr">
                <!-- {
   
   {name}} -->
                <span v-html="name"></span>

            </p>

        </div>

        <h3>3.v-bind,属性的管理</h3>

        <div id="app3">
            <a v-bind:href="">走你</a>

            <!--可以简写为这样-->
            <a :href="">走你</a>

            <img v-bind:src="">
            <!--可以简写为这样-->
            <img :src="">
        </div>

        <h3>4.v-on指令,事件管理</h3>

        <div id="app4">
            <p>{
   
   {poem}}</p>

            <!-- v-on绑定单击事件，可以简写为@click="play()"-->
            <input type="button" value="点我" v-on:click="play()">
        </div>

    </body>

    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

    <script>
        // 生成vue实例
        const {
            createApp
        } = Vue;
        //1.通过实例加载数据
        createApp({
            data() {
                return {
                    flag: false,
                    msg: "不错哦"
                }
            }
        }).mount("#app1")
        //2.重新挂载元素,遍历数组对象
        createApp({
            data() {
                return {
                    arr: ['tom', 'bean', 'mary', 'nick', 'alig']
                }
            }
        }).mount("#app2")
        //3.重新挂载元素,实现事件管理
        createApp({
            //声明全局变量
            data() {
                return {
                    poem:"一江春水向东流",
                    n:1
                }
            },
            methods:{
                // 方法的定义
               play:function(){
                   if(this.n==1){
                       this.poem='万水千山总是情';
                       this.n=2;
                   }else if(this.n==2){
                       this.poem='一江春水向东流';
                       this.n=1;
                   } 
               }
            }
        }).mount("#app4")
    </script>

</html>

三、vue方法声明与调用

在vue中处理复杂的逻辑的时候，我们经常使用计算属性、方法及监听器。

methods：方法：它们是挂载在Vue对象上的函数，通常用于做事件处理函数，或自己封装的自定义函数。
computed：计算属性：在Vue中，我们可以定义一个计算属性，这个计算属性的值，可以依赖于某个data中的数据。或者说：计算属性是对数据的再加工处理。
watch：监听器：如果我们想要在数据发生改变时做一些业务处理，或者响应某个特定的变化，我们就可以通过监听器，监听数据的变化，从而做出相应的反应。

3.1 methods 方法

在使用vue的时候，可能会用到很多的方法，它们可以将功能连接到事件的指令，甚至只是创建一个小的逻辑就像其他函数一样被重用。接下来我们用方法实现上面的字符串反转。

<body>
    <div id="app">
        <p>原数据：{
   
   {msg}}</p>

        <p>新数据：{
   
   {reversedMsg()}}</p>

    </div>

    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data(){
                return {
                    msg: 'hello world!'
                }
            },
            methods: {
                reversedMsg() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }).mount('#app');
    </script>

</body>

虽然使用computed和methods方法来实现反转，两种方法得到的结果是相同的，但本质是不一样的。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性立即返回的是之前计算的结果，而不会再次执行计算函数。

而对于methods方法，只要发生重新渲染，methods调用总会执行该函数。

如果某个computed需要的遍历一个极大的数组和做大量的计算，可以减小性能开销，如果不希望有缓存，则用methods。

课堂练习：

使用Vue计算属性实现统计该字符串的字符数量并截取字符串前2位字符。

3.2 computed 计算属性

计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。

<body>
    <div id="app">
        <p>原数据：{
   
   {msg}}</p>

        <p>新数据：{
   
   {reversedMsg}}</p>

    </div>

    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data(){
                return {
                    msg: 'hello world!'
                }
            },
            computed: {
                reversedMsg() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }).mount('#app')
    </script>

</body>

一个案例：根据商品数量修改总价

<body>
    <div id="app">
        <table width="100%" style="text-align: center;">
            <tr>
                <th>商品编号</th>

                <th>商品名称</th>

                <th>商品单价</th>

                <th>商品数量</th>

                <th>合计</th>

            </tr>

            <tr>
                <td>1</td>

                <td>小米10</td>

                <td>{
   
   {price}}</td>

                <td>
                    <button @click="subtract">-</button>

                    {
   
   {quantity}}
                    <button @click="add">+</button>

                </td>

                <td>{
   
   {totalPrice}}</td>

            </tr>

        </table>

    </div>

    
    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data() {
                return {
                    price:2999,
                    quantity:1
                }
            },
            computed:{
                totalPrice(){
                    return this.price*this.quantity;
                }
            },
            methods:{
                add(){
                    this.quantity++;
                },
                subtract(){
                    this.quantity--;
                }
            }
        }).mount('#app')
    </script>

</body>

另一个案例：对数据进行过滤处理。

<body>
    <div id="app">
        {
   
   {moneyStr}}
    </div>

    
    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data() {
                return {
                    money: 100
                }
            },
            computed:{
                moneyStr(){
                    return this.money + '￥'
                }
            }
        }).mount('#app')
    </script>

</body>

3.3 watch 监听器

watch能够监听数据的改变。监听之后会调用一个回调函数。
此回调函数的参数有两个：

更新后的值（新值）
更新前的值（旧值）

3.3.1 监听基本数据类型

下面使用watch来监听商品数量的变化。如果商品数量小于1，就重置成上一个值。

<body>
    <div id="app">
        <table width="100%" style="text-align: center;">
            <tr>
                <th>商品编号</th>

                <th>商品名称</th>

                <th>商品单价</th>

                <th>商品数量</th>

                <th>合计</th>

            </tr>

            <tr>
                <td>1</td>

                <td>小米10</td>

                <td>{
   
   {price}}</td>

                <td>
                    <button @click="subtract">-</button>

                    {
   
   {quantity}}
                    <button @click="add">+</button>

                </td>

                <td>{
   
   {totalPrice}}</td>

            </tr>

        </table>

    </div>

    
    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data() {
                return {
                    price: 2999,
                    quantity: 1
                }
            },
            computed: {
                totalPrice() {
                    return this.price * this.quantity;
                }
            },
            methods: {
                add() {
                    this.quantity++;
                },
                subtract() {
                    this.quantity--;
                }
            },
            watch:{
                quantity(newVal,oldVal){
                    console.log(newVal,oldVal);
                    this.quantity = newVal<=0?oldVal:newVal
                }
            }
        }).mount('#app')
    </script>

</body>

3.3.2 深度监听

上面的例子中，监听的简单的数据类型，数据改变很容易观察，但是当需要监听的数据变为对象类型时，上面的监听方法就失效了。

因为上面的简单数据类型属于浅度监听，对应的对象类型就需要用到深度监听，只需要在上面的基础上加上deep: true就可以了。

<body>
    <div id="app">
        <table width="100%" style="text-align: center;">
            <tr>
                <th>商品编号</th>

                <th>商品名称</th>

                <th>商品单价</th>

                <th>商品数量</th>

                <th>合计</th>

            </tr>

            <tr>
                <td>1</td>

                <td>小米10</td>

                <td>{
   
   {goods.price}}</td>

                <td>
                    <button @click="subtract">-</button>

                    {
   
   {goods.quantity}}
                    <button @click="add">+</button>

                </td>

                <td>{
   
   {totalPrice}}</td>

            </tr>

        </table>

    </div>

   
    <script src="https://unpkg.com/vue@next"></script>

    <script>
        Vue.createApp({
            data() {
                return {
                    goods:{
                        price: 2999,
                        quantity: 1
                    }
                }
            },
            computed: {
                totalPrice() {
                    return this.goods.price * this.goods.quantity;
                }
            },
            methods: {
                add() {
                    this.goods.quantity++;
                },
                subtract() {
                    this.goods.quantity--;
                }
            },
            watch:{
                goods:{
                    handler(newVal,oldVal){
                        /**
                         * 注意：虽然使用深度监听，可以监听到对象的改变。
                         * 但是，由于是对象类型，所以newVal与oldVal都指向同一个对象。
                         * 所以，newVal与oldVal中的quantity都是改变后的新值。
                         */
                        console.log(newVal,oldVal);
                        this.goods.quantity = newVal.quantity<=0?oldVal.quantity:newVal.quantity;
                    },
                    deep:true //深度监听
                }
            }
        }).mount('#app')
    </script>

</body>

上面代码中，由于监听的是对象类型，所以newVal与oldVal都指向同一个对象。
所以，在深度监听对象时，是不能正确获取更新前的对象和更新后的对象的。

解决方案：利用计算属性将对象变成字符串后再监听。

<!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>Document</title>

</head>

<body>
    <div id="app">
        商品名称：{
   
   {goods.name}}； 数量：
        <button @click="sub">-</button>{
   
   {goods.quantity}}<button @click="add">+</button>

        <br>
        总价：{
   
   {total}}
    </div>

    <script src="../js/vue3.js"></script>

    <script>
        Vue.createApp({
            data() {
                return {
                    goods:{
                        name: '小米手机',
                        quantity: 1
                    }
                }
            },
            computed:{
                total(){
                    return this.goods.quantity*100;
                },
                goodsStr(){  //这里新添加一个计算属性，将对象转变为字符串
                    return JSON.stringify(this.goods);
                }
            },
            methods:{
                add(){
                    this.goods.quantity++;
                },
                sub(){
                    this.goods.quantity--;
                }
            },
            watch:{
                goodsStr(newVal,oldVal){ //这里不再监听对象，而是监听字符串,就不用深度监听
                    let newGoods = JSON.parse(newVal);
                    let oldGoods = JSON.parse(oldVal);
                    this.goods.quantity = newGoods.quantity<=0?oldGoods.quantity:newGoods.quantity;
                }
            }
        }).mount('#app');
    </script>

</body>

</html>

四、Vue表单数据绑定

v-bind实现了数据的单向绑定，将vue实例中的数据同元素属性值进行绑定，接下来看一下vue中的数据双向绑定v-model。

1. 网页代码

<h3>1.双向数据绑定v-model</h3>

        <!-- v-model主要用于输入框标签 -->
        <div id="app">
            <!--input标签使用v-model指令,用于双向渲染数据-->
            <!--v-model用于给后端传数据,通过ajax传递-->
            <input type="text" v-model="name">
            <p v-html="name"></p>

            <p>
                {
   
   {name}}
            </p>

       </div>

2. JS代码

//一、vue指令v-model的用法
//1.生成vue的实例
const {
    createApp
} = Vue;
let app = createApp({
    data() {
        return {
            //声明变量
            name: 'tom'
        }
    } //data
})
//2.app实例挂载元素
app.mount('#app')

更多精彩内容请持续关注本站！