记录一下Vue学习过程
一、Vue基础
步骤：
- 导入开发版本的Vie.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
el:挂载点
例如：el: "#app"
注意： 不能命中html和body
date:数据对象
- vue中用到的数据
- 可以写复杂类型，渲染时遵守js语法
二、本地应用
v-text:
- 设置标签的内容，只会解析为文本
- 默认写法会替换全部内容，使用插值表达式
{{}}可 - 以替换指定内容
- 内部支持写表达式
v-html:
- 设置元素的innerHTML
- 内容中有Html的结构会被解析为标签
v-on:
- 为元素绑定事件
- 事件名不用写on
- 指令可以简写为@
- 绑定方法定义在methods属性中
- 方法内部可以用this访问data中的数据
- 事件绑定方法写成函数调用的形式可以传入自定义参数
- 定义方法时需要定义形参接收传入的实参
- 事件后.修饰符可以限制事件，如.enter回车
v-show
- 根据真假切换元素显示状态
- 原理是修改元素的display
- 指令后的内容，最终都会解析为布尔值
v-if
- 根据真假切换元素显示状态
- 本质是操纵dom元素，表达式为false时从dom树中移除
- 频繁切换的元素用v-show，反之用v-if
v-bind
- 为元素绑定属性
- 指令可简写为:
- 动态增删class建议使用对象的方式，
- 例如{active:isActive}
v-for
- 根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in data
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
v-model
- 便捷设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定数据和表单元素值双向绑定
三、网络应用
axios
- 使用get或post方法发送对应请求
- 先导入再使用
- then方法回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获得response内容或错误信息
axios+vue
- axios中this已经改变，需要提前保存this方便赋值
补充
- 应用的逻辑代码建议和页面分离，用单独的js文件写
- 注意服务器返回数据的层级结构
- 自定义参数可以让代码的复用性提高
- methods中定义方法内部可用this关键字调用方法
其他
Vue页面加载时，触发某个函数的方法
mounted:function(){
this.createcode();//需要触发的函数
}
//下面是createcode函数
createcode(){
var self = this;
axios.post("/verifycode",{name:this.name,id:this.id}).then(function(res){
//console.log(res);
var url= JSON.parse(res.data.code64);
//console.log(url)
self.urlIMg = url.data.base64Code;
});
},