「vue.js」学习笔记

0
tec

why Vue?

什么是Vue?

logo

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/post
  • then方法中的两个回调函数,成功时触发第一个,失败时触发第二个
  • 通过回调函数的形参可以获取响应内容,或错误信息
  • axios回调函数中的this已经改变,无法访问到data中的数据
  • 调用变量的时候,把this保存起来,回调函数中直接使用保存的this即可
  • 和本地应用的最大区别就是改变了数据来源

jsonp

<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 — —

疑难杂症

跨域问题

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:


2491 字