Vue.js 2.0 基础知识 之 学习笔记

系列文章目录

提示:阅读本章之前,请先阅读目录


文章目录

  • 系列文章目录
  • 前言
  • 初识Vue.js
  • 实例化Vue,让Vue运行起来
  • favicon图标加载问题
  • Vue模板支持js表达式
  • 一个Vue容器只会接管一个元素
  • 一个元素只能被一个Vue接管
  • 指令语法 v-bind: 和 简写 :
  • el的两种写法
  • data的两种写法
  • MVVM模型
  • 数据代理,Obeject.defindProperty
  • 事件处理
  • 修饰符
  • 键盘事件
  • 计算属性
  • 计算属性和方法组合应用
  • watch监视器
  • watch 异步函数
  • class样式绑定
  • style样式绑定
  • v-if和v-show
  • v-for,列表渲染
  • v-for的key作用
  • 列表过滤
  • 列表过滤
  • Vue监视数据
  • Vue表单数据
  • Vue的过滤器filters
  • v-text 文本指令
  • v-html
  • v-cloak
  • v-once
  • v-pre
  • 自定义指令
  • 更新日志


前言

Vue.js 2.0 最基础的内容,笔记

vue3: https://github.com/Panyue-genkiyo/vue3-learning
vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance
vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning


初识Vue.js

我们通过引入Vue.js,就实现最简单的使用vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
Hello world!
<script type="text/javascript">
  Vue.config.productionTip = false;
</script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第1张图片

通过设置,Vue.config.productionTip = false;
来控制,控制台的提示,这个提示,是指生产环境,最好使用生产版本的vue

Vue.js 2.0 基础知识 之 学习笔记_第2张图片

Vue.js 2.0 基础知识 之 学习笔记_第3张图片

实例化Vue,让Vue运行起来

通过new Vue()来实例化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第4张图片

favicon图标加载问题

我是在Visual Studio Code 启动的,Open With Live Server,所以,就是带有端口号的访问页面
Vue.js 2.0 基础知识 之 学习笔记_第5张图片

Vue.js 2.0 基础知识 之 学习笔记_第6张图片
会报一个,找不到图标的错误提示,这个是浏览器默认的行为

我们可以通过按住Shift+刷新,强制刷新,就可以看到这个报错


如果,我们是直接以文件绝对路径访问,则不存在这个问题

Vue.js 2.0 基础知识 之 学习笔记_第7张图片

Vue.js 2.0 基础知识 之 学习笔记_第8张图片

Vue模板支持js表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
    <h1>Now Time: {{Date.now()}}</h1>
    <h1>Add: {{1+1}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第9张图片

一个Vue容器只会接管一个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee"
      }
    });
    const x1 = new Vue({
      "el": "#root",
      "data": {
        "name": "xmfboss"
      }
    });
  </script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第10张图片

一个元素只能被一个Vue接管

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div class="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <div class="root">
    <h1>My Name: {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": ".root",
      "data": {
        "name": "smobee"
      }
    });
  </script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第11张图片

指令语法 v-bind: 和 简写 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>My Name: {{name}}</h1>
    <input type="text" v-bind:value="comment">
    <!-- 简写 -->
    <input type="text" :value="result">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    // 实例化
    const x = new Vue({
      "el": "#root",
      "data": {
        "name": "smobee",
        "comment": "hello, smobee",
        "result": 123456
      }
    });
  </script>
</body>
</html>

Vue.js 2.0 基础知识 之 学习笔记_第12张图片

el的两种写法

const v = new Vue({
	// 这是第一种写法,注释掉了
	// el: "#root",
	data: {
		name: "test"
	}
})
// 这是第二种写法
v.$mount("#root")

data的两种写法

第一种
new Vue({
	el: "#root",
	data: {
		name: "hello"
	}
})
第二种
new Vue({
	el: "#root",
	data: function(){
		// 这里的this,是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})
第二种简写
new Vue({
	el: "#root",
	data(){
		// 这里的this,是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})
错误示范,如果使用箭头函数,this会是window实例
new Vue({
	el: "#root",
	data: () => {
		// 这里的this,是vue实例本身
		console.log(this)
		return {
			name: "hello"
		}
	}
})

MVVM模型

Vue.js 2.0 基础知识 之 学习笔记_第13张图片

数据代理,Obeject.defindProperty

Vue.js 2.0 基础知识 之 学习笔记_第14张图片

let number = 100;
let person = {
	name: "xiaofeng",
	sex: "man"
}
Object.defindProperty(person, 'age', {
	value: number,
	enumberable: true, // 控制是否可被遍历(枚举)
	writable: true, // 控制是否可被修改
	configurable: true, // 控制是否可被删除
	get: function() {
		console.log("有人正在读取我")
		return number
	},
	set(val){
		console.log("有人正在设置我的值是:", value)
	}
})


事件处理

Vue.js 2.0 基础知识 之 学习笔记_第15张图片

<button v-on:click="onClickOpen">我是按钮1</button>
<button v-on:click="onClickClose("hello", $event)">我是按钮1</button>

const vm = new Vue({
	el: "#root",
	data: {
		name: "hello",
		onClickEdit() {
			console.log("其实我放到这里,也可以调用,只不过会使用数据代理的方式")
		}
	},
	methods: {
		onClickOpen(event) {
			console.log("这里的this就是vm本身", this === vm)
			console.log("这里的event,是元素本身", event)
			console.log("我可以输出按钮的文字", evnet.innertText)
		},
		onClickClose(str, evnet) {
			console.log("我传递了一个字符串", str)
			console.log("我可以把event传递进来", event)
		},
		onClickTest: (event) => {
			console.log("这里的event,箭头函数,是window对象", event)
		}
	}
})

修饰符

prevent:阻止默认事件
stop:阻止冒泡
once:只执行一次
capture:使用事件的捕获模式
self:只有event.target是自己的时候,才会触发
passive:事件的默认,立即执行,无需等待事件回调后执行

<a href="baidu.com" @click.prevent="open">prevent 只执行click事件</a>

<div @click="open">
	<p @click.stop="open">我是里面,阻止了冒泡,不会影响外面</p>
</div>

<div @click="open">
	<a href="baidu.com"  @click.stop.prevent="open">我是里面,阻止了冒泡,并组织默认事件</a>
</div>

<button @click.once="open">我只会被调用一次哦</butoon>

<div @click.self="open">
	只有event.target是外面的元素,才会触发click
	<p @click="open">我是里面</p>
</div>

scroll,是滚动条,响应事件,键盘上下滑动和鼠标滚轮,就会触发onClick事件
<ul @scroll="onClick">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

开启了passive之后,会先滚动滚动条,如果没有开启,会等onClick执行完后才会滚动滚动条
<ul @wheel.passive="onClick">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

onClick() {
	for (int i = 0; i < 100000; i++) {
		console.log(i)
	}
}

键盘事件

// keyup是指,按键按下并放开
<input type="text" @keyup="onClick"></input>
// keydown是指,按键按下就触发
<input type="text" @keydown="onClick"></input>

// 示例
<input type="text" @keyup.enter="onClick"></input>
<input type="text" @keyup.Enter="onClick"></input>
<input type="text" @keyup.esc="onClick"></input>
<input type="text" @keyup.space="onClick"></input>
<input type="text" @keyup.delete="onClick"></input>
<input type="text" @keyup.up="onClick"></input>
<input type="text" @keyup.down="onClick"></input>
<input type="text" @keyup.left="onClick"></input>
<input type="text" @keyup.right="onClick"></input>
// tab比较特殊,因为会移出焦点
<input type="text" @keydown.tap="onClick"></input>
// 两个单词组成的,要用-隔开
<input type="text" @keyup.caps-lock="onClick"></input>
// 系统按键,需要搭配第二键使用
<input type="text" @keyup.ctrl="onClick">同时按下ctrl+其他按键,并放开</input>
<input type="text" @keyup.alt="onClick"></input>
<input type="text" @keyup.shift="onClick"></input>
<input type="text" @keyup.meta="onClick">win键</input>
// 小提示,组合键的
<input type="text" @keyup.ctrl.y="onClick">同时按下ctrl+y,并放开</input>
// 还可以自定义名称
Vue.config.keyCodes.huichejian = 13

onClick(e) {
	// 输出当前按键的编码
	console.log(e.keyCode)
	if (e.keyCode === 13) {
		console.log("回车键")
	}
	console.log("当前输入框的value值", e.target.value)
}

计算属性

// 计算属性,更新数据的情况:
// 1. 首次加载
// 2. 依赖的数据发生了变化,计算属性也会重新计算一次
// 底层原理,是用了Object.defindProperty的getter和setter方法
<div>{{fullname}}</div>

const vm = Vue({
	el: "#root",
	data: {
		name: "A",
		name2: "B"
	},
	computed: {
		fullname: {
			get(){
				return this.name + this.name2
			},
			set(){
				console.log("有人想改我的值")
			}
		}
		// 简写,只实现get
		fullname() {
			return this.name + this.name2
		}
	}
})

计算属性和方法组合应用

<span>{{message}}</span>
<div @click="isValue = !isValue">测试</div>
<div @click="onChangeValue">测试</div>
<div @click="window.alert("我可以用此方法,调用window参数")">测试</div>

const vm = Vue({
	el: "#root",
	data: {
		isValue: true,
		window
	},
	computed: {
		message() {
			return isValue ? "A" : "B"
		}
	},
	methods: {
		onChangeValue() {
			this.isValue = !this.isValue
		}	
	}
})

watch监视器

const vm = Vue({
	el: "#root",
	data: {
		name: "123"
	},
	computed: {
		newName() {
			return this.name + '123'
		}
	},
	watch: {
		name: {
			// 第一次会自动调用一次
			immediate: true,
			handler(newValue, oldValue) {
				console.log("我被改变了", newValue, oldValue)
			}
		},
		newName: {
			// 我也可以同样监听计算属性
			immediate: true,
			handler(newValue, oldValue) {
				console.log("我被改变了", newValue, oldValue)
			}
		},
		// 简写
		newName(newValue, oldValue) {
			console.log("我被改变了", newValue, oldValue)
		}
	}
})
// 第二种写法
vm.$watch('name', {
	immediate: true,
	handler(newValue, oldValue) {
		console.log("我被改变了", newValue, oldValue)
	}
})

高级用法

const vm = Vue({
	el: "#root",
	data: {
		numbers: {
			a: 1,
			b: 2
		}
	},
	watch: {
		// 单独监听,a的变化
		'numbers.a': {
			handler() {
				console.log("我被更改了")
			}
		},
		// 使用深度监听器
		numbers: {
			deep: true,
			handler() {
				console.log("我被更改了")
			}
		}
	}
})

watch 异步函数

const vm = Vue({
	el: "#root",
	data: {
		name: "hello"
	},
	watch: {
		name() {
			// 等一秒钟再执行,这里使用箭头函数是因为,setTimeout是Vue帮我们调用js去运行的,异步的,所以箭头函数在调用的时候,就会自动去找外层的主体,就是name(),而外层的name()就是Vue管理的
			setTimeout(()=> {
				console.log("Hello 我执行了")
			}, 1000)
			// 如果是普通函数,那么,普通函数就是浏览器管理的
			setTimeout(fucntion(){
				console.log("Hello 我执行了")
			}, 1000)
		}
	}

})

class样式绑定

<div class="test-class" :class="newClass">单纯绑定</div>
<div class="test-class" :class="objectClass">通过对象绑定,true为开启</div>
<div class="test-class" :class="arrClass">数组绑定,有几个则绑定几个</div>

const vm = Vue({
	el: "#root",
	data: {
		newClass: "helloAClass",
		objectClass: {
			A: false,
			B: true,
			C: false
		},
		arrClass: ["a", "b", "c"]
	}

})

style样式绑定

<div class="test-class" :style="newStyle">单纯绑定</div>
<div class="test-class" :style="objectStyle">通过对象绑定,true为开启</div>
<div class="test-class" :style="arrStyle">数组绑定,有几个则绑定几个</div>

const vm = Vue({
	el: "#root",
	data: {
		newStyle: "font-size: 10px",
		objectStyle: {
			fontSize: "20px",
			color: "red"
		},
		objectStyle2: {
			fontSize: "20px",
			color: "red"
		},
		arrStyle: [objectStyle, objectStyle2]
	}

})

v-if和v-show

<div v-show="false"> 实际上,只是给style加一个属性:display: none</div>
<div v-if="true">只有条件符合,才会渲染</div>
// template 只能搭配v-if使用,并且不影响结构
<template v-if="true">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
</template>

v-for,列表渲染

// 遍历数组,testArr=[1,2,3,4]
<div>
	<span v-for="(data, index) in testArr" :key="index">
		{{data}}
	</span>
</div>
// 遍历数组,data=[1,2,3,4],in可以写成of
<div>
	<span v-for="(data, index) of testArr" :key="index">
		{{data}}
	</span>
</div>
// 遍历对象,testObject={name: "123", age: 12, sex="1"}
<div>
	<span v-for="(value, key) of testObject" :key="key">
		{{key}}:{{value}}
	</span>
</div>
// 遍历字符串,testString="hello"
<div>
	<span v-for="(str, index) of testString" :key="index">
		{{str}}
	</span>
</div>
// 遍历指定次数
<div>
	<span v-for="(number, index) in 10" :key="index">
		{{number}}
	</span>
</div>

v-for的key作用

Vue.js 2.0 基础知识 之 学习笔记_第16张图片
Vue.js 2.0 基础知识 之 学习笔记_第17张图片

列表过滤

// 用watch监听
const vm = Vue({
	el: "#root",
	data: {
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		],
		newList: []
	},
	watch: {
		search: {
			// 这里开启immediate,是因为首次会先调用一次watch
			immediate: true,
			handler(value) {
				this.newList = this.list.filter((obj) => {
					return obj.name.indexof(value) !== -1
				})
			}
		}
	}
// 用computed计算属性
const vm = Vue({
	el: "#root",
	data: {
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		]
	},
	computed: {
		// 这里用计算属性,能够实现和watch一样的效果,是因为里面依赖了this.search,search一旦被更新,计算属性就会调用一次
		comList() {
			return this.list.filter((obj) => {
				return obj.name.indexof(this.search) !== -1
			})
		}
	}
})

列表过滤

// 用computed计算属性
const vm = Vue({
	el: "#root",
	data: {
		// 0 原,1 升序,2降序
		sortType: 0
		search: "",
		list: [
			{name: "ABCD", age: 18},
			{name: "1236", age: 18},
			{name: "EDFGBD", age: 18},
			{name: "QAZWSXED", age: 18}
		]
	},
	computed: {
		// 这里用计算属性,能够实现和watch一样的效果,是因为里面依赖了this.search,search一旦被更新,计算属性就会调用一次
		comList() {
			const arr = this.list.filter((obj) => {
				return obj.name.indexof(this.search) !== -1
			})
			// 这里进行排序处理
			if (this.sortType > 0) {
				arr.sort((p1, p2) => {
					return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
				})
			}
			return arr
		}
	}
})

Vue监视数据

Vue.js 2.0 基础知识 之 学习笔记_第18张图片

data: {
	// 数组下标,是没有添加setter和getter的,所以,直接修改数组下标,vue是监视不到变化,页面数据就不会刷新
	list: [
		// 只有对象里面的属性,才会添加getter和setter
		{name: "hello", age: 18}
	]
}

// 要想实现让vue监视到数组的变化,要使用指定的7个函数
// 或者使用vue提供的方法,Vue.set(),但是只能对data下面属性的属性进行添加,不能直接添加到data

Vue表单数据

Vue.js 2.0 基础知识 之 学习笔记_第19张图片

// 修饰符
<input v-model.trim="text">去除前后空格</input>
<input type="number" v-model.number="text">配合type使用,只能输入数字</input>
<input v-model.lazy="text">失去焦点后,响应</input>

Vue的过滤器filters

// 单个过滤器
<div>{{name | testFilter}}</div>
// 单个过滤器,并且传值
<div>{{name | test2Filter("hello")}}</div>
// 串联过滤器
<div>{{name | testFilter | newFilter}}</div>

filers: {
	testFilter(val) {
		return "修改" + val
	},
	testFilter(val, text) {
		return "修改" + val + text
	},
	newFilter(val) {
		return "串联" + val
	}
}

// 全局过滤器
Vue.filter("globalFilter", function(val) {
	return val
})

v-text 文本指令

Vue.js 2.0 基础知识 之 学习笔记_第20张图片

<div v-text="name">这里面的div内容无效,会被v-text直接替代</div>

data: {
	name: "

会直接输出文本内容,相当于格式化

"
}

v-html

<div v-html="text">会直接解析内容</div>

data: {
	text: "

hello

"
}

v-cloak

Vue.js 2.0 基础知识 之 学习笔记_第21张图片

<div v-cloak>在vue没有加载之前,可以配合css隐藏掉</div>

css样式
[v-cloak] {
	display: none;
}

v-once

Vue.js 2.0 基础知识 之 学习笔记_第22张图片

// 只会读取一次值
<div v-once>{{name}}</div>

v-pre

<div v-pre>直接跳过vue的解析,提高效率</div>

自定义指令

// 1. 初始化会触发自定义指令的刷新
// 2. 所在的模板,被重新解析,自定义指令也会重新刷新
<div v-hello="name">我是特殊内容</div>


data: {
	name: "hahaha"
},
directives: {
	// 简写
	hello(elements, binding) {
		elements.innerText = "My name is:" + binding.value
	}
	// 高级写法
	hello: {
		bind(elements, binding) {
			console.log("初始化调用")
		},
		inserted(elements, binding) {
			console.log("插入元素时,调用")
		},
		update(elements, binding) {
			console.log("更新数据时,调用")
		}
	},
	// 有多个单词这样写
	'hello-xixi-haha'(elements, binding) {
		elements.innerText = "My name is:" + binding.value
	}
}

// 全局指令
Vue.directives("hello", function(elements, binding) {
	elements.innerText = "My name is:" + binding.value
})


更新日志

提示:将会持续优化更新

20221203
Vue模板支持js表达式
一个Vue容器只会接管一个元素
一个元素只能被一个Vue接管
指令语法 v-bind: 和 简写 :

20221202
初识Vue.js
实例化Vue,让Vue运行起来
favicon图标加载问题

你可能感兴趣的:(Vue,vue.js,javascript,前端)