跳至主要內容

开始

Emilia Zhen大约 6 分钟vue

Vue 是基于 M(数据) V(视图) VM(调度者)这种设计模式开发出来的一个框架 双向通信mvc(控制) 单向通信 数据变化交给控制处理才能视图变化

基本编码步骤

  1. 引入vue.js
  2. 在 script 标签部分创建一个 Vue 实例
new Vue({
        el: '#app', //通过选择器找到一个让vm实例监管的区域
        data: {
              message: 'hello'
        },
        methods: {
             handler() {
                  ...
              }
        }
})
  1. 在 HTML 结构部分书写 Vue 代码
<div id="app">{{message}}</div>

v-text 将文本渲染到指定元素中

<div v-text="message"></div>

v-html 将数据解释为 Html

<div v-html="message"></div>

v-bind 动态绑定属性

v-bind:属性名="data里面的属性" 简写为:加属性名

<img :src="imgDataSrc" />
<a :href="'del.php?id=' + id" :class="[{ btn: true }, active]"></a>

v-for 循环渲染元素

<div v-for="(item, index) in list" :key="index">{{item}}</div>
<p v-for="item in arr">{{item.name}} : {{item.age}}</p>
<p v-for="(item, index) in arr">{{item.name}}:{{item.age}} {{index}}</p>
<p v-for="value in obj">{{value}}</p>
<p v-for="(value, key, index) in obj">{{key}}:{{value}}{{index}}</p>

:key需要绑定一个唯一值；提升v-for渲染效率，只会重新渲染更改的项

V-model

数组length属性改变数组和使用数组下标的方式去改变数组不会触发视图更新
Vue.set(arr,index,newVal)要改的数组，要改的项，更改后的新值
Array.prototype.splice()v-model指令用来双向数据绑定，就是model和view中的值进行同步变化
v-model只能在input/textarea/select

<input type="text" v-model="newName" />

v-on 监听 dom 事件

v-on:任意的事件类型="执行的函数" 简写 @任意的事件类型="执行的函数" 函数定义在Vue实例的methods:{..}中 methods:{ changeMsg(){this.name = ".."}}
通过执行函数中添加$event参数传递事件对象 @click="getEvent($event)" 事件修饰符可以给事件添加特殊功能.stop .prevent .once .self
按键相关的事件添加按键修饰符.enter .tab .delete .left .down @keyup.enter="foo"

v-if 和 v-show

可以用来控制元素的显示和隐藏，v-if="boolean" v-show="boolean"

  • v-if通过控制dom来控制元素的显示和隐藏，会造成浏览器重排
  • v-show通过控制样式display:none来控制元素显示和隐藏，会触发浏览器重绘 涉及大量dom操作的时候需要用v-show，涉及到异步数据渲染的时候用v-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

v-cloak

在样式部分写入 [v-cloak]{display:none};并在闪烁标签v-clock;
当vue实例结束编译之后v-clock会被删除

ref

在标签上绑定一个ref="xx"，然后在mounted函数中this.$refs.xx操作dom

自定义指令

指令能够帮助开发者操作DOM，当系统指令不能够满足需求时，就可以使用自定义指令进行DOM操作；将操作DOM的方式封装成指令后首先可以重复使用，其次封装成指令的过程是vue内部提供的方法，这些方法在性能上比直接操作DOM元素要高

Vue.directive('xx',{
   inserted(el,binding){
     ...
    }
})

自定义指令名称，配置对象
钩子函数是系统定义的函数，会自动执行。 inserted在插入到DOM时候自动执行 使用时v-xx="cc" 插入到元素标签

  • el是指令所在的元素对象
  • binding是一个对象
  • binding.value自定义指令对应的指令值(指令值是一个表达式)是该表达式的值
  • binding.expression指令等号后面的值
directives:{
'todo-focus':{
bind(el,bind){...} //在自定义指令绑定到DOM元素上面就会自动执行，是在内存中指令挂载到DOM对象时会自动执行
inserted(el,binding){..}//当指令所在的元素插入到DOM节点时会自动执行
update(el,binding){..} //当指令所绑定的数据发生变化时会自动执行
}
}

directives:{bind(el,bind){..},update(el,binding){..}} 简写 directives:function(el,binding){...}

过滤器

Vue.filter('xx', function (a, b) {})
  • 参数1过滤器名字，
  • 参数2处理函数，其中默认a为过滤的原始数据,函数需要return返回处理好的数据
  • 在需要过滤的数据后面加上管道符|
<span>{{ item.name | xx(b) }}</span>
  • 过滤器只能在差值表达式中使用，v-bind='index | fmtIndex'

计算属性

computed:{ foo(){ return ..}}
  • 这里的foo就是一个计算属性，他是一个函数，但这个函数可以当成属性来使用
  • 函数名就是属性名
  • 属性值是函数的返回值
  • 计算属性的值会根据函数内部依赖的其他属性产生变化
  • 计算属性具有缓存

watch 监听

  • 用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
  • 创建监听异步操作的时候，就要用到watch
  • watch里面的函数函数名很特殊，是需要监听的 data 的名字，函数参数newVal和oldVal
  • 在使用前端路由的时候只能用watch
watch:{obj:{handler(newVal,oldVal){...},deep:true}}  // 深度监听

请求

axios

引入 js 后

axios.get('/user?id='+id).then(function(res){..}).catch(function(){..})
axios.post('/user/..',{id:'xx',name:'xxx'}).then(function(res){..}).catch(function(){..})

vue-resourc(不推荐)

引入 js 后

Vue.$http.get('http://..',[可选参数对象,{传参}]).then(..)
Vue.$http.get('http://..',[可选参数对象,{传参}]).then(..)

解决跨域方案

jsonp 需要前后端配合，jsonp本质上发出的是get请求 cors 只需要后端进行相关配置就可以解决跨域 代理 只需要前端自己搭建代理服务器即可解决跨域

transition

transiton过渡动画只能控制元素在显示和隐藏切换时的过渡效果

方法一：transition 结合 css

  1. 给 v-if 或 v-show 的元素用<transition name="xx"></transition>包裹起来
<transition name="slide">
  <span v-if="isshow">hello</span>
</transition>
  1. 在 style 中写样式 v-enter-active,v-enter,v-enter-to;若有 name 属性则将 v-换成 xx-
/* 控制整个动画的执行过程 */
.slide-enter-active,
.slide-leave-active {
  transition: all 2s;
}
/* 设定动画出现的起始位置和动画离开的结束位置 */
.slide-enter,
.slide-leave-to {
  padding-left: 100px;
}
/* 设定动画离开的起始位置，和动画进入的结束位置 */
.slide-enter-to,
.slide-leave {
  padding-left: 0px;
}

方法二：

<link rel="stylesheet" href="./animate.css" />
<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
  <div v-if="isshow">hello</div>
</transition>

方法三：

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave">
  <div v-show="isShow">哈哈哈</div>
</transition>

//----vue ---
methods: {
     beforeEnter(el) {
         el.style.transform="translateX(200px)";
     },
     enter(el, done) {
        el.offsetWidth;
        el.style.transform="translateX(0)";
        el.style.transition="all 2s ease";
        done();
      },
      afterEnter(el) {
         el.style.color='red';
      },
   ...
}

beforeEnter(){} 设置动画执行的初始状态 enter(el,done){ .. ; done()}

  • 先调用el.offsetWidth或el.offsetHeight..可以让浏览器重绘
  • 设置动画结束时候的状态
  • 设置动画执行效果
  • 显示调用done();

afterEnter(){} 动画执行完后调用的函数

$set()

vue2.0 给 data 对象新增属性，并触发视图更新 受ES5的限制，Vue.js不能检测到对象属性的添加或删除，Vue.js在初始化实例时将属性为getter/setter所以属性必须在data对象上才能让Vue.js转换它，才能让它是响应的 使用$set()方法，既可以新增属性，又可以触发视图更新

this.$set(this.data, 'key', value)

$nextTick

在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法获取更新后的 DOM

this.$nextTick(function () {...})
EmiliaZhen
Copyright © 2024 Emilia Zhen