vue 基础方法函数

Vue 实例选项el ："#id" 挂载的元素，视图data：{ name:“zs” }数据methods：{ fn:function(){ 函数体 } } 函数或者方法，函数里面的this指向的是Vue实例对象MVVMM: 模型V: 视图VM：视图模型指令指令的本质就是自定义属性 Vue 里面所有的指令都以 v- 开头v-cload阻止闪动（页面初加载时会短暂的显示原文本...

欲与晨风共行

7887人浏览 · 2019-12-23 16:47:26

欲与晨风共行 · 2019-12-23 16:47:26 发布

Vue 实例选项

el ："#id" 挂载的元素，视图
data：{ name:“zs” }数据
methods：{ fn:function(){ 函数体 } } 函数或者方法，函数里面的this指向的是Vue实例对象

MVVM

M: 模型
V: 视图
VM：视图模型

指令

指令的本质就是自定义属性 Vue 里面所有的指令都以 v- 开头
v-cload 阻止闪动（页面初加载时会短暂的显示原文本{{ … }}）
v-text 指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
v-html 用于将HTML片段填充到标签中，没有闪动问题，但是可能有安全问题，最好是在使用本网站数据时使用，使用第三方数据时尽量不要用。
v-pre 用于显示原始信息
v-once 只编译一次，之后数据的改动不会影响到视图
v-model 双向数据绑定，从数据到视图（Object.defineProperty == 对象定义属性），从视图到数据（事件监听）

事件绑定

v-on:
多用简写 @ 代码少还不用写冒号

传参：@click=" handle( 1,2, $e v e n t) ",$ event 代表实践对象，写法固定

属性绑定

v-bind:
简写直接就是一个冒号 " : "

事件修饰符

@click.stop 阻止事件冒泡
@click.prevent 阻止元素默认事件

按键修饰符

@keyup.enter 回车按键修饰符

Vue.config.keyCodes.按键变量名 = 88 自定义全局按键修饰符

class 类名绑定

:class = " { active: isActive, error: isError } " 
**:class=" [ ' active' , ' error ' ] "**
<div class="hehe" :class=" 'hehe smd' "></div>

style 样式绑定

:style="{ border: borderStyle, width: widthStyle, height: heightStyle }"( 这个对象形式的数据可以在Vue实例对象的data 中设置一个对象类型的数据然后直接使用 )

<div v-bind:class='objClasses'></div> 
objClasses: {
          active: true,
          error: true
        }

分支

在标签里面书写
v-if
v-else-if
v-else

循环

v-for
数组
v-for="(item, index) in arr"
v-for=“item in arr”
对象
v-for="(value, key, index) in obj"
v-for="(value, key) in obj"
v-for=“value in obj”
循环之后写上 :key=‘item.id’ 参数里有id就写上id，没有就写一个关键的属性，可以提高代码效率

控制显示隐藏样式

v-show 与 v-if 都可以控制元素的显示隐藏
区别在于 v-show 就算为 false ，元素在页面中的dom结构也会继续存在，而if 判断为 false 就会直接将dom 结构移除，v-show 只是控制样式，v-if 是直接控制dom 结构，相比较而言，v-show 的性能要比 v-if 好一些。

表单处理

v-model 可以实现双向数据绑定

修饰符

这里的修饰符都是在HTML视图中使用的

v-model.number 将视图上输入的字符串类型内容转化为数字类型
v-model.trim 自动过滤掉输入的首尾空格
v-model.lazy 在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在change 事件中同步，也就是在失去焦点或者按下回车键时才更新

自定义指令

全局定义

Vue.directive( “指令名称”,{
inserted: 处理函数
} )
在定义的时候只写名称，使用的时候就需要加上前缀“ v- ”

局部定义

directives:{
指令名称：{
inserted: 处理函数
}
}

<body>
  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-带参数
    */
    Vue.directive('color', {
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>

计算属性

computed:{
属性名称：处理函数
}
特点：
计算属性的值是通过处理函数的返回值来决定的
依赖于数据进行缓存
计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存

侦听器

watch:{
数据属性名：处理函数
}
数据属性名就是vue实例中的data 里面的属性名称，侦听器就是基于data 里面的数据来运作的。当被侦听的数据发生变化时就会触发这个函数。
特点：
侦听器的名字必须与data中的属性名一致
对比计算属性：侦听器只针对数据发生变化时操作，不需要得到计算结果，计算属性则会获取一个返回值。就是说，需要计算出结果时就可以用计算属性，只监听数据变化用侦听器。
侦听器和blur事件的区别：侦听器只有当数据真正发生变化时才会触发函数，而blur不管数据有没有发生变化都会触发事件处理函数

过滤器

全局定义

Vue.filter(‘过滤器名称’, 处理函数)

局部定义

filters: {

过滤器名称: 处理函数
}

使用时

处理函数
第一个形参是要处理的原始数据
第二个及之后形参的值就是使用时传递的实参

生命周期钩子

创建
	beforeCreate
	**created**
挂载
	beforeMount
	**mounted**
更新
	beforeUpdate
	updated
销毁
	beforeDestroy
	destroyed

数组的变异方法和非变异方法

变异（会影响原数组,vue 直接提供响应式支持）
push
pop
shift
unshift
splice
sort
reverse

非变异
filter
concat
slice
map
reduce
some
every
变异的方法Vue是直接提供响应式支持

响应式数据处理

有些数据可能需要手动修改，但是直接用覆盖的方法不会响应到页面中去，所以就有了响应式的数据处理方法。

数组

Vue.set(vm.数组属性名, 索引号, 值); vm.$set(vm.数组属性名, 索引号, 值);

对象

Vue.set(vm.对象属性名, ‘键名’, 值); vm.$set(vm.对象属性名, ‘键名’, 值);

组件化开发思想

注册全局组件

Vue.component

注册局部组件

components

组件注意事项

data必须是一个函数
template只能有一个根元素
template推荐用模板字符串
组件命名和使用都用短横线

父子组件之间的通讯

子组件定义属性：props

子组件内部定义和使用属性都用驼峰命名法，父组件在传值的时候使用短横线

子组件触发自定义事件：$emit

兄弟组件之间的通讯

事件中心：var eventHub = new Vue();
eventHub. $o n e v e n t H u b .$ off
eventHub.$emit
插槽
匿名（默认）
具名
当有多个插槽的时候
作用域
slot-scope
对子组件中的插槽进行加工

URL

RestFulAPI

		POST：添加
		DELETE：删除
		PUT：修改
		GET：查询

Promise

为了解决回调地狱而存在
是异步编程技术发展过程中的产物

实例API

		then
		catch
		finally

静态API

all

			Promise.all([p1,p2,p3]).then(function (result) {

// result [ p1result, p2result, p3result ]
})

race

			Promise.race([p1, p2, p3]).then(function(result) {

// result
})

fatchAPI

ajax的一个升级版
语法规则和Promise一样

axios

get
axios.get(url, { params: { name: ‘zs’, age: 18 } }).then…
delete
axios.delete(url, { params: { name: ‘zs’, age: 18 } }).then…
post
axios.post(url, { name: ‘zs’, age: 18 }, { opts… }).then…
put
axios.put(url, { name: ‘zs’, age: 18 }, { opts… }).then…

全局配置

超时时间
axios.defaults.timeout = 3000
基准请求地址
axios.defaults.baseURL = ‘http://itcast.cn/’
请求头
axios.defaults.headers[‘token’] = ‘hehehe’

拦截器

请求拦截器
axios.interceptors.request.use(function (conf) { })
响应拦截器
axios.interceptors.response.use(function (res) { })

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^