VUE使用

VUE介绍

1.MVVM的基本原理

model:模型，数据对象（data）

view:视图，模板页面

viewModel:视图模型（vue实例）

数据代理

模板解析

数据绑定-(数据在页面与内存中的变量转移；双向数据绑定：2个方向数据都可以自动转移)

2.VUE基本操作

1.通过{{}}获取值

2.强制数据转换

3.绑定事件监听

演示如下

Hello {{username}}

1.通过{{}}获取值

{{msg}}

{{msg.toUpperCase()}}

2.强制数据绑定

//无法解析图片


//可以将v-bind省略

3.绑定事件监听

点击
//可以将v-on:换成@
<button @click="test('单击')">点击2

3.VUE的属性

1.计算属性--computed

在computed属性对象中定义计算属性的方法，在页面中使用{{}}获取属性的值

2.监视属性--watch

通过vm对象的$watch()或者watch配置来监视指定的属性变化，当属性变化时，回调函数自动计算属性值

3.计算属性高级

通过getter/setter实现对属性的显示和监视，计算属性存在缓存，多次读取只执行一次getter

演示如下：

姓：

名：

姓名1(单向)：

姓名2(单向)：

姓名3(双向)：

4.实际操作

1.遍历数组、对象

VUE中的变异方法---splice

删除：this.person.splice(index,1)

更新：this.person.splice(index,1,newP)

增加：this.person.splice(index,0,newP)

v-for 遍历数组

• 
  {{index}}-----{{ p.name }}-----{{p.age}}-----
  <button @click="updateP(index,{name:'cat',age:18})">更新----<button
  @click="deleteP(index)">删除
  

v-for 遍历对象

2.列表查询及排序

//箭头函数使用 "=>"
//无形参
var f = () => 5;

// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;

// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

列表的条件过滤及排序

列表查询

• 
  {{index}}--{{p.name}}--{{p.age}}
  

<button @click="orderFun(1)">降序
<button @click="orderFun(2)">升序
<button @click="orderFun(0)">原本顺序

3.事件处理

1.事件修饰符

阻止事件冒泡：@click.stop="test"(两个div嵌套，并且都绑定事件，点击里面的div事件，外面的不会执行)

阻止事件默认行为：@click.prevent="test"（一个超链接中绑定了事件，只执行事件而不跳转超链接）

2.按键修饰符

敲击回车键触发事件：@keyup.enter="test" 或者@keyup.13="test"

4.VUE生命周期

1.初始化显示

beforeCreate()

created()

beforeMount()

mounted()

2.更新显示

beforeUpdate()

updated()

3.销毁vue实例

beforeDestroy()

destroyed()

常用的生命周期方法

mounted()-----发送ajax请求，启动定时器等异步任务

beforeDestroy()----做收尾工作，如清除定时器

5.常用内置指令

v-text：更新元素的textContent

v-html：更新元素的innerHtml

v-if：如果为true,当前标签才会输出到页面

v-else：如果为false,当前标签才会输出到页面

v-show：通过控制display样式控制显示和隐藏

v-for：遍历

v-on：绑定事件监听，一般用@

v-bind：强制绑定解析表达式，一般省略

v-model：双向数据绑定

ref：为某个元素注册唯一一个标识，vue对象通过$els属性访问这个元素对象

(通过this.$refs.标识名 称.textContent)

v-cloak：防止闪现，与CSS配合 [v-cloak] {display:none}

时间

{{date}}

完整时间：{{date | dateStr}}

年月日：{{date | dateStr("YYYY-MM-DD")}}

时分秒：{{date | dateStr("HH:mm:ss")}}

测试使用ref

<button @click="test">点击

演示v-cloak 防止闪现

{{msg}}

6.自定义指令

1.全局自定义指令

//自定义全局指令
//el:指令属性所在的标签对象
//binding:包含指令相关信息数据的对象
Vue.directive('upper-text',function(el, binding){
console.log(el,binding)
el.textContent = binding.value.toUpperCase()
})

2.局部自定义指令

演示如下

7.插件

/**
* VUE的插件库
*/
(function(){
//需要向外暴露的插件对象
const MyPlugin = {}
//插件对象必须有一个install()
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
console.log("vue函数对象的方法myGlobalMethod")
}

// 2. 添加全局资源
Vue.directive('my-directive', function(el, binding){
el.textContent = binding.value.toUpperCase()
})

// 3. 注入组件选项
/* Vue.mixin({
created: function () {
// 逻辑...
}
})
*/
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {
console.log("vue实例方法$myMethod()")
// 逻辑...
}
}
//向外暴露
window.MyPlugin = MyPlugin
// export default MyPlugin
})

引入插件js,然后声明使用(Vue.use(MyPlugin))