文章目录
VUE 简明教程
一、Vue 简介
vue 不用操作 dom （nice）；单页面应用 web 项目用 vue 开发十分方便（比如现在火热的 Saas 应用，xx管理系统用 vue 编写也是十分爽的）
vue 是数据驱动视图的，可以让我们只关注数据；MVVM 双向绑定，让我们可以逃离 JQuery；使用组件化，增强代码复用
虽然 vue 3 已经推出了，但是现在大部分项目使用的还是 vue2，所以本教程还是会以 vue 2为主
二、vue 三种安装方式
1、直接下载源码，然后通过路径引入
2、在线 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
3、npm 安装
npm install vue
三、快速开始
我们来写一个 小型的 vue 项目，展示一下 Vue 项目的基础结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- vue 所管理的视图 div #app -->
<div id="app">
<!-- input 中进行数据绑定 -->
<input type="text" v-model="str">
<!-- p 标签中会动态展示 -->
<p>{
{str}}</p>
</div>
</body>
<!-- 引入 vue -->
<script src="js/vue.js"></script>
<script>
let data ='faroz';
let vm = new Vue({
设置 vue 的实例选项，一般都是使用 id 选择器的
el: '#app',
data: {
str: data
}
});
</script>
</html>
最后实现的，是一个会跟着输入框内容动态改变的 <p> 标签显示
四、实例选项
1、el
- **作用：**当前Vue实例所管理的html视图
- **值：**通常是id选择器(或者是一个dom对象)
- **注意：**不要让el所管理的视图是html或者body!!!
2、data
Vue 实例的data(数据对象)，是响应式数据(数据驱动视图)
1、data中的值{数据名字:数据的初始值}
2、data中的数据msg/count 可以在视图中通过{ {msg/count}}访问数据
3、data中的数据也可以通过实例访问 vm.msg或者 vm.$data.msg
4、data中的数据特点:响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化
3、methods
- 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
- 方法中的 this 自动绑定为 Vue 实例。（不要使用箭头函数！！！）
- methods中所有的方法 同样也被代理到了 Vue实例对象上,都可通过this访问
- 注意，不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例
五、术语解释
1、插值表达式
2、指令
- 指令 (Directives) 是带有 v- 前缀的特殊特性。
- 指令特性的值预期是单个 JavaScript 表达式( v-for 是例外情况，稍后我们再讨论)。
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- 指令位置: 起始标签
示例：
<p v-text="name">faro_z</p>
后面我们会系统的讲解 vue 中的所有指令的
六、系统指令
1、v-text 和 v-html
v-text：替换标签内容
v-html：替换标签（尽量别用，会引发 xss 跨站脚本攻击）
2、v-if 和 v-show
v-if：删除 dom 元素
v-show：隐藏元素
3、v-on绑定事件
有两种写法：
第一种：v-on:事件名=“方法名”
第二种：@事件名="方法名"的方式
1）基本使用
2）修饰符
使用:@事件名.修饰符=“方法名”
- once - 只触发一次回调
- prevent - 调用 event.preventDefault() 阻止默认事件
3）事件对象
我们是可以获取触发的事件的对象的
4、v-for
1）数组
- item：数组中的元素
- Index：数组中元素的下标
2）对象
3）key 属性
这个 key ，必须是被遍历元素的唯一索引
使用 key 属性，虽然在小项目中我们看不出区别，但是能让页面的渲染速度更快
建议每个 v-for 循环，都加上 key 属性
5、v-bind（动态修改标签属性）
v-bind 也可以缩写为 ":"，即一个冒号
作用： 绑定标签上的任何属性
最低0.47元/天 解锁文章
7587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
