Vue.js简介
先来谈谈传统网页开发
- 传统开发的缺点：
1.DOM操作频繁，代码繁杂
2.DOM操作与逻辑代码混合，可维护性差
3.不同功能区域书写在一起，可维护性低
4.模块之间的依赖关系复杂
Vue.js应运而生
官网：
Vue.js核心特性
数据驱动视图
-
数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。
单向数据绑定
-
对于输入框等可输入元素，可设置双向数据绑定
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据， 实现数据与元素内容的双向绑定。
-
Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
-
MVVM (Model – View – ViewModel )是一种软件开发思想
- Model 层，代表数据
- View 层，代表视图模板
- ViewModel 层，代表业务逻辑处理代码
-
基于MVVM 模型实现的数据驱动视图解放了DOM操作
-
View 与 Model 处理分离，降低代码耦合度
-
但双向绑定时的 Bug 调试难度增大 （有可能出现在视图或者数据层）
-
大型项目的 View 与 Model 过多，维护成本高
组件化开发
- 组件化开发，允许我们将网页功能封装为自定义HTML标签，复用时书写自定义标签名即可
- 组件不仅可以封装结构，还可以封装样式和逻辑代码，大大提高了开发效率和可维护性
Vue.js安装
本地引入
下载引用：
- 开发版本
- 生产版本
cdn引入
script标签内部引入
- 最新稳定版：
- 指定版本:
npm安装
- 最新稳定版
npm install vue
- 指定版本
npm install vue@2.6.12
Vue.js基础语法
Vue实例
- Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础。
var vm = new Vue({
//选项对象
});
el选项
- 用于选取一个 DOM 元素作为 Vue 实例的挂载目标
- 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素
- 代表 MVVM 中的 View 层（视图）
- 可以为 CSS 选择器格式的字符串或HTMLElement 实例，但不能为html 或 body
只能有一个DOM元素
-
挂载完毕后，可以通过vm.$el访问
-
未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。
也支持变量的方式
插值表达式
- 挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}
- 注意点：
- 插值表达式只能书写在标签内容区域，不可以和其他内容混合在一起
比如说不能通过插值表达式进行元素属性的混合设置 -
内部只能书写JS表达式，不能书写JS语句
- 插值表达式只能书写在标签内容区域，不可以和其他内容混合在一起
违反两个注意点就会报出模板编辑错误的提示
data选项
-
用于存储Vue实例需要使用的数据，值为对象类型
-
data 中的数据可以通过 vm.$data.数据或 vm.数据 访问。
- 特点：
- data中的数据是直接可以在视图中通过插值表达式访问
-
data的数据为响应式数据，发生改变时，视图会自动更新
- 特殊情况：
- data中存在数组时，索引操作和length操作无法自动更新视图，可以通过Vue.set()方法替代操作
数组的方法是可以生效的，并且实时更新视图，比如pop()，push()
Vue.set()方法有三个参数，分别是数组，索引，新内容，用这个办法可以代替操作，以实时更新视图
- data中存在数组时，索引操作和length操作无法自动更新视图，可以通过Vue.set()方法替代操作
methods选项
-
用于存储需要在Vue实例中使用的函数
- methods的方法可以通过vm.方法名 访问
-
方法中的this为vm实例，可以便捷的访问vm数据等功能
Vue.js指令
指令的本质就是HTML自定义属性
Vue.js的指令就是以v-开头的自定义属性
内容处理
v-once指令
-
使元素内部的插值表达式只生效一次（不随数据变化更新）
v-text指令
- 元素内容整体替换为指定纯文本数据
<body>
<div id="app">
<p v-text="100">这是 p 标签的原始内容</p>
<p v-text="content">这是 p 标签的原始内容</p>
<p v-text="content2"></p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
content: '内容文本',
content2: '<span>span的内容</span>'
}
});
</script>
</body>
显示结果
v-html指令
- 将元素内容整体替换为指定的HTML文本
与v-text的区别就在于可以替换为HTML文本，运行HTML代码
属性绑定
v-bind
-
v-bind 指令用于动态绑定 HTML 属性。
-
v-bind简写方式：
- v-bind也可以使用表达式，与插值表达式类似
插件表达式和v-bind都不能插入语句
这一类就不行
-
还可以一次绑定多个属性，通过绑定对象的方式实现
注意不用冒号，而是等号了
Class绑定
-
class是HTML属性，可以通过v-bind绑定，并且可以和class属性共存
错误写法
有两个类名，一个x一个a，但是a是固定的，cls会动态变化
- 对于 class 绑定， Vue.js 中还提供了特殊处理方式
-
对象绑定
例子
-
数组绑定
大括号内部才是动态表示区域
-
例子
Style绑定
-
style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存
-
当我们希望给元素绑定多个样式对象时，可以设置为数组。
渲染指令
v-for指令
-
用于遍历数据渲染结构，常用的数组与对象均可遍历
index为数组下的索引值
index为对象下的索引值，key为数据的键值
-
除了遍历数组和对象，还可以对值进行遍历
运行结果
v-for注意点
-
使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题。
<body>
<div id="app">
<ul>
<li v-for="(item, index) in itemList" :key="item.id">
输入框{{ item.value }}: <input type="text">
</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3],
itemList: [
{
id: 1,
value: 2
},
{
id: 2,
value:3
},
{
id:3,
value:3
}
]
}
})
</script>
</body>
- 通过<template>标签设置模板占位符。可以将部分元素或者内容作为整体进行操作
template标签并不是真正的标签，生成的结构直接是内部的标签
template并不是一个真实的元素，所以没法设置key属性
<div id="app">
<template v-for="item in obj">
<span>{{ item }}</span>
<br>
</template>
</div>
结果
v-show 指令
- 用于控制元素显示与隐藏，适用于显示隐藏频繁切换的时候使用
v-show内部的数据也可以通过data设置达到控制的效果
也可以通过条件表达式来控制
<p v-show="false">标签内容</p>
<p v-show="22 > 11">标签内容</p>
- 注意：
- <template>无法使用v-show指令（原因：template不是真正意义上的元素）
- v-show的本质就是元素内部的display属性是否为true
v-if指令
-
用于根据条件，控制元素的创建与移除
<body>
<div id="app">
<p v-if="bool">这是标签内容</p>
<p v-else-if="false">这是第二个p标签</p>
<p v-else-if="false">这是第三个p标签</p>
<p v-else>最后一个p标签</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: false
}
});
</script>
</body>
v-if 与 v-show的区别就在于show是创建了元素，if是符合条件才创建
v-if 和v-else-if这种组合只要有一个满足条件就会跳出，后面的不会再创建，跟JavaScript的if原理相同
- 注意事项
- 给使用v-if的同类型元素绑定不同的key
<body>
<div id="app">
<div v-if="type==='username'" :key="'username'">
用户名输入框：<input type="text">
</div>
<div v-else :key="'email'">
邮箱输入框：<input type="text">
</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: true,
type: 'username'
}
});
</script>
</body>
- 出于性能考虑，应该避免v-if和v-for应用于同一个标签
更好的解决办法：将v-if和v-for分开，比如将v-if放在父元素上
<body>
<div id="app">
<ul v-if="true">
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
items: {
content1: '内容1',
content2: '内容2',
content3: '内容3'
}
}
});
</script>
</body>
网友评论