目录
一.历史介绍: 官网:https://cn.vuejs.org/
7)v-model 和 v-bind --双向的数据绑定(重点)
网址:https://element.eleme.cn/#/zh-CN
一.历史介绍: 官网:https://cn.vuejs.org/
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
开发者工具:在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用(如何安装,下期教你)
angular.js 09年,年份较早
react,2013年,用户体验好
vue 2014年,用户体验好 作者:尤雨溪 国人骄傲
二.核心原理:
DOM节点 + 发请求 + 模板引擎 + 路由功能
VUE-KFC的世界,库就是一个小套餐,框架就是全家桶
vue全家桶: vue基础 + vue-cli脚架 + vue-router路由 + vuex(状态管理模式)
三.使用:
1)引包:
<script src='./vue.js'></script> //引入vue的库2）启动:
<script>
new Vue({
el:'#app',//⽬的地
data:{
保存数据的地方
},
methods:{
保存方法的地方
}
});
</script>
3)插值表达式:
{
{ 表达式 }} 类似模版中的变量表达
对象-------- (不要连续3个{} ) {
{
{name:'jack'}}}错误 {
{ {name:'jack'} }}正确
字符串------ {
{ 'xxx' }}
判断后的布尔值------- {
{ true }}
三元表达式------- {
{ true?'是正确':'错误' }}
ps: 要⽤插值表达式 必须要data中声明该属性 4)什么是指令?
解释: 在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示
例: <div v-xxx ></div>
在vue中 以v-xxx开头的就叫做指令
指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定 5)vue中常见的指令:
v-text: 文字指令
v-html: 元素的innerHTML
v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建
v-else-if
v-else
v-show 隐藏元素
如果确定要隐藏, 会给元素的style加 上display:none。是基于css样式的切换
说明: v-if和v-show的区别?
v-if为DOM渲染属性, 通过添加删除DOM节点实现
v-show属于css渲染, 通过css的display:none实现
v-bind使⽤ 给元素的属性赋值 可以给已经存在的属性赋值 也可以给⾃定义属性赋值
语法:
在元素上 v-bind:属性名="常量||变量名"
例:
v-bind:href = 'res.url' 可以简写为 :href = 'res.url'
ps: 如果直接绑定属性值时,可以不用外部{ } , 如果设置属性与属性值时,要加入外部的{ }
:src="变量" 绑定图片地址
:class = "{active:isActive}" 增加样式, active=’变量’
样式改变:
:style='{color:isColor,fontSize:fontSize+"px"} 中间的变量可以直接被解析
功能类似于 jq中 attr为标签设置属性
简写形式 :属性名="变量名"v-on的使用:
处理自定义原生事件的,给按钮添加click并让使用变量
v-on: 绑定事件 事件名="表达式||函数名" 简写方式: @事件名="表达式"
例如: 绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)"
PS：vue中的事件对象获取, 当方法中没有参数时, 在方法中的第一个参数就是事件对象 当方法中有参数时,需要手动, 在调用事件时,加入$event,代表事件对象
所有事件默认事件对象都为: event
外部传入时,可以通过$event的方式,把 事件对象传入
传参问题：
1. 事件对象
1. 当定义的事件没有其他参数时，第一个参数默认就是事件对象
<div v-on:click='demo'>
demo(e){e就是事件对象}
2. 当定义的事件有其他参数时，事件对象必须手动传入
<div v-on:click='demo(123,$event)'>
demo(cs,e){}
2. 普通参数
定义函数时直接在函数上添加参数
<div v-on:click='demo(2)'>
- 简写：v-on 简写成 @
- this问题：this指向当前组件6)事件修饰符
解释: 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
2. 事件修饰符:
.prevent : 阻止事件的默认行为
原生JS event.preventDefault()
.stop : 停止事件冒泡
原生JS event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
-demo事件修饰符/鼠标修饰符：
使用语法:<div v-on:click.stop='dosomething'>
.stop 停止事件冒泡
.prevent 阻止事件的默认行为
.capture 变为事件捕获
.self 阻止捕获
.once 一次性事件
.passive 监听滚动, scroll事件,需要配置脚手架与监听,后面讲
- 键盘/按键修饰符：
<input type="text" name="" v-on:keyup.enter='search'>
.enter 操作的是enter键
.tab 操作的是Tab键
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
- 系统修饰符：
<input type="text" name="" v-on:keyup.enter.ctrl='search'>
.ctrl
.alt
.shift
.meta
ps: 修饰符可以去自由组合,但要注意顺序
例:
@click.ctrl ctrl+单击才生效
-Input中的修饰符
.lazy 延时
.number 自动转数字
.trim 去掉左右空格
7)v-model 和 v-bind --双向的数据绑定(重点)
双向数据流（绑定） 页面改变影响内存(js) 内存(js)改变影响页面
使用v-model(双向数据绑定)自动收集数据 单向数据绑定 内存改变影响页面⾯改变
3.v-bind绑定 注意不能直接绑定, 需要变量配合,可以加入判断
正常: v-bind:属性 = 变量值
简写: :属性=变量值
动态参数: :[变量] = 变量值
ps: 拼接动态参数时需使用 + 号拼接,注意不可以加空格
v-bind在绑定类时,可以追加的形式向class中加入内容
在class 加入类时,遇到判断时需要加{ }
在style 加入样式时,需加入{ }, style中的样式属性面转换为驼峰名命法
Vue中的单向绑定与双向绑定
变量---临时存储在内容中---运算完成后自删除
v-bind
单向绑定: 从内存中取值,绑定视图上
v-model
双向绑定: 从内存中取值,绑定到视图上,视图上的值改变元量,会影响到内存 MVVM双向绑定
ps:vue中双向绑定,只对form表单元素中,有value属性标签生效
ps: v-bind 和 v-model 的区别?
v-model: 外部改变数据时,影响内部
v-bind: 外部改变数据时,不影响内部8)v-for的使⽤
基本语法 v-for="item in arr" key="item.id"
对象的操作 v-for="item in obj" key="item"
如果是数组没有id
v-for="(item,index) in arr" :class="index" 9)vue中的计算属性 computed:{}
使用场景,如果有属性需要经过处理才输出时, 需要用到计算属性
computed:{
计算方法:functiion(){ }
}
Computed特点:
1.computed默认只有getter方法
2.计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取
3.提升了代码运行效率
Seter方法设置:
监听的属性由方法变为对象格式
属性:{
set:function(newV){
设置值时触发
},
get:function(){
获取值时触发
}
}10）vue中的监听器 watch
1.用于监听 vue中的属性改变
a.正常监听:基本数据类型
属性:function(新值,老值){ }
b.深度监听:复合数据类型
属性:{
deep: true 开启深度监听
handler:function(){ 回调方法 }
}
监听器与计算属性的区别:
1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况
2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算，不会创建变量保存结果
计算属性有缓存, 监听没有缓存
3).computed的结果是通过return返回的，而watch不需要return。
4).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数11)Vue中的过滤器 filters | 管道符
1.属性部过滤器 ---- 在vue对象中加入
filters:{
过滤器名 : function(a,b){ return 结果 }
}
2.全局过滤器
Vue.filter(‘过滤器名’, (val) => {
})
PS:计算属性与监听的区别
1.计算属性会产生缓存, 当数据没有发生变化时,直接调用缓存中的内容
2.计算属性需用return返回 监听不用
3.监听可以获取新值与老值, 计算属性没有这种参数
| 管道符 与filters过滤器配合四.组件:
1）组件的解释:
组件是可复用的 Vue 实例，且带有一个名字,具有一定功能
2)组件分类
以创建方式: 自定义组件 与 系统自带组件
以使用范围:
局部组件: 在vue对象中使用
全局组件: 在任意组件中使用
3)组件使用
ps: component 砍po恩特 部件
template 瘫扑累特 模版
一.局部组件的使用方式: 创建--挂载--使用
1.局部组件创建 : 局部组件就是一个对象 { }
例:
const mymodel = {
template:`
<h3>我是局部组件</h3>
`
}
2.组件的挂载: 在Vue实例中的 components 中挂载
例:
components:{
mymodel ====> mymodel:mymodel
}
3.使用组件: 在HTML中, 以标签的形式加载 单双标签形势都可,推荐双标签
<div id='app'>
<mymodel ></mymodel>
</div>
注意:在组件中这个data必须是⼀个函数,返回⼀个对象
二.全局组件
通过 Vue.component(组件名,{}) 创建全局组件,此时该全局组件可以在 任意模板(template)中使⽤
Vue.component('Child',{
template:`
<div>
<h3>我是⼀个⼦组件</h3>
</div>
`
})
三.重点:
局部嵌套全局, 在template中 直接使用
局部嵌套局部, 在components中 挂载后在使用
Ps:组件内容尽量要到div中,不加div会被认为传参,不合条件,不能解释4)组件通信(重点)
a)父传子(props):
父传子:通过props来进行通信
在父类组件上挂载的子类标签上绑定自定义属性,子类组件通过props来接受
例如:
//父组件:
<template>
<div>
<子组件标签 v-bind:user=“user”></子组件标签> //前者定义名称便于子组件调用,后者要传递数据名
</div>
</template>
<script>
export default{
data(){
return{
user:['hello word']
}
}
}
</script>
//子组件:
<template>
<div>
<text>{
{user}}</text>//呈现页面
</div>
</template>
<script>
export default{
props:{
user:{
typeOf:Array;
required:true;
}
}
}
</script>
总结:父组件通过props向下传递数据给子组件. 注:组件中的数据共有三种形式: data,props, computed
b)子传父($emit)
1.在父组件中 子组件上绑定自定义事件
2.在子组件中 触发原生的事件 在事件函数通过this.$emit触发自定义的事件
//子组件:
<template>
<div>
<div @click="Change title">{
{title}}</div>
<h2>{
{title}}</h2>
</div>
</template>
<script>
export default{
data(){
return{
title:'Vue.js demo'
}
}
methods:{
Change title(){
最低0.47元/天 解锁文章
2615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
