掌握Vue：前端开发新趋势与实战指南-优快云博客

本文概述了前端现状，重点讲解Vue框架的原理、用途、特点和关键API，包括数据驱动视图、指令用法、安装方式和常见指令如v-for、v-if等，以及表格案例，助你快速上手Vue开发。

现在的前端现状

开发人员大部分在用Vue开发
Vue学习曲线相比其他框架简单很多

了解什么是vue

目前前端必备技能
传统方式已经不能适应目前越来越复杂的开发需求
用vue的开发方式会简单、高效三大框架(vue、react、angular)

vue 能做什么

不用操作DOM
单页面应用web项目(SinglePageApplication 项目，例如https://worktile.com/）简称:SPA
传统网站开发一般来说需求不大
当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程序/MpVue…

结论: 掌握Vue的开发语法相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境

vue 特点

数据驱动视图可以让我们只关注数据
MVVM 双向绑定
通过指令增强了html功能
组件化复用代码
开发者一般只需要关注数据

Vue-API

Vue官方文档
 Vue开源项目汇总
 Vue.js中文社区

所有关于Vue的问题都可以通过查阅文档解决

vue 三种安装方式

直接下载源码然后通过路径引入
- 开发版本：https://vuejs.org/js/vue.js
- 生产版本：https://vuejs.org/js/vue.min.js
在线cdn引入的方式

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

采用 npm 安装的方式

// 现状: 都会采用npm的方式来进行正式项目开发 
npm install vue

注意: Vue.js 不支持 IE8 及其以下版本

HelloWorld

步骤 :

body中,设置Vue管理的视图
引入vue.js
实例化Vue对象new Vue();
设置Vue实例的选项:如el、data…
new Vue({选项:值});
在 div 中通过{{ }}使用data中的数据

	<!-- 1. 提供容器 -->
    <div class="app">
        <input type="text" v-model="str">
        <p>{{str}}</p>
    </div>
    <!-- 2.引入 -->
    <script src="./vue.js"></script>
    <script>
        // 3. 模拟数据
        let data = 'abc'
        let vm = new Vue({
            // 4. 设置Vue的选项
            el: '.app',
            data: {
                str: data
            }
        })
    </script>

实例选项-el

作用:当前Vue实例所管理的html视图
值:通常是id选择器(或者是一个dom对象)
**注意！！！！**不要让el所管理的视图是html或者body!!!

路径:

new Vue({
	//el: '#app' , id选择器
	// el: '.app', class选择器
	el: document.getElementById("#app") // dom对象
})

实例选项-data

掌握data基本用法

Vue 实例的data(数据对象)，是响应式数据(数据驱动视图)

data中的值{数据名字:数据的初始值}
data中的数据msg/count 可以在视图中通过{{msg/count}}访问数据
data中的数据也可以通过实例访问 vm.msg或者vm.$data.msg
data中的数据特点:响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

路径

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '铁蛋儿',
            count: 100,
            list: [1, 2, 3]
        }
    })
    vm.count = 200
    vm.list.push(4)
    console.log(vm)
    console.log(vm.msg)
    console.log(vm.$data.msg)
</script>

实例选项-methods

掌握实例选项methods中方法的使用及注意事项

methods其值为一个对象
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用
方法中的 this 自动绑定为 Vue 实例。
methods中所有的方法同样也被代理到了 Vue实例对象上,都可通过this访问
注意，不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例

let vm =new Vue({
	el:"#app",
	data:{
		name:"Hello world",
		name2:"Hello world2"
	},
	methods:{
		// 常规函数写法
		fn1:function(){
			console.log(this.name)
			this.fn2()
		},
		// es6 函数简写法
		fn2() {
			console.log(this.name2)
		}
	},
})

术语解释-插值表达式(重要)

理解和使用插值表达式

作用:会将绑定的数据实时的显示出来
形式: 通过 {{ 插值表达式 }} 包裹的形式
用法:{{js表达式、三元运算符、方法调用等}}

用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{1+2+3}}</p>
        <p>{{1>2}}</p>
        <p>{{name+'很帅'}}</p>
        <p>{{count+1}}</p>
        <p>{{count === 1?"成立":"不成立"}}</p>
        <p>{{list}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                name: '铁蛋儿',
                count: 1,
                list: [1, 2, 3].reverse()
            }
        })
    </script>
</body>

</html>

注意：

// 错误写法
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

<!-- 方法调用 -->
<!-- fn为methods中的方法 -->
<p>{{ fn() }}</p>

术语解释-指令(重要)

指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式( v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令位置: 起始标签

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-text="msg">我是小白龙 {{我是铁蛋儿}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '我是铁蛋儿'
            }
        })
    </script>
</body>

</html>

系统指令-v-text和v-html

很像innerText和innerHTML
v-text:更新标签中的内容
v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
可以渲染内容中的html标签
注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-html="msg">我是小白龙 {{我是铁蛋儿}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<h1>铁蛋儿很帅</h1>'
            }
        })
    </script>
</body>

</html>

系统指令-v-if 和 v-show

使用: v-if 和 v-show 后面跟着表达式的值是布尔值，布尔值来决定该元素显示隐藏

注意 : v-if 是直接决定元素的添加或者删除而 v-show 只是根据样式来决定显示隐藏

v-if 有更高的切换开销
v-show 有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好。
如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-if="isShow">我是小白龙</p>
        <p v-show="isShow">我是铁蛋儿</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        })
    </script>
</body>

</html>

系统指令-v-on绑定事件

使用:

第一种:v-on:事件名=“方法名”
第二种:@事件名="方法名"的方式

// v-on:xx事件名='当触发xx事件时执行的语句'
<button v-on:click="fn">按钮</button>
// v-on的简写方法
<button @click="fn">按钮</button>

修饰符

使用:@事件名.修饰符=“方法名”
.once - 只触发一次回调
.prevent - 调用 event.preventDefault() 阻止默认事件

// v-on修饰符 如 once: 只执行一次
<button @click.once="fn">只执行一次</button>
// v-on修饰符 如 prevent: 阻止默认事件
<button @contextmenu.prevent="fn">阻止默认事件</button>

事件对象(扩展)

第一种:方法名中采用$event的方式传形参
第二种:直接写事件名 默认第一个参数为event事件参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="add">增加</button>
        <button @click="add">增加</button>
        <button @click.once="add">增加</button>
        <button @contextmenu.prevent="add">增加</button>
        <button @click="add($event)">事件对象</button>
        <button @click="add1">事件对象</button>
        <p>{{count}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                add(e) {
                    console.log(e)
                    this.count += 1
                },
                add1(e) {
                    console.log(e)
                }
            }
        })
    </script>
</body>

</html>

系统指令-v-for(数组)

v-for 指令基于一个数组来渲染一个列表
v-for 语法 item in items 或者 item of items
其中 items 是源数据数组而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-for="item in list">{{item}}</p>
        <p v-for="(item,index) in list" :key="index">{{item}}---{{index}}</p>
        <p v-for="item in json">{{item}}</p>
        <p v-for="(item,key) in json">{{item}}--{{key}}</p>
        <p v-for="(item,key,index) in json">{{item}}--{{key}}--{{index}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ['a', 'b', 'c'],
                json: {
                    name: '铁蛋儿',
                    age: 18
                }
            }
        })
    </script>
</body>

</html>

注意： v-for写的位置应该是重复的标签上不是其父级元素上需要注意

系统指令-v-for（对象）

第一种用法:

// items 为对象 item为当前遍历属性对象的值
v-for="item in items"

第二种用法:

//item为当前遍历属性对象的值 key为当前属性名 index为当前索引的值
v-for="(item, key, index) in items"

系统指令-v-for（key属性）（非常重要的面试题）

场景: 列表数据变动会导致视图列表重新更新为了提升性能方便更新需要提供一个属性 key

// 使用v-for时 建议给每个元素设置一个key属性 （必须加上）
// key属性的值 要求是每个元素的唯一值 （唯一索引值）
// 好处:vue渲染页面标签 速度快

// 数组
<li v-for="(v,i) in arr" :key="i">{{v}}</li>
// 对象
<li v-for="(v,k,i) in json" :key="i">{{v}}-{{k}}</li>

表格案例

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            品牌名称:
            <input type="text" v-model="name">
            <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
        </div>

        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>
                        <a href="#" @click.prevent="deleItem(index)">删除</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        /* 
        1. 静态页面 准备
        2. 实例化一个Vue
        3. 定义表格数据
        4. 采用v-for 循环将静态内容切换为动态内容
        5. 采用v-if控制提示消息
        */
        // 准备数据
        new Vue({
            el: '#app',
            data: {
                // 模拟ajax的数据
                list: [{
                    name: '大娃',
                    date: new Date()
                }, {
                    name: '二娃',
                    date: new Date()
                }, {
                    name: '三娃',
                    date: new Date()
                }],
                // 我要添加的数据
                name: ''
            },
            methods: {
                // 添加
                addItem() {
                    this.list.unshift({
                        name: this.name,
                        date: new Date()
                    })
                    this.name = ''
                },
                // 删除
                deleItem(index) {
                    if (confirm('是否删除')) {
                        this.list.splice(index, 1)
                    }
                }
            }
        })
    </script>
</body>

</html>