「vue.js」学习笔记
why Vue?
什么是Vue?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vu.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.
特性
- javascript框架
- 简化Dom操作
- 响应式数据驱动
官方文档「https://cn.vuejs.org/」
学习一门语言或技术,有什么比官方文档更适合的呢,而且Vue的中文文档很完善,对新手来说非常友善,建议一定要去康康.还有这片文章写得也很好:「https://www.cnblogs.com/lishanlei/p/8423407.html」
一个简单的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{ about.name }}
</div>
</body>
</html>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app", //挂载点
data: {
msg: "Hello Vue!",
about:{
name:"billie",
age:18,
}
}, //数据对象
methods:{}, //事件
mounted(){} //挂载事件
});
</script>
-
导入vue的两种方法:
-
在线导入
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
本地导入
<script src="./vue.js"></script>
-
-
定义一个Vue对象:
var vm = new Vue({ ... });
-
el - 挂载点
- vue会管理el选项命中的元素及其内部的后代选择器
- 可以使用其他的选择器,但是建议使用ID选择器
- 可以使用其他的双标签,不能使用HTML和BODY
-
data - 数据对象
- vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
-
methods - 事件
-
mounted - 挂载事件
Vue指令
什么是指令?
是一种特殊的自定义行间属性(也就是在html标签内写);指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上,在Vue中,指令以“v-”开头, Vue中的内置指令:点击查看更多
v-bind:动态绑定数据。简写为“:” 。=> 以后的:class="{red:boolean}"
v-on :绑定时间监听器。简写为“@”,例:@click="xxx";
v-text :更新数据,会覆盖已有结构。类似{{ msg }} ;
v-show :根据值的真假,切换元素的display属性;
v-if :根据值的真假,切换元素会被销毁、重建; => 在dom中已消失
v-else-if :多条件判断,为真则渲染;
v-else :条件都不符合时渲染;
v-for :基于源数据多次渲染元素或模块;
v-model :在表单控件元素(input等)上创建双向数据绑定(数据源);
v-pre :跳过元素和子元素的编译过程;
v-once :只渲染一次,随后数据更新也不重新渲染;
v-cloak :隐藏未编译的Mustache语法,在css中设置[v-cloak]{display:none;}
v-text
- 作用:设置标签的文本内容
- 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容
- 内部支持写表达式
v-html
- 作用:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本内容
- 解析文本使用v-text,需要解析html结构使用v-html
v-on
- 作用:为元素绑定事件
- 事件名不需要写
on
- 指令可以简写成
@
- 绑定的方法定义在
methods
属性中 - 方法内部通过
this
关键字,访问定义在data
中的数据 - 可以写成
函数调用
的方式,也可传入自定义参数
v-show
- 作用:根据真假切换元素的现实状态
- 原理:修改原始的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true,元素显示;值为false,元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
v-if
- 作用:根据表达式的真假切换元素的显示状态
- 本质:通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换用v-show,反之用v-if,前者的切换消耗小
v-bind
- 作用:根据表达式的真假切换元素的显示状态
- 本质:通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换用v-show,反之用v-if,前者的切换消耗小
- 标签
v-bind
- 作用:为元素绑定属性
- 完整写法: v-bind:属性名
- 简写写法: 忽略v-bind,只保留**:属性名**
- 需要动态的增删class建议使用对象的方式
v-for
- 作用:根据数据生成列表结构
- 语法:(item,index) in 数据
- 数组经常和v-for结合使用
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
<ul>
<li v-for="(item,index) in about.arr">{{ index+1 }}:{{ item }}</li>
<li v-for="item in about.dict">{{ item.name }}</li>
</ul>
v-model
- 作用:便捷地设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据↔️表单元素的值
网络请求
axios
- 一个功能强大的网络请求库
- 导入:
<script src="https://billie-s-blog.oss-cn-beijing.aliyuncs.com/axios.min.js"></script>
- 语法:
- get:
axios.get( "地址?key=value" ).then( function(response){},function(err){} )
- post:
axios.post( "地址",{key:value} ).then( function(response){},function(err){} )
- get:
- 发送请求:get/post
then
方法中的两个回调函数,成功时触发第一个,失败时触发第二个- 通过回调函数的形参可以获取响应内容,或错误信息
- axios回调函数中的
this
已经改变,无法访问到data
中的数据 - 调用变量的时候,把
this
保存起来,回调函数中直接使用保存的this
即可 - 和本地应用的最大区别就是改变了数据来源
jsonp
- 针对跨域请求时可以使用jsonp进行网络请求
- https://github.com/RekingZhang/axios-jsonp
- https://github.com/RekingZhang/axios-jsonp/tree/master/dist
<div id="app">
<img :src="main_url" >
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://billie-s-blog.oss-cn-beijing.aliyuncs.com/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app", //挂载点
data: {msg:'pass me',main_url:'',about_url:''}, //数据对象
methods:{
getimg(){
var that = this;
axios.jsonp('http://open.iciba.com/dsapi/')
.then(function (response) {
that.main_url = response.fenxiang_img;
that.about_url = response.picture4;
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}, // 方法
mounted(){
this.getimg();
}
})
</script>
按钮
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 尺寸 | string | medium / small / mini | 无 |
type | 类型 | string | primary / success / warning / danger / info / text | 无 |
plain | 是否鼠标滑过/点击背景变深色调 | boolean | — | false |
round | 是否圆角按钮 | boolean | — | false |
circle | 是否圆形按钮 | boolean | — | false |
loading | 是否加载中状态 | boolean | — | false |
disabled | 是否禁用状态 | boolean | — | false |
icon | 图标类名 | string | — | — |
疑难杂症
跨域问题
- 描述:No ‘Access-Content-Allow-Origin’ header is present on the requested requested resource
- https://github.com/RekingZhang/axios-jsonp
- https://github.com/RekingZhang/axios-jsonp/tree/master/dist
https导向
- 描述:This request has been blocked; the content must be served over HTTPS.
- 加上:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
,http链接自动转换成http - 去掉协议标识
http: