(2)打鸡儿教你Vue.js
var obj = {}
Object.defineProperty(obj, 'msg', {
// 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
set: function (newVal, oldVal) { },
// 读取 obj.msg 时get方法会被系统调用
get: function ( newVal, oldVal ) {}
})
Vue双向绑定
语法:v-bind:title=“msg”
简写::title=“msg”
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
key属性
-class和style
提升性能:v-pre
提升性能:v-once
过滤器 filter
文本数据格式化
{{}}和 v-bind 表达式
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
})
局部过滤器
按键值修饰符
watch是一个对象,键是需要观察的表达式,值是对应回调函数
文本数据格式化:
filter
全局过滤器
局部过滤器
显示的内容由过滤器的返回值决定
Vue.filter('filterName',function(value){
}
<div>{{ dataStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
Vue.filter('date',function(value,format){
// value 要过滤的 字符串内容
// format 过滤器的参数
})
</script>
局部过滤器
{
data: {},
// 通过 filters 属性创建局部过滤器
filters: {
filterName: function(value, format){}
}
}
修饰键,鼠标按键修饰符
@keyup.13="submit"
@keyup.enter="add"
Vue.config.keyCodes.f2 = 113
@keyup.enter.f2 = "add"
监视数据变化
watch
watch是一个对象,键是表达式,值是回调函数
new Vue({
data: {
a: 1,
b: {
age: 100
}
},
watch: {
a: function(val, oldVal){
// val 表示当前值
// oldVal 表示旧值
},
计算属性:
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
fullname() {
return this.firstname + this.lastname
}
}
})
computed中的属性不能与data中的属性同名,否则会报错
组件的生命周期函数
事件
钩子函数 - beforeCreate() - 实例初始化之后
钩子函数 - created() - 发送请求获取数据
钩子函数 - beforeMounted() - 在挂载开始之前被调用
钩子函数 - mounted() - vue实例已经挂载到页面中
钩子函数 - beforeUpdated()
钩子函数 - updated()
钩子函数 - beforeDestroy()
钩子函数 - destroyed()
axios
封装ajax,用来发送请求,异步获取数据
基于Promise的HTTP客户端,用于浏览器和node.js
https://github.com/axios/axios
// 在浏览器中使用,直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求
created: function () {
axios.get(url)
.then(function(resp) {})
}
---
// 配合 webpack 使用方式如下:
import Vue from 'vue'
import axios from 'axios'
// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios
---
// 在组件中使用:
methods: {
getData() {
this.$axios.get('url')
.then(res => {})
.catch(err => {})
}
}
---
// API使用方式:
axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)
const url = 'http://'
axios.get('/user?id=')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.get('/user', {
params: {
id: 123
}
})
组件
父组件到子组件
props
$on():绑定自定义事件
内容分发
通过 标签指定内容展示区域
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(2)打鸡儿教你Vue.js的更多相关文章
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (26)打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (21)打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (17)打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- VS2015功能介绍
1.New Web Site新网站 Recent 系统文件夹,里面存放最近使用的文档的快捷方式,以便再次访问(可删除) Installed 安装 Templates 样板,模板 Online 联网 . ...
- 11/8 (tell tales web)
1.visual perception gestalt theory:格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学.由马科斯·韦特墨.沃尔夫冈·苛勒和科特·考夫卡三位德国心 ...
- springcloud工程建立 父工程+公用子模块+微服务提供模块
建立 Java Working Set:工程多的时候可以展开收缩,方便管理 切换到Package Explorer视图,并点击视图右侧下箭头,选择Working Sets,如下图: 建立父工程,将后续 ...
- javascript_02-变量
变量 var number = 5; number = 5; //与上面一样的效果,语法没错误,但是不规范 var:关键字,变量的意思. 变量可以立即赋值,也可以稍后赋值. 堆和栈 内存中有两个区域, ...
- DB2检查数据在各节点分布情况
情景:总所周知,DB2的表空间(数据)在节点中存储是根据每张表的分区键来分布的,如果分区键建的不好,会直接导致表空间在各节点的占用大小不均匀,久而久之,其中一个或几个节点的大小已所剩无几,其他的却依旧 ...
- C#-调试记Log文件
using System.IO; //捕获异常写入Log catch (Exception ex) { string msg = ex.Message + ex.StackTrace; string ...
- /etc/apt/sources.list 和 /etc/apt/sources.list.d
转自:大数据云技术基础之Linux源:/etc/apt/sources.list文件 导读 1./etc/apt/sources.list的作用是什么?2.为什么会产生 /etc/apt/source ...
- C++中priority_queue的用法
本来想自己写一写的,但看到这个随笔,感觉要写的东西跟这个差不多,就直接附上链接. 需要注意事项: rand()函数需要引入头文件#include<cstdlib>. 自定义类型,重载ope ...
- P2002 消息扩散[SCC缩点]
题目描述 有n个城市,中间有单向道路连接,消息会沿着道路扩散,现在给出n个城市及其之间的道路,问至少需要在几个城市发布消息才能让这所有n个城市都得到消息. 输入格式 第一行两个整数n,m表示n个城市, ...
- Promise原理实现
首先先看一下 promise 的调用方式: // 实例化 Promise: new MyPromise((resolve, reject) => { setTimeout(() => { ...