vue学习

1 篇文章 0 订阅

2019/3/6 今日开始正式学习vue和iview
这不是一个简单的前端框架
下面的记录是写于2018.12.22号那时候对此完全不了解啊 根本不懂 现在重新学习
build 项目构建相关代码
config 配置目录 包括端口号
node_modules npm加载的项目依赖代码
src 开发的目录包括:assets 防止图片 components放组件文件 app.vuw项目入口文件 main.js项目核心文件
static 静态资源目录如文字图片
test 初始测试目录
.xxx文件 配置文件包括 包括语法配置 Git配置
index.html 首页入口文件 可以添加一些meta信息或者统计代码
package.json 项目配置文件
RAEDME.md 项目说明文档 markdown格式

语法格式:
var vm = new vue({选项})
el参数 DOM中的id
data用于定义属性 包括斯特 url alexa
methods用于定义函数 可以通过return来返回函数值

模板语法:
插值 文本 {{message}}:v-html v-bind(注意缩写)v-on用于监听DOM事件
表达式 js表达式
修饰符 以半角句号.指明的特殊后缀 用于支出一个指令应该以特殊方式绑定
用户输入 使用v-model 指令来实现双向数据绑定
过滤器 自定义过滤器 被用作一些常见的文本格式化
指令 指令都是有v—前缀的特殊属性:
v-if 条件判断
v-else 可以给v-if添加一个else块
v-show 根据条件展示元素

计算属性
关键词
computed 处理一些复杂逻辑时很有用
methods 在重新渲染时候函数总会重新调用执行
computed 属性默认只有getter 需要时可以提供一个setter
监听属性
关键词
watch
vm.$watch(‘counter’,function(nval,oval))
样式绑定
我们可可以使用v-bind处理class和style的元素样式
可以为v-bind:class设置一个对象 从而动态的切换class
事件处理器
v-on 事件监听 可以接收一个定义的方法来调用
除了直接绑定到一个方法里 也可以用内联js语句
事件修饰符
vue.js为v-on提供了事件修饰符来处理ODM事件细节 如:event.preventDafault
通过点(.)表示的指令后缀拉调用修饰符
.stop
.prevent
.captrue
.self
.once

按键修饰符 vue允许为v-on在监听键盘事件添加按键修饰符

表单 可以用v-model指令在表单空间元素上创建双向数据绑定
复选框 如果是一个逻辑值 多个则绑定到同一个数组
组件是vue.js最强大功能 可以拓展HTM元素 封装可重用的代码
prop是父组件用来传递数据的一个自定义属性
原生构造器 string number boolean function object array

实现异步加载需要用到vue-resource
如果需要传递数据,可以使this.$http.get(‘get.php’,jsonData)

post发送请求到后盾
需要第三个参数{emulateJSON:true}
语法&API
基于全局Vue对象使用http
vue.http.get(‘someUrl’,[optiongs].this(successCallback,errorCallback))
vue.http.post(‘someUrl’,[option].then(successCallback),errorCallback)
vue-resource提供了7中请求api
get head delete jsonp post put patch
options参数说明
url string 请求的目标url
body object 作为请求发送的数据
headers object 作为请求头部发送头部对象
params object 作为url参数的参数对象
method string http方法(例如get,post,。。)
timeout number 请求超时
before function 在请求发送之前修改请求的回调函数
progress function 用于处理上传进度的回填函数

v-for吧一个数组对应为一组元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值