Vue.js基础内容
Vue.js基础内容,建议配合官方文档一起查看!
传统网页开发
- 请求数据->生成结构->监听变化
- 元素变化->发送请求->更新结构
缺点 - DOM 操作频繁,代码繁杂
- DOM 操作与逻辑代码混合,数据或者结构的修改,可维护性差
- 不同功能区域书写在一起,可维护性低
- 模块之间依赖关系复杂
库是一种工具,在代码中起到辅助作用。框架是JS框架,是遵从遵守规则开发的一种方式
本文目的是学习Vue.js规则,Vue.js是渐进式JavaScript框架,官方学习
特性:
- 数据驱动视图
- 组件化开发
- 数据变化会自动更新到对应元素中,无需手动操作 DOM,这种行为称作单向数据绑定
- 对于输入框等可输入元素,可设置双向数据绑定
- 双向数据绑定是在数据绑定基础上,可自动将元素输入内容更新给数据,实现数据与元素内容的双向绑定
文章图片
双向数据绑定适用于特殊元素(可输入元素)例如:input,checkbox,textarea
输入后自动更新到绑定数据上,绑定数据的更改也会自动更新到元素中(双向)
Vue数据驱动视图
- Vue.js的数据驱动视图是基于MVM模型实现的
- MVVM(Model -View -ViewModel )是一种软件开发思想
- Model层,代表数据
- View层,代表视图模板
- ViewModel层,代表业务逻辑处理代码
- 基于MVVM模型实现的数据驱动视图解放了DOM操作
- View 与Model处理分离,降低代码耦合度
- 但双向绑定时的 Bug调试难度增大
- 大型项目的 View 与 Model过多,维护成本高
组件不仅可以封装结构,还可以封装样式与逻辑代码,给组件起个名字,名字可作为html标签名进行使用。组件大大提高了开发效率与可维护性
安装 本地引入
- 开发版本:https://cn.vuejs.org/js/vue.js
- 生产版本: https://cn.vuejs.org/js/vue.m...
比本地引入放到服务器上要快,通过script src属性
- 最新稳定版: https://cdn.jsdelivr.net/npm/vue
- 指定版本: https://cdn.jsdelivr.net/npm/...
- npm install vue
- npm install vue@2.6.12
Vue实例 通过Vue函数创建的对象,是使用Vue功能的基础
var vm = new Vue({
// 选项对象
})
el选项
- 用于选取一个 DOM元素作为Vue 实例的挂载目标。
- 只有挂载元素内部才会被Vue进行处理,外部为普通HTML元素无法使用Vue功能。
- 代表MVVM中的View层(视图)。
vm.$el
进行访问操作 el,访问到的是个HTMLElement两种挂载方式
- css选择器格式的字符串
- HTMLElement 实例
var app = document.querySelector('#app'); var vm = new Vue({ el:"#app" // 通过css选择器格式的字符串 el: app// HTMLElement 实例,注意这里没引号,不能为html或body })
vm.$mount()
进行挂载,参数形式与 el 规则相同var vm = new Vue({});
vm.$mount('#app');
效果相同,一个通过创建时挂载,一个创建过后挂载,
$mount()
传入参数和 el 相同插值表达式 挂载元素内可以使用Vue.js的模板语法,模板中可以通过插值表达式为元素进行动态内容设置,写法为
{{ }}
,括号内可 基本运算,三目运算,数值等等注意点:
- 插值表达式只能书写在标签内容区域,可以与其它内容混合
- {{1+2+3}}
- // ok
- // error
- 内部只能书写JavaScript表达式,不能书写语句
- {{ var num = 100 }}
- // error
data选项用于存储Vue 实例需要使用的数据,值为对象类型。
new Vue({ el:"#app", data:{ title:"内容" } })
访问数据方式,vm.$data.数据
或者vm.数据
,例如vm.title
- data中的数据可以直接在视图中通过 插值表达式 访问
- data 中的数据为响应式数据,在发生改变时,视图会自动更新。
- data 中存在数组时,索引操作与
length
操作无法自动更新视图,这时可以借助Vue.set()
方法替代操作。
var vm = new Vue({
el:"#app",
data:{
contentArr:["1","2",3]
}
})Vue.set(vm.contentArr,0,"生效的新内容") // 数组 索引 新值
- {{ contentArr[0] }}
- {{ contentArr[1] }}
- {{ contentArr[2] }}
此时正常显示,通过控制台修改
vm.contentArr[0] = "你好吗"
,li
并未更新vm.contentArr.length = 0
li
并未更新
new Vue({
el:"#app",
data:{
contentArr:["1","2",3]
},
methods:{
foo(){
console.log(this)
return this.contentArr
}
}
})
访问数据方式
- methods中的方法可以通过vm.方法名访问
- 方法中的
this
为vm 实例,可以便捷的访问vm数据等功能 - 方法通过
this
也可以互相组合this.foo(){ return this.foo1() }
Vue.js的指令就是以
v-
开头的自定义属性指令学习入口
修饰符 修饰符是以点开头的指令后缀,用于给当前指令设置特殊操作
- 事件修饰符
- 按键修饰符
- 系统修饰符
- 鼠标修饰符
- v-model修饰符
自定义指令 指令用于简化DOM操作,相当于对基础DOM操作的一种封装。
当我们希望使用一些内置指令不具备的 DOM功能时,可以进行自定义指令设置。
- 自定义全局指令
- 自定义局部指令
- 指的是可以被任意Vue 实例或组件使用的指令。
- 参数1:指令名
- 参数2:配置对象(内部可以添加钩子函数)
- inserted钩子在元素插入 DOM 后执行
Vue.directive('focus',{ inserted(el){ // el表示设置这个指令的element元素,本文指下面的input元素 el.focus() // 执行元素操作 } })
应用上面的指令
全局的意思表示, 当你创建多个vue实例对象时,都可以使用focus的指令
new Vue({ el:"#app" })new Vue({ el:"#app2" })
// 都可以被使用
钩子函数参数
Vue.directive('focus',{ inserted(el,binding){ // binding指设置的相关信息 console.log(binding) } })
// 可以判断有a或b修饰符干什么事
文章图片
- 指的是可以在当前Vue 实例或组件内使用的指令。
- 对象键:属性名。对象值,配置对象
new Vue({ ... directives:{ focus:{ inserted(el){ el.focus() } } } })
使用
更多自定义指令内容参考官网
- 全局过滤器
- 局部过滤器
- 参数1:过滤器名
- 参数2:过滤器功能
Vue.filter('过滤器名称', function(value){ // value是使用过滤器时传入的数据 // 逻辑代码 return '处理结果' })
- 过滤器能在插值表达式和v-bind中使用,通过
管道符|
连接数据
// 对id处理,在bind中使用{{ content | filterContent }} // 对content处理,在插值表达式中使用
例子
// "abc"{{ val2 | filterVal }}
// "xyz"
Vue.filter('filterVal',function(value){ console.log(value) // "a-b-c" return value.split("-").join("") // 此时title则为"abc" })new Vue({ ... data:{ val:"a-b-c", val2:"x-y-z" } })
注意事项
- 可以将一个数据传入到多个过滤器中进行处理。
- 过滤器的组合操作,类似于管道,
content
参数先经过filterA
处理再将filterA的返回值
传入filterB
中处理,再返回
{{ content | filterA | filterB }}
- 一个过滤器可以传入多个参数
- 参数1:content,参数2:par1,参数3:par2
{{ content | filterContent(par1,par2) }}
局部过滤器
- 局部过滤器只能在当前Vue 实例中使用。
new Vue({ ... filters:{ 过滤器名称:function(value){ // 逻辑代码 return '处理结果' } } })
其他特点参考全局过滤器,一致的。
- 如果全局过滤器和局部过滤器都存在,且重名,只有局部过滤器生效
- 因此,我们可以在vue全局 定义一些基础的过滤器规则,在实例里对 和全局重名的局部过滤器进行 重写,定义局部过滤功能
- Vue.js的视图不建议书写复杂逻辑,这样不利于维护。
{{ Math.max.apply(null, arr) }}
{{ Math.max.apply(null, arr) }}
{{ Math.max.apply(null, arr) }}
解决办法
- 封装函数处理
- 封装函数是很好的方式,但有时重复的计算会消耗不必要的性能。
new Vue({ ... data:{ arr:[1,2,3,4,5] }, methods:{ result(){ var sum = 0 var arr = this.arr for(var item of arr){ sum+=item } return sum } } })
{{ result() }}
{{ result() }}
{{ result() }}
- 封装函数是很好的方式,但有时重复的计算会消耗不必要的性能。
- 如何提高计算执行效率?计算属性
- 计算属性使用时为属性形式,访问时会自动执行对应函数。
- 执行一次后,计算属性内部会将执行的方法进行缓存
- 计算属性减少了函数的执行次数
- 计算属性可以通过
实例.xx
访问
new Vue({ ... data:{ arr:[1,2,3,4,5] }, computed:{ result(){ console.log("我只执行了一次") var sum = 0 var arr = this.arr for(var item of arr){ sum+=item } return sum } } })
{{ result }}
{{ result }}
{{ result }}
Methods 与 Computed 区别
- computed具有缓存性,methods没有。
- computed通过属性名访问,methods需要调用。
- computed仅适用于计算操作。
- 计算属性默认只有getter,Vue.js也允许给计算属性设置setter
- 将计算属性改为对象(以前是个方法)
vm.getResult = "xxx"
会执行 set方法
var vm = new Vue({ ... computed:{ getResult:{ // getter get:function(){ // 逻辑代码 }, // setter set:function(newVal){ // 逻辑代码 } } } })
侦听器- 侦听器用于监听数据变化并执行指定操作。
new Vue({ ... data:{ value:"" }, watch:{ value (newVal,oldVal){// 当value数据发现变化会执行 // 逻辑代码 } } })
例子
new Vue({ ... data:{ inputVal:"" },// 只要inputVal值变了,就会触发watch watch:{inputVal (newVal,oldVal){ // 逻辑代码 console.log("侦听器执行了") }inputVal :{// 写法2 handler(newVal,oldVal){ console.log("侦听器执行了") } } } })
复杂类型监听器设置
- 为了监听对象内部值的变化,需要将watch书写为对象,并设置选项
deep: true
,这时通过handler
设置处理函数。
new Vue({ ... data:{ obj:{ contxt1:"内容1",contxt2:"内容2" }, arr:[1,2,3,4,5] }, watch:{ obj:{ deep:true, handler(val,oldVal){ console.log(val,oldVal) console.log(val === oldVal) // true } }, arr(val,oldVal){ // 数组不需要设置deep console.log(val,oldVal) console.log(val === oldVal) // true } } })
【Vue.js基础内容】注意事项
- 当更改(非替换)数组或对象时,回调函数中的新值与旧值相同,因为它们的引用都指向同一个数组、对象。因此,对于复杂类型,无法进行
val
和oldVal
对比
- 是Vue.js官方提供的用来调试Vue应用的工具
注意事项 - 网页必须应用了Vue.js功能才能看到 Vue DevTools
- 网页必须使用Vue.js 而不是 Vue.min.js
- 网页需要在http协议下打开,而不是使用file协议本地打开。
推荐阅读
- Python基础|Python基础 - 练习1
- Java|Java基础——数组
- Java基础-高级特性-枚举实现状态机
- 营养基础学20180331(课间随笔)??
- iOS面试题--基础
- HTML基础--基本概念--跟着李南江学编程
- typeScript入门基础介绍
- c++基础概念笔记
- 集体释放
- 自我修养--基础知识