vue的学习旅程第一阶段

文章目录1.vue简介(1)几个关键词(2)小特点(3)MVVM(4)vue的指令(5)vue的生命周期(6)vue的属性(7)vue的过渡和动画(8)过滤器的使用2.vue搭建(1)vue脚手架搭建(2)vue项目打包与发布(3)组件间的通讯（4）3.vue中使用ajax(1)vue-resource(2)axios4.vue的UI组件库1.vue简介(1)几个关键词模板数据绑定组件化虚拟DOM

林夕m0420

173人浏览 · 2020-08-24 15:37:11

林夕m0420 · 2020-08-24 15:37:11 发布

文章目录

1.vue简介

(1)几个关键词

模板
数据绑定
组件化
虚拟DOM
MVVM模式

(2)小特点

vue可以轻松的引入插件或者第三方库（十分便捷丫）
很便捷，体积小，适合做移动端/pc端开发

(3)MVVM

model:模型，数据对象
view：视图，模板页面
viewModel：视图模型，是vue的实例
视图层通过数据绑定获取到model中的数据，当视图中有发生改变vue的实例会监听到改变，从而来修改model中数据
在这里插入图片描述

(4)vue的指令

v-model
能够监听用户的输入，并更新数据

<body>
	<div id="demo">
		<input type="text" v-model="msg" />
		<p>{{msg}}</p>
	</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
	el:"#demo",
	data:{
		msg:'abc'
	}
})
</script>
</body>

v-bind
指定变化的属性值，强制数据绑定
完整写法v-bind:xxx="yyy"，简洁写法:xxx="yyy"

<div id="demo">
	<a v-bind:href="url">我的链接</a>
	<!--简写-->
	<a :href="url">我的链接</a>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
	el:"#demo",
	data:{
		url:'http://www.baidu.com'
	}
})

v-on
绑定指定事件名的回调函数
完整写法v-on:click="yyy"，简洁写法@click="yyy"

<div id="demo">
	<button @click="test">提交</button>
	<button v-on:click="test">提交</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
	el:"#demo",
	methods:{
		test(){
			alert("提交成功")
		}
	}
})

v-if与v-else
当条件不成立时子节点不会被解析

<body>
		<div id="demo">
			<p v-if="ok">使用成功</p>
			<p v-else>使用失败</p>
			
			<hr>
			<p v-show="ok">书写成功</p>
			<p v-show="!ok">书写失败</p>
			
			<button @click="ok = !ok">切换</button>
		</div>
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#demo',
				data:{
					ok:true
				}
			})
		</script>
	</body>

v-show
（例子代码与v-if合并）
v-if与v-show的区别：
当用于隐藏时，v-show是通过改变元素的display的block和none来实现的，而v-if则是因为不满足条件时不被解析
v-for
用于数组或对象的遍历
遍历数组

<body>
	<div id="demo">
		<ul>
			<li v-for="(p,index) in persons" :key="index">
			{{index}}--{{p.name}}--{{p.age}}
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#demo',
			data:{
				persons:[
					{name:'one',age:10},
					{name:'two',age:11},
					{name:'three',age:12},
				]
			}
		})
	</script>
</body>

遍历对象

<body>
	<div id="demo">
		<ul>
			<li v-for="(item,key) in persons[1]" :key="key">
			{{key}}--{{item}}
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#demo',
			data:{
				persons:[
					{name:'one',age:10},
					{name:'two',age:11},
					{name:'three',age:12},
				]
			}
		})
	</script>
</body>

v-text
能更新元素的文本内容
v-html
能识别传入文本的标签
v-cloak
当网速较慢时，数据还未显示出来时，会出现页面显示源代码的现象，使用v-cloak来解决这个问题，即使数据还未加载出来，也不会显示源代码
ref
唯一的指示标识，可以使用属性找到它

（7-10代码案例）

<body>
		<div id="demo">
			<p v-cloak>{{content}}</p>
			<p v-text="content"></p>
			<p v-html="content"></p>
			<p ref="msg">1234</p>
			<button type="button" @click="show">提示</button>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			new vue({
				el:"#demo",
				data:{
					content:'<a href="http://www.baidu.com">百度一下</a>'
				},
				methods:{
					show(){
						alert(this.$refs.msg.innerHTML)
					}
				}
			})
		</script>
	</body>

(5)vue的生命周期

首先瞅一瞅官方给出的vue生命周期图示
在这里插入图片描述
注意点：不可以使用箭头函数来定义生命周期钩子
beforeCreate:
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created:
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用
beforeMount:
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用
Mounted:
实例被挂载之后调用
beforeUpdate:
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
beforeDestroy:
实例销毁之前调用。在这一步，实例仍然完全可用
destroyed:
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

(6)过滤器的使用

对要显示的数据进行特定的格式化后再显示

2.vue搭建

(1)vue脚手架搭建

安装 vue-cli
npm install -g vue-cli （global 全局安装）

搭建项目
vue init webpack mydemo（名称）

  步骤:
  1）Project name  项目名称
  2）Project description  项目描述
  3）Author 作者
  4）Vue build  编译（选第一个）
  5）Install vue-router  是否安装路由(y)
  6）Use ESlint to lint  your code 语法检查(n)
  7）set up unit tests 单元测试 （n）
  8）setup e2e tests (n)
  9）Yes,use npm (选)

cd mydemo1 要进入文件夹
npm install （判断是否装依赖包软件）
npm run dev 运行项目

(2)组件间的通讯

1.通讯的其中之一props

使用这种方法进行通讯，用于父组件向子组件传递数据，如果需要向非子组件传递时，需要借助父组件进行；同时此种方法需要逐层传递（父传子，父不能直接向子代的子代进行传递）

声明属性的props有三种方式：

仅指定名称props:{'addContent','name'}
指定名称与类型props:{addContent:Function,name:String}

指定名称，类型，必要性，默认值

props:{
	addContent:{
		type:Function,
		required:true
		//default:xxx
	}
}

3.vue中使用ajax

(1)vue-resource

npm install vue-resource --save

// 引入模块
import VueResource from 'vue-resource'
// 使用插件
Vue.use(VueResource)
// 通过vue/组件对象发送ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback
console.log(response.statusText) //错误信息
})

(2)axios

npm install axios --save

// 引入模块
import axios from 'axios'
// 发送ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})