前提
Vue
- 进度: 第23节
Vue2文档教程: https://v2.cn.vuejs.org/v2/guide/
https://v2.cn.vuejs.org/v2/guide/index.html
导入:
new Vue
- Vue实例和容器 一对一
<!-- 1. 插值语法{{}} 常用于html标签中 -->
<!-- 2. v-bind: 常用于标签属性中 -->
<div id="root">
<h1>{{new Date()}}</h1>
<h1>{{name}}</h1>
<!-- v-bind: 可简写为 : -->
<p><a :href="url" target="_blank">我的博客</a></p>
</div>
<script>
// 关闭生产环境提示
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: "#root",
data: {
name: "Hello Vue",
url: "https://www.yujing.fit"
}
})
</script>
数据绑定
<div id="app">
<p>单向数据绑定:<input type="text" :value="text"></p>
<!-- v-model只能用在表单类标签中的value属性, v-model:value 可简写为 v-model -->
<p>双向数据绑定:<input type="text" v-model="text"></p>
</div>
<script>
new Vue({
el: "#app",
data:{
text: "Tiam"
}
})
</script>
挂载方式
<div id="app">
{{text}}
</div>
<script>
const vm = new Vue({
// 函数式写法 data:function() { } , 可简写为以下(推荐)
data() {
return {
text: "Tiam"
}
}
})
// 挂载
vm.$mount("#app");
console.log(vm);
let number = 18;
let person = {
name: "luo",
}
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, // 是否可枚举(不可枚举 颜色较淡)
// writable: true, // 控制属性是否可更改
// configurable: true, // 控制属性是否可删除
// 每当有人读取person的age时,自动调用
get() {
return number;
},
set(value) {
console.log("被修改了为" + value);
number = value;
}
})
console.log(person);
数据代理 | 数据劫持
- 理解其作用
<div id="app">
<div>{{name}}</div>
<!-- v-on: 可简写为 @ -->
<button v-on:click="change">求求你,点点我</button>
<button @click="method1('参数1',$event)">调用 method1 </button>
</div>
<script>
Vue.config.productionTip = false;
// (数据代理: 通过vm对象来代理data对象中的属性的操作, 更加方便的操作data中的数据)
let data = {
name: "湖北师范大学",
address: "黄石港区"
}
const vm = new Vue({
el: '#app',
// data中数据是通过 Object.defineProperty 方法定义的
data,
methods: {
change(event) {
console.log(event);
// 获取标签中的数据
console.log(event.target.innerText);
console.log(data);
// 指向当前Vue实例
console.log(this);
this.name = this.address;
},
// 不推荐写箭头函数
method1: (param, event) => {
// 箭头函数中的this指向window对象, 是静态的
console.log(this);
console.log(param);
console.log(event);
}
}
})
// 在_data中做了 数据劫持
console.log(vm._data === data); // true
</script>
事件修饰符
<div id="app">
<h2>Vue中的6个事件修饰符(常见前3个)</h2>
<ul>
<li>1. prevent 阻止默认事件</li>
<li>2. stop 阻止事件冒泡 , 从子元素到父元素冒泡</li>
<li>3. once 事件只触发一次</li>
<li>4. capture 使用事件的捕获模式 , 捕获(事件)行为从父元素到子元素</li>
<li>5. self 只有event.target是当前操作的元素才出发事件 , 即点击 其子元素不会触发</li>
<li>6. passive 事件的默认行为立即执行, 无需等待时间回调执行完毕, 就是刚调用的函数还没执行完, 又被触发了, 就会等待函数执行完, 卡住调用的行为.
使用passive后就不会等待函数执行完, 执行调用行为</li>
</ul>
<p>修饰符可链式调用eg: @click.prevent.stop.once 添加多个事件</p>
<a href="https://yujing.fit" @click.prevent="jumpToMyBlog">俺的博客儿</a>
两个滚动条事件
@scroll
@wheel
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
jumpToMyBlog(e){
alert("欢迎!");
// 阻止事件的默认行为 等同于 @click.prevent, 即不执行跳转
// e.preventDefault();
}
},
})
</script>
键盘事件
<div id="app">
<h1>键盘事件</h1>
<h2>@keydown: 键盘被按下后触发</h2>
<h2>@keyup: 键盘被按下后不触发, 松开后触发(一般常用这个)</h2>
<h2>您刚刚输入了:{{info}} </h2>
<input type="text" @keyup.ctrl.enter="showInfo" placeholder="输入后 按下Ctrl+回车后打印信息">
<h2>您按下了: {{key}}, 其键盘码(ASCII码)为{{code}} </h2>
<input type="text" @keydown="showkey" placeholder="打印你按下的键盘">
<!-- 捕获特定的键 -->
<h3>常用按键别名</h3>
<ol>
<ul>回车 => enter</ul>
<ul>删除(包括Back和Delete两个键) => delete</ul>
<ul>退出 => esc</ul>
<ul>空格 => space</ul>
<ul>换行 => tab (适合使用keydown, 否则会失效)</ul>
<ul>上 => up</ul>
<ul>下 => down</ul>
<ul>左 => left</ul>
<ul>右 => right</ul>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
info: "",
key: "",
code: ""
},
methods: {
showInfo: function (e) {
// 等同于 @keyup.enter 输入回车后触发
// if (e.keyCode !== 13) return;
console.log(e.target.value);
this.info = e.target.value;
},
showkey(e) {
// 不推荐使用键盘码keyCode, 因为不同键盘的键盘码可能不同, keyCode已被废弃.
console.log("您输入了" + e.key, e.keyCode);
this.key = e.key;
this.code = e.keyCode;
}
}
})
</script>
计算属性computed
<div id="app">
<label for="na">姓: <input id="na" type="text" v-model="na"></label><br>
<label for="me">名: <input id="me" type="text" v-model="me"></label><br>
<span>姓名:【{{na}}-{{me}}】 </span><br>
<span>插值语法 调用函数 返回值(效率不高): 【{{fullName()}} 】，每次使用都会调用,【{{fullName()}}】</span><br>
<span>使用计算属性computed读取的: 【{{fillName}} 】第一次读取后会做缓存,下次使用不再调用 【{{fillName}}】 </span><br>
<span>简写 {{fillName1}} </span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
na: "陈",
me: "思宇",
},
methods: {
fullName() {
console.log("methods被调用");
return this.na + '-' + this.me;
}
},
// 计算属性: 要用的属性不存在, 通过 已有的属性计算而来
computed: {
fillName: {
// 当有人读取时, 自动调用 或者所依赖的数据改变时， 也会被调用
get() {
console.log("computed被调用");
return this.na + '-' + this.me;
},
// 无set时不能直接更改fillName
set(value) {
// 做分割逻辑 ... 只能通过修改其依赖的属性去修改
// this.na = value;
// this.me = value;
}
},
// 简写
fillName1() {
return this.na + this.me;
}
}
})
</script>
监听属性watch
<div id="app">
<h1>小明:"你是真{{info}} ", {{count}} </h1>
<!-- 调用方法实现 -->
<button @click="sayReal">说真话1</button>
<!-- 推荐只写简单的一句逻辑, 虽然可以写很多句语句 -->
<button @click="isReal=!isReal;count++">说真话2</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
isReal: false,
count: 0,
},
methods: {
sayReal() {
this.isReal = !this.isReal;
}
},
computed: {
info() {
return this.isReal ? "笨比" : "好看";
}
},
// 监视属性
watch: {
// 需要监视的属性(数据), 也可以监测计算属性 eg: info
isReal: {
// 初始化时是否调用, 默认被改变时调用
immediate: true,
handler(newValue,oldValue){
console.log(oldValue+"被改为了"+newValue);
}
}
}
})
// 监视方式二
vm.$watch('isReal',{
// 监测后 ...
handler(){
}
})
</script>