Vue.js 相关知识（第一部分）

程序员文章站 2022-03-18 16:49:32

1. Vue.js 介绍 Vue，读音 /vjuː/，类似于 view)，是一套用于构建用户界面的渐进式框架（重点在于视图层）。作者：尤雨溪注：学习 vue.js 时，一定要抛弃 jQuery 的思想（jQuery的特点在于强大的选择器、dom操作，而vue.js 的特点在于数据驱动来实现数据和 ......

1. Vue.js 介绍

Vue，读音 /vjuː/，类似于 view)，是一套用于构建用户界面的渐进式框架（重点在于视图层）。

作者：尤雨溪

注：学习 vue.js 时，一定要抛弃 jQuery 的思想（jQuery的特点在于强大的选择器、dom操作，而vue.js 的特点在于数据驱动来实现数据和显示相分离）

特点：
- 数据驱动，数据（模型层）、视图层的分离
- 双向数据绑定：MVVM
  - Model变化，View视图也跟着变化
  - View视图变化，Model模型也跟着变化
- SPA（Single Page Application）单页面应用
  - 传统网页：通过a标签的href属性实现页面跳转，每次跳转都会发送一个新的http请求，因为PC端的处理器较强大，没有问题，但在移动端会出现卡顿现象
  - SPA：将所有网页封装到一个 html 文件的不同 div（template模板）里面，每个网页对应一个 div（template），通过 div 显示、隐藏达到页面跳转的效果
- 组件化、模块化
  - 目的是提升代码的复用性。如，订餐系统中的数量加减操作、轮播图等可能在多个地方都使用，就可将该功能设计成一个组件

2. Vue.js 语法

2.1 实例化Vue对象

接收一个对象作为参数，主要用来配置Vue

let app = new Vue({})

2.2 Vue配置项

el：需挂载到Vue中的标签，使用Vue进行管理（通常将根元素挂着到Vue）

data：定义数据项，在此定义所有数据

2.3 数据渲染（插值）

将 data 中的数据项内容渲染到视图层

语法：{{数据项名称}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
　　<div id="app">
　　　　<h1>{{fruit}}</h1>
　　</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　//挂载到Vue 中的标签        
　　　　el:'#app',
　　　　//定义数据项
　　　　data:{
　　　　　　fruit:'西瓜'
　　　　}
　　})
</script>
</body>
</html>

2.4 指令

指令：旧时公文的一种，上级对下级的批示。计算机领域，指一段代码，即告诉计算机从事某一运算
Vue 中指令（Directives）：写在 html 标签上的带有 v- 前缀的特殊属性。
职责：当其表达式的值改变时相应地将某些行为应用到 DOM 上

2.4.1 数据绑定指令

v-text，将数据项绑定到标签上，作用类似于{{数据项}}
v-html，将数据项绑定到标签上，作用类似于{{数据项}}

<div id="app">
    <h1 v-text="fruit"></h1>
    <h1 v-html="fruit"></h1>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            fruit:'草莓'
        }
    })
</script>

注：两者区别：v-html 可解析数据项中的html标签，v-text 原封不动输出

v-model，通常是将输入框的值绑定到一个变量上，实现双向数据绑定

<div id="app">
    <h1 v-text="fruit"></h1>
    <h1 v-html="fruit"></h1>
    <input type="" name="" v-model="inputValue">
    {{inputValue}}
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            fruit:'<em>香蕉</em>',
            inputValue:''
        }
    })
</script>

注：需在data里定义变量名

2.4.2 属性指令

属性指令：将数据项绑定到属性上，如：img 的 src属性、a 标签的 href 、class、style属性等

语法：v-bind:属性名=”变量名”，通常会省略v-bind，简写为：:src、:href、:class、:style

<div id="app">
    <a v-bind:href="myhref">百度一下</a>
    <a :href="myhref">百度一下</a>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            myhref:"http://www.baidu.com"
        }
    })
</script>

:class语法
- <标签 :class=”{类名:T|F,类名:T|F}”，如果值为true，表示给这个元素加上该类名
- <标签 :class=“[‘类名1’,’类名2’]”，同时拥有多个类名

<div id="app">
    <p :class="{green:true}">{{content}}</p>
    <p :class="{green:false}">{{content}}</p>
    <p :class="['green','fs-40']">{{content}}</p>
    <p :class="active ? 'green' : 'red'">{{content}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            content:"我是段落",
            active:false
        }
    })
</script>

Vue.js 相关知识（第一部分）

:style 语法：（:style的值可以是一个对象，设置多个样式）

<div id="app">
    <p :style="info">{{content}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            content:"我是段落",
            info:{background:"blue",color:"white"}
        }
    })
</script>

2.4.3 条件指令

v-if v-else-if v-else，根据条件确定是否创建该 DOM 节点

<div id="app">
    <p v-if="money>5000">土豪</p>
    <p v-else-if="money>3000">小康</p>
    <p v-else>穷鬼</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            money:6000
        }
    })
</script>

v-show：根据条件控制该节点的显示、隐藏，控制 display 属性

<div id="app">
    <p v-show="isshow">折叠菜单</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            isshow:true
        }
    })
</script>

2.4.4 循环指令

v-for 循环指令，用来遍历数组、对象等多个数据

语法：v-for=”(value, key) in 数组|对象”

注：每遍历一条记录，会将值赋给 value，将下标（属性名）赋值给 key

<div id="app">
    <ul>
        <li v-for="(item,index) in fruits">
            {{item}}---{{index}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in person">
            {{index}}:{{item}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            fruits:['橘子','苹果','西瓜'],
            person:{name:'David',age:20,hobby:'swim'}
        }
    })
</script>

例：选项卡效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>    
</head>
<body>
<div id="app">
    <div class="tabLink">
        <span>html</span>
        <span>css</span>
        <span>js</span>
    </div>
    <div class="tabBody">
        <div v-show="currentTab === 'html'">html选项卡的内容</div>
        <div v-show="currentTab === 'css'">css选项卡的内容</div>
        <div v-show="currentTab === 'js'">js选项卡的内容</div>
    </div>        
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',//定义数据项
        data:{    
            currentTab:'html'//默认让第一个div显示
        }
    })
    let spans = document.querySelectorAll(".tabLink span");//querySelectoryAll查找.tabLink 后面的所有span标签
    spans.forEach((element)=>{//遍历span节点    
        element.addEventListener("click", function(){//给每个span标签绑定click事件
            app.currentTab = element.innerText//将当前span标签的内容赋值给currentTab变量
        }, false)
    })
</script>
</body>
</html>

2.5 Vue 实例方法

保存逻辑代码，将来可像函数一样调用

语法：methods:{方法名:function(){}} 或简化为：methods:{方法名(){}}

<div id="app">
   {{f1()}}---{{f2()}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            
        },
        methods:{
            f1:function(){
                console.log("f1")
            },
            f2(){
                console.log("f2")
            }
        }
    })
</script>

Vue.js 相关知识（第一部分）

2.6 计算属性 computed

若模板中使用的变量（表达式）过多，会导致模板过重，不便于维护、管理，因此，可将代码写在计算属性中

语法：computed:{方法名:function(){}} 或简写为： computed:{方法名(){}}

<div id="app">
   {{computedAge}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            age:19
        },
        computed:{
            computedAge(){
                return this.age >18 ?'成年人':'未成年'
            }
        }
    })
</script>

注：计算属性与实例方法的区别

计算属性有缓存，而实例方法无缓存，建议使用计算属性
使用计算属性时，{{计算属性名}}，使用实例方法时，{{方法名()}}

2.7 过滤器 filters

将数据被渲染到视图前进行格式化处理，而不会修改作用域中原有的数据

语法：

定义过滤器：filters:{过滤器1:function(参数1,参数2…){} 或简写为 filters:{过滤器1 (参数1,参数2…){}}

注：定义过滤器时，必须声明参数，且参数1固定，指要操作的数据，剩余参数是调用过滤器时传递进来的

使用过滤器：{{变量名 | 过滤器1 | 过滤器2….}}

<div id="app">
   {{avg|fix(1)}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            avg:98.1578
        },
        filters:{
            //参数1：操作的数据
            //参数2：调用过滤器时所传参数
            fix(d,n){
                return d.toFixed(n)
            }
        }
    })
</script>

过滤器组合使用

<div id="app">
   {{avg|fix(1)|insertBefore}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            avg:98.1578
        },
        filters:{            
            fix(d,n){
                return d.toFixed(n)
            },
            insertBefore(d){
                return '$'+d;
            }
        }
    })
</script>

3. Vue.js 事件处理

3.1 事件介绍

事件，指用户和网页交互的行为，包括：鼠标单击、鼠标双击、键盘按下、键盘抬起等

事件由3个部分组成：事件源、事件类型、事件处理程序

先监听事件，当事件发生时，做出相应处理

3.2 Vue.js 中事件监听

语法：v-on:事件类型=”事件处理函数” 或简写为：@事件类型=”事件处理函数”

<div id="app">
        <button v-on:click="btnClick">按钮</button>
        <button @click="btnClick">按钮</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            methods:{
                btnClick(){
                    alert("单击事件");
                }
            }            
        })
    </script>

3.3 事件类型

属性事件：click、dblclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove
键盘事件：keydown、keyup、keypress
ui事件：scroll、resize、load、unload
表单事件：focus、blur、select、change、submit

3.4 事件处理函数的位置

若代码较少，将事件处理代码直接写到行内

<div id="app">
       <h1>
           标题<span @click="isshow=!isshow">{{isshow ? '隐藏' : '展示'}}</span>
       </h1>
       <div v-show="isshow">这是折叠菜单内容</div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{    
            isshow:true
        }
    })
</script>

若代码较多，将事件处理程序写在 methods 的方法中

<div id="app">
　　<h3>标题
　　　　<span @click="collapse">{{isshow ? '隐藏' : '展开'}}</span>
　　</h3>
　　<div v-show="isshow">这是折叠菜单的内容</div>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",
　　　　data:{
　　　　　　isshow:true
　　　　},
　　　　methods:{
　　　　　　collapse(){
　　　　　　　　this.isshow ? this.isshow = false : this.isshow = true;
　　　　　　}
　　　　}
　　})
</script>

3.5 事件对象

获取当事件发生时，事件源的一些信息（状态）。在Vue中当事件发生时，会自动给事件处理函数传递一个$event事件对象，无需手动传递，接收即可

<div id="app">
       <div style="width: 200px;height: 200px;background: red" @mousemove="move"></div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        methods:{
            move(event){
                console.log(event)
            }
        }
    })
</script>

3.6 事件修饰符

在原生JavaScript中，通过 event.preventDefault 阻止默认行为，如：enter键表示回车换行

<div id="app">
    <p v-html="message"></p>
    <textarea rows="5" cols="30" @keydown="postMessage"></textarea>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            message:""
        },
        methods:{
            postMessage(ev){
                //事件对象的keyCode属性获取按键
                if(ev.keyCode == 13){
                    //按下的是enter键，将输入框中的内容显示到p标签，target属性指事件源，即textarea标签
                    this.message = ev.target.value + "<br>";
                    ev.target.value = ''
                    //通过事件对象的preventDefault方法阻止enter键的回车换行默认行为
                    ev.preventDefault();
                }
            }
        }
    })
</script>

.prevent，阻止默认行为

例：enter 键阻止回车换行

<div id="app">
    <p v-html="message"></p>
    <textarea rows="5" cols="30" @keydown.prevent="postMessage"></textarea>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',
        data:{
            message:""
        },
        methods:{
            postMessage(ev){
                if(ev.keyCode == 13){
                    this.message = ev.target.value + "<br>";
                    ev.target.value = ''
                }
            }
        }
    })
</script>

.stop，阻止事件冒泡
- 事件冒泡，执行完子元素的事件后，执行父元素的事件

<div id="app">
　　<div style="width: 200px;height: 200px;background: red;" @click="divClick">
　　　　<button @click="btnClick">按钮</button>
　　</div>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",
　　　　methods:{
　　　　　　divClick(){
　　　　　　　　console.log('divClick')
　　　　　　},
　　　　　　btnClick(){
　　　　　　　　console.log('btnClick')
　　　　　　}
　　　　}
　　})
</script>

点击按钮后，控制台打印如下：

Vue.js 相关知识（第一部分）

- 阻止冒泡，阻止子元素向上查找父元素的事件

<div id="app">
　　<div style="width: 200px;height: 200px;background: red;" @click="divClick">
　　　　<button @click.stop="btnClick">按钮</button>
　　</div>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",　　　
　　　　methods:{
　　　　　　divClick(){
　　　　　　　　console.log('divClick')
　　　　　　},
　　　　　　btnClick(){
　　　　　　　　console.log('btnClick')
　　　　　　}
　　　　}
　　})
</script>

点击按钮后，控制台打印如下：（已阻止了父元素上的事件）

Vue.js 相关知识（第一部分）

.capture：冒泡改为捕获（默认是冒泡，捕获指先执行父元素，再执行自己）

<div id="app">
　　<div style="width: 200px;height: 200px;background: red;" @click.capture="divClick">
　　　　<button @click.capture="btnClick">按钮</button>
　　</div>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",
　　　　methods:{
　　　　　　divClick(){
　　　　　　　　console.log('divClick')
　　　　　　},
　　　　　　btnClick(){
　　　　　　　　console.log('btnClick')
　　　　　　}
　　　　}
　　})
</script>

点击按钮后，控制台打印如下：

Vue.js 相关知识（第一部分）

.self ：只处理自己身上的事件，不理会冒泡或捕获

<div id="app">
　　<div style="width: 200px;height: 200px;background: red;" @click.self="divClick">
　　　　<button @click.capture="btnClick">按钮</button>
　　</div>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",　
　　　　methods:{
　　　　　　divClick(){
　　　　　　　　console.log('divClick')
　　　　　　},
　　　　　　btnClick(){
　　　　　　　　console.log('btnClick')
　　　　　　}
　　　　}
　　})
</script>

点击按钮后，控制台打印如下：

Vue.js 相关知识（第一部分）

.once：一次性事件，只执行一次

<div id="app">
    <button @click.once="btnClick">按钮</button>
</div>
<script type="text/javascript">
　　let app = new Vue({
　　　　el:"#app",
　　　　methods:{
　　　　　　btnClick(){
　　　　　　　　console.log('btnClick')
　　　　　　}
　　　　}
　　})
</script>

点击（多次）按钮后，控制台打印如下：

Vue.js 相关知识（第一部分）

3.7 表单的处理

Vue 处理表单数据时，通过v-model实现双向数据绑定，v-mode会同时监视表单输入、模型数据的更新，若表单内容改变，模型中的变量随之变化，反亦相同

输入框：v-mode 将输入框的内容赋值给变量，同，变量内容改变，输入框的内容随之改变（例子）
单选框：同理，模型数据改变时，视图层随之改变

<div id="app">
    性别：<input type="radio" name="sex" value="male" v-model="sex">男
    <input type="radio" name="sex" value="female" v-model="sex">女
    <p>性别为：{{sex}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            sex:''
        }
　　    })
</script>

复选框

注：由于复选框有多个选择，因此，常用数组来表示复选框的内容

<div id="app">
    爱好：<input type="checkbox" name="hobby" value="swim" v-model="hobby">swim
    <input type="checkbox" name="hobby" value="climb" v-model="hobby">climb
    <input type="checkbox" name="hobby" value="dance" v-model="hobby">dance
    <p>爱好为：{{hobby}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            hobby:[]
        }
　　    })
</script>

下拉列表

注：v-model 监视 select标签，获取 option选项的value值，同理，v-model 的变量值改变了，select下拉列表的内容随之改变

<div id="app">
    <select v-model="country">
        <option value="China">中国</option>
        <option value="USA">美国</option>
    </select>
    <p>国家：{{country}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            country:''
        }
　　    })
</script>

3.8 v-model 修饰符

语法：v-model.修饰符=”变量”

修饰符：lazy，文本框失去焦点后再去更新数据

　　　　number，从字符串中获取数字部分

　　　　trim，删除文本框中的前后空格

<div id="app">
    姓名：<input v-model.lazy.trim="name" type="text" name=""><br/>
    年龄：<input v-model.number="age" type="text" name="">
    <p>姓名为：{{name}}<br/>年龄为：{{age}}</p>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            name:'',
            age:''
        }
　　    })
</script>

Vue.js 相关知识（第一部分）

例：省市联动

city-data.js

    <div id="app">
        省：
        <select v-model="currentP">
            <option v-for="(item,index) in getP">{{item}}</option>
        </select>
        市：
        <select v-model="currentC">
            <option v-for="item in getC">{{item}}</option>
        </select>    
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            //定义数据项
            data:{
                city:cityInfo,
                currentP:'-请选择-',
                currentC:'请选择'
            },
            //定义计算属性
            computed:{
                //获取所有省份、直辖市，并在option 中循环
                getP(){
                    //用function 匿名函数作用于this.city数组的每个元素，同时将每个元素传入该匿名函数中
                    var provinces = this.city.map(function(item){
                        return item.name
                    })
                    //在数组开头添加一个元素
                    provinces.unshift('-请选择-')
                    console.log(provinces)
                    return provinces
                },
                //根据当前省份（currentP变量）获取城市
                getC(){
                    //根据当前城市，获取sub部分
                    var citys = []
                    var provinces = this.city.find((item)=>{
                        return item.name == this.currentP
                    })
                    if(provinces && provinces.sub){
                        //遍历当前省份的市区
                        citys = provinces.sub.map(function(item){
                            return item.name
                        })
                        return citys;
                    }
                    console.log(provinces)
                }
            }
        })        
    </script>

上一篇： koa2 mongdb 做后端接口的小demo

下一篇： PHP生成腾讯云COS请求签名

Vue.js 相关知识（第一部分）

1. Vue.js 介绍

2. Vue.js 语法

2.1 实例化Vue对象

2.2 Vue配置项

2.3 数据渲染（插值）

2.4 指令

2.4.1 数据绑定指令

2.4.2 属性指令

2.4.3 条件指令

2.4.4 循环指令

2.5 Vue 实例方法

2.6 计算属性 computed

2.7 过滤器 filters

3. Vue.js 事件处理

3.1 事件介绍

3.2 Vue.js 中事件监听

3.3 事件类型

3.4 事件处理函数的位置

3.5 事件对象

3.6 事件修饰符

3.7 表单的处理

3.8 v-model 修饰符

深度了解vue.js中hooks的相关知识

Vue.js 相关知识（脚手架）

《Java并发编程实战》总结 - 第一部分基础知识

Vue.js 相关知识（路由）

Vue.js 相关知识（动画）