Vue提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。
注意:当前Vue官方已经停止对Vue2的维护
Vue2官方文档链接:Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/
一、入门教程
第一种方式:下载至本地,使用js外联使用
安装Vue
npm install vue@2.6.10
基本使用Vue
第一步:新建html文件
第二步:在HTML的body标签中引入Vue.js文件
<script src="./node_modules/vue/dist/vue.js"></script>
第三部:引入写Vue代码的js文件
<script src="./main.js"></script>
总体展示:
Vue编辑HTML
-
定义一个id为app(不是app也行名字自取)作为入口
-
new Vue()实例化Vue程序:
Vue实例说明 el 元素element缩写,指定被Vue管理的DOM节点入口,注意el的值不能是html 或body data 指定初始化数据,可通过模版语法使用(大胡子语法) (function(Vue) { new Vue({ el: "#app", //这里el绑定的元素要与HTMl中Vue的路口id相同 data: { } }) })(Vue)
-
在HTML中显示数据————模版语法(或大胡子语法):{{data中的数据}}
HTML中代码
<body>
<div id="app">
number:{{number}} number23:{{number23}}
</div>
<!-- 引入Vue -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./cheshi.js"></script>
</body>
JS中代码
(function(Vue) {
new Vue({
el: '#app',
data: {
number: 123,
number23: 234
}
})
})(Vue)
结果 (vue中的data数据成功渲染到网页上):
第二种方式:直接使用网络版本,并在html中使用
建议:使用第一种方式,因为使用网络版本可能由于官方停止维护的原因已经访问不到vue包了,建议使用第一种下载后引入使用
- 引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
- 在Html内部使用vue
<!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">
number:{{number}} number23:{{num23}}
</div>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<script>
new Vue({
el: '#app',
data: {
number: 123,
num23: 234
}
})
</script>
</body>
</html>
二、分析MVVM模型
- MVVM 是 Model-View-ViewModel 的缩写,它是一种软件架构风格
Model:模型、数据对象(data选项当中的)
View:视图,模版页面(用于渲染数据)
ViewModel:视图模型,其本质上就是Vue的实例
- 思想:通过数据驱动视图
- 把需要改变视图的数据初始化到Vue中,当Vue中的数据发生改变,网页的数据也会发生改变,从而实现对视图的更新
- 声明式编程:按照Vue 的特定语法进行声明式开发,可以实现相对应的功能,不需要我们直接操作Dom元素
- 命令式编程:JQuery,需要手动去操作DOM才能实现相对应的功能
三、模版数据绑定渲染
声明式渲染
-
{{xxx}}双大括号绑定
-
v-xxxxx 以v-开头用于标签属性绑定,称为指令
基本指令
指令名称 | 简写 | 说明 |
v-model | 无 | 双向数据绑定 |
v-bind | : | 元素绑定 |
v-once | 无 | 一次性插入值 |
v-html | 无 | 将文本当作HTML渲染 |
v-text | 无 | 输出文本内容 |
v-on | @ | 事件绑定 |
v-if/v-else-if/v-else | 无 | 判断条件 |
v-for | 无 | 循环遍历渲染 |
v-show | 无 | 切换显示和隐藏 |
v-slot | ||
v-pre | ||
v-cloak |
v-model:双向数据绑定
- Vue提供的响应式数据的绑定指令,当依赖项发生变化的时候或目标项发生变化的时候都同时更新数据
修饰符 | 说明 |
.lazy | 取代input监听change事件 |
.number | 输入字符串转为有效的数字 |
.trim | 输入首尾空格过滤 |
v-bind:元素绑定
- 对单一的数据进行绑定例如style,与v-model的区别在于它不是双向更新而是单向更新,通常绑定的是定值
修饰符 | 说明 |
.prop | 作为一个 DOM property 绑定而不是作为 attribute 绑定 |
.camel | 将 kebab-case attribute 名转换为 camelCase |
.sync | 语法糖,会扩展成一个更新父组件绑定值的v-on侦听器 |
基本使用
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
v-once:一次性插入值
- 只会对目标数据进行一次响应式更新
v-html:输出HTML内容
- 用于将文本以html的形式渲染到网页
- 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用v-html,永不用在用户提交的内容上。
基本使用
<div v-html="html"></div>
v-text:在网页上输出文本
- 用于将文本输出到网页上
基本使用
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-on:事件绑定
- 用于监听 DOM 事件
- 用于事件和方法的绑定
v-if/v-else-if/v-else:判断条件是否渲染
- 用于判断是否渲染该标签,可与v-else搭配使用
v-for:循环遍历渲染
基本使用
<ul id="example-1">
<li v-for="(item,name,index) in items" :key="item.message">
{{ item.message }}
</li>
</ul>
- 其中items是源数据数组,而item则是被迭代的数组元素的别名
- 在v-for块中,我们可以访问所有父作用域的 property。v-for还支持一个可选的第二个参数,即当前项的索引。
- 也可以用of替代in作为分隔符
- 可以提供第二个的参数为 property 名称 (也就是键名),第三个作为索引
v-show:切换显示和隐藏
- v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好
- 当v-if与v-for一起使用时,v-for具有比v-if更高的优先级
- v-show的元素始终会被渲染并保留在 DOM 中,v-show只是简单地切换元素的 CSS property display
计算机属性(computed)
- 对于任何复杂逻辑,都建议使用计算属性
- 方法和计算机属性的区别:计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值,相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
//HTML代码
<div id="app">
翻转前的文字是:{{message}} 翻转后的文字是:{{reversedMessage}}
<hr>
</div>
--------------------------------------------------------------------------
//JS代码
(function(Vue) {
var vm = new Vue({
el: '#app',
data: {
message: "Hello,你好"
},
computed: {
// 计算属性的 getter
reversedMessage: function() {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
// 可以访问实例对数据进行修改
vm.message = 'hao123'
console.log(vm.reversedMessage);
})(Vue)
监听属性(watch)
- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动
- 监听属性的好处是能监听数据,但是不会缓存上次的数据,而计算机会有缓存上次的数据
- 计算属性适用于需要对响应式数据进行计算操作的场景,而侦听器适用于需要对数据变化做出特定响应的复杂场景。计算属性在多次访问时具有性能优势,而侦听器则提供了更灵活的异步操作支持。
(function(Vue) {
var vm = new Vue({
el: '#app',
data: {
message: "Hello,你好",
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
// 计算属性的 getter
reversedMessage: function() {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val
}
}
})
// 可以访问实例对数据进行修改
vm.message = 'hao123'
console.log(vm.reversedMessage);
})(Vue)
- watch的getter和setter写法
watch: {
// getter
get: function() {
return this.fullName = val + ' ' + this.lastName
},
// setter
set: function(newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
四、Css和Style的绑定
-
使用v-bind绑定CSS
使用对象语法动态切换css
HTML:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
-----------------------------------------------------------------
Vue:
data: {
isActive: true,
hasError: false
}
渲染结果为
<div class="static active"></div>
使用v-bind绑定返回对象的计算机属性修改style
HTML:
<div v-bind:class="classObject"></div>
-------------------------------------------------------------
Vue:
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
//对style进行判断处理
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
使用数组绑定css
HTML:
<div v-bind:class="[activeClass, errorClass]"></div>
//还可以使用三元表达式
//<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
------------------------------------------------------
Vue:
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染结果
<div class="active text-danger"></div>