Vue学习实践笔记（二）

FED_AF

于 2020-04-30 20:32:39 发布

阅读量161

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/FED_AF/article/details/105868031

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Demo1——列表添加删除、关键字搜索

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<div>
			<div><h3>添加品牌</h3></div>
			<div>
				<label>Id:
					<input type="text" v-model="id">
				</label>
				<label>Name:
					<input type="text" v-model="name">
				</label>
				<button @click="add">添加</button>
				<label>关键字搜索:
					<input type="text" v-model="keywords">
				</label>
			</div>
		</div>
		<table>
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in search(keywords)" :key="item.id">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.ctime"></td>
					<td><a href="" @click.prevent="del(item.id)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				id: '',
				name: '',
				keywords: '',
				list: [
					{ id: 1, name: '奔驰', ctime: new Date() },
					{ id: 2, name: '宝马', ctime: new Date() }
				]
			},
			methods: {
				add() {
					var car = { id: this.id, name: this.name, ctime: new Date() }
					this.list.push(car)
				},
				del(id) {
					//方法一：
					this.list.some((item, i) => {
						if (item.id == id) {
							this.list.splice(i, 1)
							// 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
							return true
						}
					})
					//方法二：
/*					var index = this.list.findIndex(item => {
						if (item.id == id) {
							return true
						}
					})
					this.list.splice(index, 1)*/
				},
				search(keywords) {
					// 方法一：
					var newList = []
					this.list.forEach(item => {
						if (item.name.indexOf(keywords) != -1) {
							newList.push(item)
						}
					})
					return newList
					// forEach，some，filter，findIndex都属于数组的新方法，都会对数组中的每一项进行遍历，执行相关的操作
					// 方法二：
					/*return this.list.filter(item => {
						// ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')，如果包含，返回true，否则返回false
						// contains
						if(item.name.includes(keywords)) {
							return item
						}
					})*/
				}
			}
		})
	</script>
</body>
</html>

Demo2——全局过滤器、格式化时间、私有过滤器、字符串的padStart方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<p>{{ msg }}</p>
		<p>{{ msg | msgFormat1 }}</p>
		<p>{{ msg | msgFormat2 }}</p>
		<p>{{ msg | msgFormat3('沙雕') }}</p>
		<p>{{ msg | msgFormat4('沙', '雕') }}</p>
		<p>{{ msg | msgFormat4('沙', '雕') | test }}</p>
		<p>{{ new Date() }}</p>
		<p>{{ new Date() | dateFormat('yyyy-mm-dd') }}</p>
		<p>{{ new Date() | dateFormat }}</p>
	</div>
	<br>
	<div id="app2">
		<p>{{ new Date() | dateFormat }}</p>
	</div>
	<script type="text/javascript" charset="UTF-8">
		// 全局过滤器
		Vue.filter('msgFormat1', function(msg) {return msg.replace('普通', '沙雕')})
		Vue.filter('msgFormat2', function(msg) {return msg.replace(/普通/g, '沙雕')})
		Vue.filter('msgFormat3', function(msg, msg1) {return msg.replace(/普通/g, msg1)})
		Vue.filter('msgFormat4', function(msg, msg1, msg2) {return msg.replace(/普通/g, msg1 + msg2)})
		Vue.filter('test', function(msg) {return msg + '。'})
		Vue.filter('dateFormat', function(dateStr, pattern="") {
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			//前面补全：padStart(总长度, 要填充的字符串)
			//后面补全：padEnd(总长度, 要填充的字符串)
			var m = (dt.getMonth() + 1).toString().padStart(2, '0')
			var d = (dt.getDate()).toString().padStart(2, '0')
			if (pattern.toLowerCase() === 'yyyy-mm-dd') {
				return `${y}-${m}-${d}`
			} else {
				var hh = dt.getHours()
				var mm = dt.getMinutes()
				var ss = dt.getSeconds()
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		})
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '在这普通的一天，我穿着普通的鞋，很普通，地走在这普通的街'
			},
			methods: {
			}
		})
		var vm2 = new Vue({
			el: '#app2',
			data: {
			},
			methods: {
			},
			// 私有过滤器
			filters: {
				dateFormat: function (dateStr) {
					return '私有过滤器与全局过滤器同名时，会覆盖全局过滤器，即就近原则'
				}
			}
		})
	</script>
</body>
</html>

Demo3——自定义按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
	<p>{{ msg }}</p>
	<input placeholder="敲回车查看vue提供的按键" type="text" @keyup.enter="show">
	<input placeholder="敲F2查看F2对应的代号" type="text" @keyup.113="showf2">
	<input placeholder="敲F2查看F2对应的代号" type="text" @keyup.f2="showf2">
	</div>
	<script type="text/javascript" charset="UTF-8">
		// 自定义全局按键修饰符
		Vue.config.keyCodes.f2 = 113
		var vm = new Vue({
			el: '#app',
			data: {
				msg: ''
			},
			methods: {
				show() { this.msg = ' vue支持enter、tab、space、esc、delete、up、down、left、right ' },
				showf2() { this.msg = 113 }
			}
		})
	</script>
</body>
</html>

Demo4——自定义全局指令、私有指令、指令函数的简写形式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<!-- v-focus不是vue自带的指令，通过自定义全局指令创建，要有v-前缀 -->
		<input placeholder="" type="text" v-focus v-color="'blue'" >
		<p v-fontweight="900" v-fontsize="'28'">打工是不可能打工的</p>
	</div>
	<script type="text/javascript" charset="UTF-8">
		// 自定义指令的函数，参数1为指令名，不需要v-前缀，但是在调用的时候必须要有v-前缀
		// 参数2是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作
		Vue.directive('focus', {
				// 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
			bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
				// el.focus()
				// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用，因为一个元素只有插入DOM之后才能获取焦点
			},
			inserted: function (el) { // inserted表示元素插入到DOM中的时候，会执行inserted函数，触发一次
				el.focus()
				// 和js行为有关的操作，最好在inserted中去执行，防止js行为不生效
			},
			update: function (el) { // 当VNode更新的时候，会执行updated，可能会触发多次
			}
		})
		//自定义一个设置字体颜色的指令
		Vue.directive('color', {
			// 样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
			// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
			bind: function(el, binding) { // 和样式相关的操作，一般都可以在bind中执行
				// el.style.color = 'red'
				el.style.color = binding.value;
			}
		})

		var vm = new Vue({
			el: '#app',
			data: {
			},
			methods: {
			},
			directives: { //自定义私有指令
				'fontweight': {
					bind: function(el, binding) {
						el.style.fontWeight = binding.value
					}
				},
				'fontsize': function(el, binding) { //这种写法等同于把代码同时写到了bind和updated中去
					el.style.fontSize = parseInt(binding.value) + 'px'

				}
			}
		})
	</script>
</body>
</html>

Demo5——Vue实例的生命周期及内置函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
	<p id="p">{{ msg }}</p>
	<button @click="msg='ok'">修改msg</button>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: "初始化data属性"
			},
			methods: {
				show() { console.log('初始化methods属性') }
			},
			beforeCreate() { // 刚创建Vue对象时，只有默认的一些生命周期函数和默认的事件
				// console.log(this.msg)  此时this.msg为undefined
				// this.show()  此时this.show()不存在
			},
			created() { // 初始化Vue对象的data和methods等属性
				console.log(this.msg)
				this.show()
			},
			beforeMount() { // Vue虚拟DOM模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
				console.log(document.getElementById('p').innerText)

			},
			mounted() { // 内存中的模板已经被渲染到页面中，实例已经被完全创建好，从创建阶段进入到运行阶段
				console.log(document.getElementById('p').innerText)

			},
			beforeUpdate() { // 页面还没有被更新，但data已经变更
				console.log('页面数据' + document.getElementById('p').innerText)
				console.log('data数据' + this.msg)
			},
			updated() { // 根据data中的数据在内存中更新DOM树，然后把最新的DOM树渲染到页面中去，view和model的数据已经保持同步
				console.log('页面数据' + document.getElementById('p').innerText)
				console.log('内存数据' + this.msg)
			},
			beforeDestroyed() { // Vue实例从运行阶段进入到销毁阶段，但还没有执行销毁操作，data、methods、过滤器和指令等都处于可用状态
			},
			destroyed() { // Vue实例已经被完全销毁，所有data、methods、过滤器和指令等都已不可用
			}
		})
	</script>
</body>
</html>

Demo6——使用vue-resource实现ajax（get、post、jsonp请求）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<!-- vue-resourc.js依赖于vue.js，要放在Vue.js后面 -->
	<script type="text/javascript" src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js" charset="UTF-8"></script>

</head>
<body>
	<div id="app">
		<button @click="vget">通过vue-resource发起get请求</button>
		<button @click="vpost">通过vue-resource发起post请求</button>
		<button @click="vjsonp">通过vue-resource发起jsonp请求</button>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
			},
			methods: {
				vget() {
					this.$http.get('https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js').then(function (result) {
						console.log(result)}
					)
				},
				vpost() { // 手动发起的post请求默认没有表单格式，所以有的服务器处理不了
					this.$http.post('https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js', {}, { emulateJSON: true }).then(result => {
						console.log(result.body)}
					)
				},
				vjsonp() {
					this.$http.jsonp('js/vue.js').then(result => {
						console.log(result)}
					)
				}
			}
		})
	</script>
</body>
</html>

Demo7——使用axios实现ajax（get、post请求）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<!-- axios.js依赖于vue.js，要放在Vue.js后面 -->
	<script type="text/javascript" src="js/axios.js" charset="UTF-8"></script>

</head>
<body>
	<div id="app">
		<button @click="aget">通过axios发起get请求</button>
		<button @click="apost">通过axios发起post请求</button>
		<button @click="agets">通过axios发起并发请求</button>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				url: "js/axios.js",
				url1: "js/vue.js"
			},
			methods: {
				aget() { // get请求，其中params用来传递参数
					// 会请求失败，去掉params就成功了
					axios.get(this.url, { params: { ID: 12345 } }).then(response => { // 请求成功
						console.log(response)
					}).catch(function (error){ // 请求失败
						console.log('请求失败')
					})
				},
				apost() { // post请求，不用关键字直接传递参数
					// 会请求失败，因为ajax下post无法请求静态资源文件
					axios.post(this.url, { ID: 12345 }).then(response => { // 请求成功
						console.log(response)
					}).catch(function (error){ // 请求失败
						console.log('请求失败')
					})
				},
				agets() {
					axios.all([axios.get(this.url), axios.get(this.url1)]).then(axios.spread((ax, vu) => {
						console.log(ax);
						console.log(vu);
					})).catch(function (error){ // 请求失败
						console.log('请求失败')
					})
				}
			}
		})
	</script>
</body>
</html>