Vue.js入门与进阶-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34079398/article/details/105169739

一、开发环境配置

VSCode & 插件安装

jshint：js代码规范检查。
Beautify：一键美化代码的插件。
Vetur：.vue文件识别插件。
Javascript(ES6) code snippets：ES6语法提示。
Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
vue helper：一些Vue代码的快捷代码。
vscode-icons：可选。提供了很多类型的文件夹icon，不同类型的文件夹使用不同的icon，会让文件查找更直观。
open in browser：可选。右键可以选择在默认浏览器中打开当前网页。

二、Vue安装和使用

需要联网的方式

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载在本地的引用方法

将提前下载好的 vue.js 放在代码同级目录下

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

三、基本使用&Vue模板语法

（1）Vue对象、el参数和data参数

创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用，且data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的

（2）vue对象中添加methods

methods专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了

（3）v-once 文本

变量在第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用 v-once指令来实现。

<p v-once>{{username}}</p>

（4） v-html 文本

后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现
简单来说就是跳转链接

<div v-html="code"></div>

（5）属性绑定 v-bind:

属性绑定不需要花括号,属性不同于方法
在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现

第一种
<img v-bind:src="image" alt="">
第二种
<img :src="image" alt="">

（6）代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 这里变量来自 vue 模块中的 data 引用变量的时候需要带上{{}} -->
        <!-- <p>username: {{username}}</p> -->
        <!-- 加上 v-once 变量则在第一次渲染出来后 不被更替 -->
        <p v-once>username: {{username}}</p>
        <p>password:{{password}}</p> 
        <!-- 方法里的变量用() -->
        {{demo(username)}}  
        <!-- v-html 跳转链接实现 两种方式实现结果相同 -->
        <p v-html="code">第一种</p>
        <p v-html="code">{{code}}</p>
        <!-- 按钮 点击一下 改变 username 的值 v-on:click -->
        <button @click="demo2">按钮</button>
        <!-- src 路径 这里是想要绑定属性 和之前的那些变量的调用不同-->
        <!-- 错误的 属性是不需要包裹在{{}} -->
        <!-- <img v-bind:src="{{imagesrc}}" alt=""> -->
        <!-- <img v-bind:src="imagesrc" alt=""> -->
        <div>
        	<!-- 图片部分 属性绑定 -->
            <img :src="imagesrc" alt="">
        </div>
    </div>
</body>
</html>


<script src="./vue.js"></script>
<script>
    // vn 有自动补全
    new Vue({
        // app 和 body里面 id 为 div 的联系起来
        el: "#app",
        data:{
            "username":"逻辑教育",
            "password": 123,
            "code":"<a href='https://www.baidu.com/'>百度一下</a>",
            "imagesrc": "https://www.baidu.com/img/bd_logo1.png?qua=high&where=super",
        },
        // 定义方法
        methods:{
            // name 形参 可在使用的时候外部传入一个参数 第一个demo 传入外部参数的方式
            demo: function(name){
                return "晚上好," + name
            },

            demo2: function(){
                this.username = "lgcoder"
            }
        }
    })
</script>

四、属性绑定Class和Style

（1）绑定Class

绑定class或者style

数组方式实现

<p v-bind:class="[class1,class2]">武汉,加油！！！</p>

对象方式实现

<!-- main-title 有-用''来包裹表示变量 -->
<p :class="{title:class1, 'main-title':class2}">hello world</p>

（2）绑定Style

数组方式实现

但是样式如果有横线，则都需要变成驼峰命名的方式

用数组的方式

# 读取对应样式的值
<li :style="{backgroundColor:pBgColor,fontSize:pFontSize}">首页</li>
# 或者是直接读取整个字符串
<li :style="liStyle">首页</li>

对象方式实现

<!-- <p v-bind:style="[pclass1, pclass2]">加油, 中国</p> -->

（3）JavaScript表达式

运行使用失败，不知道原因
只能是JavaScript表达式，不能是语句
三目运算符：
{color:color?‘red’:‘blue’}

<p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>

（4）代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue模板语法</title>
    <!-- 红色的样式 style -->
    <style>
            .title{ 
                font-size: 20px;
                color: red;
            }
            .main-title{
                font-weight: 800;
            }
    </style>
</head>
<body>
    <p class="title">中国,加油</p>
    <div id="app">
            <!-- <p v-bind:class="class1">中国,加油！！！</p> -->
            <p v-bind:class="class1">中国,加油！！！</p>
            <!-- 通过[] 数组的方式加载两种 class 给这个p标签 -->
            <!-- <p v-bind:class="[class1,class2]">武汉,加油！！！</p> -->
            <!-- 通过对象的方式实现绑定 main-title 有-用''来包裹表示变量 -->
            <p :class="{title:class1, 'main-title':class2}">hello world</p>
            <!-- 样式如果有横线 加单引号'' -->
            <p v-bind:style="{'background-color':background}">逻辑</p>
            <!-- 样式如果有横线 驼峰命名（backgroundColor）的方式 -->
            <p v-bind:style="{backgroundColor:background}">教育</p>
            <!-- style 属性 -->
            <p :style="pstyle">逻辑教育</p>
            <!-- <p v-bind:style="[pclass1, pclass2]">加油, 中国</p> -->
            <!-- JavaScript的三目运算符 -->
            <!-- color:color 判断布尔值 true 为 red 反之 blue -->
            <p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>

    </div>
</body>
</html>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            // // 这里的 title 代表引用上面的红色样式
            // // class1:"title",
            // 通过[]数组方式 class1 + class2
            // class2:"main-title",
            // // 加载 class 的第二种方式(中国,加油！！！)
            // class1:"title main-title",

            // 通过对象的方式实现绑定
            class1:true,
            class2:true,
            background: 'red',
            pstyle:{
                // 这里的颜色可以写 rgb 颜色代码 red英文表示
                //  backgroundColor 驼峰命名也适合于这里
                background: 'rgb(255, 255, 51)',
            },
            username: "hello world",
            color:true,
        }
    })
</script>

五、事件绑定 & 传入 event 参数

绑定的是事件，而不是属性

如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。

<p>{{count}}</p>
<!-- 加的按钮 v-on:click -->
<button v-on:click="count+=1">加</button>
<!-- 减的按钮 @click 传入参数$event -->
<button @click="sub(2,$event)" value="这是一个减按钮" name="hello world">减</button>

<script>
    new Vue({
        sub: function(value, event){
        	// console.log 在控制台打印信息
        	//console.log(event)
            console.log(event.target.value)  // 这是一个减按钮
            console.log(event.target.name)   // hello world
            this.count -= value
        }
    })
</script>

六、条件判断和循环

（1）条件判断基本使用v-if、 v-else-if、v-else

<div id="app">
        <p v-if="weather == 'summer' ">今天去约女神</p>
        <p v-else-if="weather == 'rain'">今天在家打游戏</p>
        <p v-else>今天吃火锅</p>
</div>

（2）使用 template 在一个条件中加载多个html元素

    <div id="app">
        <template v-if="age < 18">
            <p>上网</p>
            <p>逃学</p>
        </template>
        <template v-else-if="age >= 18 && age<25">
            <p>找工作</p>
            <p>找女朋友</p>
        </template>
        <template v-else>
            <p>工资多少</p>
            <p>结婚</p>
        </template>
    </div>

（3）条件判断、JavaScript 表达式、key 属性 & button 切换的应用

在标签加上 key 元素作为唯一标识，可以实现条件下的重新渲染对应标签 key 属性的 html 元素
可应用在切换登陆方式，跟随唯一标识的元素

<!-- loginType 为定义好的登陆方式 username 和 email -->
<!-- vue 中定义函数 changeLoginType 实现来回切换（三目运算） -->
<!-- loginType=='username'?'email':'username' -->
<template v-if="loginType=='username'">
    <label for="">用户名:</label>
    <!-- placeholder -->
    <input type="text" placeholder="用户名" key="username" >
</template>  
<!-- 邮箱 input key="email" -->
<template v-else-if="loginType=='email'">
    <label for="">邮箱:</label>
    <input type="text" placeholder="邮箱" key="email">
</template>  
<!--button v-on:click 或者 @click 切换登陆方式 -->
<!-- 属性 click 由 changeLoginType函数实现 -->
<button v-on:click="changeLoginType">切换登录类型</button>

（4）v-for 循环数组

<table>
   <tr>
        <th>序号</th>
        <th>标题</th>
        <th>作者</th>
    </tr>
    <!-- 循环数组 第一个位置 数据  第二个位置 索引 -->
    <tr v-for="(book, index) in books">
        <td>{{index+1}}</td>
        <td>{{book.title}}</td>
        <td>{{book.author}}</td>
    </tr>
</table>

###（5）v-for 循环对象

<!-- 循环对象 第一个位置 值  第二个位置 key -->
<div v-for="(value, key) in person">
	  {{key}}: {{value}}
</div>
// data 中定义对象 
person: {
     // key  value(值)
     "username": "juran",
     "age": 18,
     "address": "csc"
 },

（5）代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- div#app   div id="app" -->
    <!-- div.app   div class="app" -->
    <!-- div*3  生成3个div --> 

    <!-- 条件判断 v-if v-else-if v-else -->
    <!-- <div id="app">
        <p v-if="weather == 'summer' ">今天去约女神</p>
        <p v-else-if="weather == 'rain'">今天在家打游戏</p>
        <p v-else>今天吃火锅</p>
    </div> -->

    <!-- 一个条件中加载多个html元素 template条件判断 if else-if else -->
    <!-- <div id="app">
        <template v-if="age < 18">
            <p>上网</p>
            <p>逃学</p>
        </template>
        <template v-else-if="age >= 18 && age<25">
            <p>找工作</p>
            <p>找女朋友</p>
        </template>
        <template v-else>
            <p>工资多少</p>
            <p>结婚</p>
        </template>
    </div> -->

    <!-- 输入框 placeholder 输入框提示的内容 -->
    <div id="app">
        <!-- 用户名  在这个 username 的标签加上 key 属性，可以实现条件下的重新渲染对应 key 属性的 html 元素 -->
        <template v-if="loginType=='username'">
            <label for="">用户名:</label>
            <input type="text" placeholder="用户名" key="username" >
        </template>  
        <!-- 邮箱 input key="email" -->
        <template v-else-if="loginType=='email'">
            <label for="">邮箱:</label>
            <input type="text" placeholder="邮箱" key="email">
        </template>  
        <!--button v-on:click 或者 @click 切换登陆方式 -->
        <!-- 属性 click 由 changeLoginType函数实现 -->
        <button v-on:click="changeLoginType">切换登录类型</button>

        <table>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>作者</th>
            </tr>

            <!-- tr 循环 v-for -->
            <!-- <tr v-for="book in books"> -->
                <!-- td 里面包裹变量{{}} -->
                <!-- <td>{{book.title}}</td> -->
                <!-- <td>{{book.author}}</td> -->
            <!-- </tr> -->
            <!-- 循环数组 第一个位置 数据  第二个位置 索引 -->
            <tr v-for="(book, index) in books">
                <td>{{index+1}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>
        </table>
        <!-- 循环对象 第一个位置 值  第二个位置 key -->
        <div v-for="(value, key) in person">
                {{key}}: {{value}}
        </div>
    </div>

</body>
</html>

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

<script>
    new Vue({
        el:"#app",
        data:{
            weather: "summer",
            age: 30,
            loginType: 'email',
            // book 数组 {} 是元素
            books:[
                {
                    'title': 'python',
                    'author': '龟叔'
                },
                {
                    'title': 'java',
                    'author': 'xxx1'
                },
                {
                    'title': 'PHP',
                    'author': 'xxx2'
                },
                {
                    'title': 'C++',
                    'author': 'xxx3'
                },
            ],
            // 对象
            person: {
                // key  value(值)
                "username": "juran",
                "age": 18,
                "address": "csc"
            },
        },
        methods:{
            changeLoginType:function(){
                // 使用三目运算 实现来回切换
                this.loginType = this.loginType=='username'?'email':'username'
            }
        }
    })
</script>

七、触发视图更新

（1）push()：添加元素的方法。

this.books.push("居然")

（2） pop()：删除数组最后一个元素。

this.books.pop()

（3） shift()：删除数组的第一个元素。

 this.books.shift()

（4） unshift(item)：在数组的开头位置添加一个元素。

this.books.unshift("居然")

（5）splice(index,howmany,item1,…,itemX)：向数组中添加或者删除或者替换元素。

 // 向books第0个位置添加元素
 this.books.splice(0,0,"金瓶梅")
 // 下标从0开始，删除2个元素
 this.books.splice(0,2)
 // 下标从0开始，替换2个元素
 this.books.splice(0,2,'金瓶梅','骆驼祥子')

（6）sort(function)：排序。

// 1
 this.books.sort(function(x,y){
     // 取两个随机数排序
     a = Math.random();
     b = Math.random();
     return a-b;
 });
 
 // 2
 methods:{
    changeBooks:function(){
        // 对books两两排序
        this.books.sort(function (a,b){
            // 根据返回值 对传入的两个参数排序 返回正数true  返回负数false 进行正序或是逆序的
            return Math.random() - 0.5
        })
    }
}

（7）reverse()：将数组元素进行反转。

 this.books.reverse();

八、Vue.set()

（1）修改数组中的某个值

this.books[0] = ‘Python’; 不会让页面发生数据更新

//方法一 Vue.set
Vue.set(this.books,0,'Python');
//方法二 splice

（2）动态的给对象添加属性

methods: {
    changePerson: function(event){
        Vue.set(this.person,'age',18)
    }
}

九、计算属性和监听器

（1）计算属性

一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。

区别于 method 计算属性更加智能，他是基于它们的响应式依赖进行缓存的。也就是说只要相关依赖（比如以上例子中的area）没有发生改变，那么这个计算属性的函数不会重新执行，而是直接返回之前的值。这个缓存功能让计算属性访问更加高效。

<p>{{count}}</p>
<!-- 加的按钮 v-on:click -->
<button v-on:click="count+=1">加</button>
<!-- 减的按钮 @click -->
<button @click="sub">减</button>

<script>
    new Vue({
    // 另外一种写法 sub(){}
        sub:function(){
            this.count -= 1
        }
    })
</script>

（2）计算属性和双向绑定 v-model

计算面积

//计算面积
<div id="app">
        <label>长</label>
        <!-- v-model 双向绑定，让data里面的 length 的数据发生变化 -->
        <!-- 简写：v-model:""  -->
        <input type="number" name="length" v-model:value="length">
        <label>宽</label>
        <!-- 如果不是 v-model 而是: 则 width 等值不会发生变化 -->
        <input type="number" name="width" v-model:value="width">
        <label>面积</label>
        <!-- 绑定 area 方法 是一个计算属性 -->
        <input type="number" readonly v-bind:value="area">
    </div>
	……
	……
	……
<script>
    new Vue({
        el: "#app",
        data:{
            // data 里面的数据根据 input 里 v-model 的值进行变化
            length:0,
            width:0
        },
        // 计算属性
        computed:{
            area:function(){
                return this.length*this.width
            }
        }
    })
</script>

分割、组合

<!-- 分割整体、组合成整体 -->
<div id="app">
        <div>
            <label>省：</label>
            <input type="text" name="province" v-model:value="province">
        </div>
        <div>
            <label>市：</label>
            <input type="text" name="city" v-model:value="city">
        </div>
        <div>
            <label>区：</label>
            <input type="text" name="dist" v-model:value="dist">
        </div>
        <div>
            <label>详细地址：</label>
            <input type="text" name="address" v-model:value="address">
        </div>
    </div>
	……
	……
	……
<script>
    new Vue({
        el: "#app",
        data:{
            // data 里面的数据根据 input 里 v-model 的值进行变化
            province:"",
            dist:"",
            city:"",


        },
        // 计算属性
        computed:{
            address:{
                // get 方法
                get:function(){
                    // 定义一个变量
                    var result = ""
                    if(this.province){
                        result = this.province + "省"
                    }
                    if(this.city){
                        result += this.city + "市"
                    }
                    if(this.dist){
                        result += this.dist + "区"
                    }
                    return result
                },
                set:function(value){
                    // 分割  split(/省|市|区/)
                    var result = value.split(/省|市|区/)
                    // 逻辑不够全
                    //if(result && result.length > 0){
                    //     this.province = result[0]
                    // }
                    // if(result && result.length > 1){
                    //     this.city = result[1]
                    // }
                    // if(result && result.length > 2){
                    //     this.dist = result[2]
                    // }
                }
            }
        }
    })
</script>

（3）监听器

监听搜索框输入的结果，并在短暂的延时之后再页面中显示

<div id="app">
	<label>搜索</label>
	<input type="text"  v-model:value="keyword">

	<p>结果</p>
	{{answer}}
</div>
	……
	……
	……
data:{
     // data 里面的数据根据 input 里 v-model 的值进行变化
     value:"",
     answer:"",
     keyword:"",
},
// 监听 监听到变化就会来执行监听函数 keyword 
// console 的打印是监听到立刻打印
// 定时器 setTimeout 获取一个新值之后进入延迟1000ms 1000ms内发生的数值变化不能够在页面显示出
watch:{
        keyword: function(newvalue,oldvalue){
            console.log(newvalue)
            console.log(oldvalue)
            this.answer = "加载中……"
            // 定时器
            setTimeout(() =>{
                this.answer = "搜索结果：" + newvalue
                // 1000是延时
            }, 1000);
        }
},