Vue教程1 【Vue核心】
Vue.js 中文文档 (bootcss.com)
使用vue插件
GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.
关闭生成环境Tip
⛔️ 此笔记适用于
vue 2.x！！！
vue核心
helloworld
<!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>Document</title><script src=https://cn.vuejs.org/js/vue.js></script>
</head>
<body><div id="main"><h2>{{name}}</h2></div><script>Vue.config.productionTip = false;new Vue({el:'#main',data:{name:'胡梓卓'}})</script>
</body>
</html>
模板语法
插值语法
解析标签体内容，可读取data中的所有属性
插值表达式{{js表达式}} 也可以写vue实例上所有的
⚠️ 一个Vue实例只能接管一个容器
- 如果有多个容器，只对第一个有效
- 如果有多个实例，只对第一个vue实例生效
指令语法
解析标签（标签属性、标签体内容、绑定事件…）
<div id="main"><h2>{{name}}</h2><a v-bind:href="jsInit.url">vuejs文件</a><!-- 简写 --><a :href="jsInit.url">vuejs文件</a></div>
<script>Vue.config.productionTip = false;new Vue({el:'#main',data:{jsInit:{url:'https://cn.vuejs.org/js/vue.js'},name:'胡梓卓'}})</script>
数据绑定
<!-- 单向数据绑定 --><input type="button" v-bind:value="name"><input type="button" :value="name"><br><!-- 双向数据绑定 --><input type="button" v-model:value="name"><input type="button" v-model="name">
v-bind 数据只能从data流向页面
v-model一般只用于表单元素(input、select)
el与data的两种写法
<script>Vue.config.productionTip = false;const v = new Vue({// el:'#main',// data:{// jsInit:{// url:'https://cn.vuejs.org/js/vue.js'// },// name:'胡梓卓'// }data: function () {return {jsInit: {url: "https://cn.vuejs.org/js/vue.js",},name: "胡梓卓"};},});v.$mount("#main");</script>
MVVM
m 模型
v 视图
vm 视图模型 数据绑定 dom监听
数据代理
Object.defineProperties
let number = 18;let person = {name: "胡梓卓",sex: "男",};Object.defineProperty(person, 'age', {value: 21,enumerable: true, //枚举，默认falsewritable: true, //可修改，默认falseconfigurable: true, //可删除，默认falseget: function () {return number;},set(value) {number = value;}});
通过vm对象来代理data对象中的属性的操作（get/set）
基本原理：通过
Object.defineProperty()把data对象中的所有属性添加到vm上，并添加getter/setter，在getter/setter内部去操作
事件处理
使用v-xxx / @xxx 绑定事件
事件的回调函数需要配置在methods中，会绑定在vue实例对象上
普通函数的this指向vue实例对象
@click="demo" @click="demo($event,params,...)" $event会把事件对象传过去
<!-- 事件处理 --><input type="button" value="点击提示" @click="tip($event)" />
<script>Vue.config.productionTip = false;const v = new Vue({methods: {tip(event) {console.log(event.target);},},});</script>
事件修饰符
.prevent
阻止默认事件
<input type="button" value="点击提示" @click.prevent="tip($event)" />
<script>new Vue({tip(e){e.preventDefault();}});
</script>
.stop
阻止事件冒泡
<div @click="demo"><input type="button" @click.stop="demo($event)"/></div>
<script>new Vue({demo(e){e.stopPropagation();}});
</script>
.once
事件只触发一次
.capture
使用事件的捕获方式,在捕获阶段就处理事件
.self
只有event.target是当前操作的元素才触发事件
冒泡触发的target永远都是哪个触发的元素
只有操作的是谁才触发，可用于阻止冒泡
.passive
事件的默认行为立即执行，无需等待回调函数执行完成
@scroll 页面滚动 先执行滚动条滚动，再执行回调函数滚动条到底，不会触发 @whell 鼠标滚轮滚动 先执行回调函数，再执行滚动条滚动只要滚轮滚动就出触发
可链式写法 .stop.prevent
键盘事件
@keydown
@keypress
@keyup
(1).enter .13.delete 删除键和退格键.esc.space.tab 需要配合@keydown使用，因为按下就切换走了.up 上.down 下.left 左.right 右
(2)ctrl,alt,shift.win(meta)@keyup 系统修饰键 + xxx ,释放xxx后，才触发@keydown 正常触发
(3)
keyCode
(4)
key
(5)
<input type="text" value="enter" @keydown.hz="tip($event)" />
<script>
Vue.config.keyCodes = {"kebab-case": 179,"hz": 13,
};
if(event.key=="Enter"){console.log(event.key); //Enter
}
</script>
.caps-lock 切换大小写 两个单词（命令首字母小写，加“-”）//
.ctrl.y 按下ctrl+y
计算属性
<div id="root"><input type="text" name="" id="" v-model:value="v1" /><br /><input type="text" name="" id="" v-model:value="v2" /><div>{{v1}}{{v2}}</div><div>{{fullName()}}</div></div>
<script>new Vue({el: "#root",data: {v1: 1,v2: 2,},methods: {fullName() {return this.v1 + "-" + this.v2;},},});</script>
计算属性，有缓存
get()
- 初次读取
- 所依赖的数据发生变化
<div id="root"><input type="text" name="" id="" v-model:value="v1" /><br /><input type="text" name="" id="" v-model:value="v2" /><div>{{full_Name}}</div></div>
<script>computed: {full_Name: {get() {console.log("get被调用");return this.v1 + "-" + this.v2;},//vm.full_name='里-斯'set(value) {let arr = value.split("-");this.v1 = arr[0];this.v2 = arr[1];},},
</script>
计算属性会出现的vue实例上，即为一个属性，值是计算出来的
简写
不考虑修改，只展示
<script>computed: /*{full_Name:function(){console.log("get被调用");return this.v1 + "-" + this.v2;}*/full_name(){console.log("get被调用");return this.v1 + "-" + this.v2;}}
</script>
监视属性
监视属性必须存在才能监视
(1) new Vue时传入watch配置
(2) 通过vm.$watch监视
<script>const vm = new Vue({el: "#main",data: {flag: false,},methods: {changeWeather() {this.flag = !this.flag;}},computed: {},//(1)watch: {flag: {immediate: true, //初始化时加载handlerhandler(newValue, oldValue) {console.log("falg被修改了", newValue, oldValue);},},},});//(2)vm.$watch("flag", {immediate: true, //初始化时加载handlerhandler(newValue, oldValue) {console.log("flag被修改了", newValue, oldValue);},});</script>
深度监视
vue中的watch默认不监测对象内部值的改变
配置
deep:true可以监测对象内部值改变
<script>const vm = new Vue({el: "#main",data: {flag: false,number: {a: 1,b: 2,},},watch: {"number": {deep:true, //深度监视handler(newValue,oldValue) {console.log("number里面的a被修改了", newValue, oldValue);},},},});</script>
监视简写
不需要配置其他属性如immediate,deep时，使用
watch: {number(newValue,oldValue){console.log("number里面的a被修改了", newValue, oldValue);}
}
vm.$watch('flag',function(){console.log("flag被修改了", newValue, oldValue);})
watch与computed的区别
绑定class样式
(1)
字符串写法，:class(v-bind:class)=“字符串” 样式的类名不确认，需要动态指定(2)
数组写法，要绑定的样式数量不确定，名字也不确定<div :class="arr"></div> data:{arr:['className1','className2'] }(3)
对象写法，数量，类名相同，动态确定<div :class="obj"></div> data:{obj:{className1false,className2true} } }
绑定style样式
:style(v-bind:style)
对象写法 :style="{fontSize:xxx}" xxx是动态值
数组写法 :style="[a,b]" a,b是样式对象
样式对象：
条件渲染
v-show=xxxdisplay:none隐藏样式（xxx为布尔值）
v-if=xxx 删除结点,不展示的dom被移除。适用于切换频率较低的场景
v-else-if=xxx
v-else=xxx
<template v-if="i==1"><h2>我的</h2><h2>爱</h2><h2>好</h2>
</template>
列表渲染
v-for
展示列表数据
v-for="(item,index) in xxx" :key=“index”
可遍历数组，对象，字符串，指定次数
<ul><li>遍历数组</li><li v-for="(item, value) in arr" :key="value">姓名：{{item.sname}}，年龄：{{item.age}}</li><li>遍历对象</li><li v-for="(val, name) in object" :key="name">{{name}}:{{val}}</li><li>遍历字符串</li><li v-for="(element, index) in str" :key="index">{{index}}:{{element}}</li><li>遍历指定次数</li><li v-for="(number, inx) in 6" :key="inx">{{inx}}:{{number}}</li></ul>
key作用与原理
key的原理
列表过滤
“asdsf” 使用 “”（空字符串）indexOf 返回
0
<div id="root"><ul><input type="text" placeholder="请输入要查询的数据。。。" v-model="keyWord"/><li v-for="(item,index) in filterPersons">姓名：{{item.name}}--性别：{{item.sex}}--年龄：{{item.age}}</li></ul>
</div>
<script>new Vue({el: '#root',data: {keyWord: '',persons: [{id: '001', name: '马冬梅', sex: '女', age: '18'},{id: '002', name: '周冬雨', sex: '女', age: '19'},{id: '003', name: '周杰伦', sex: '男', age: '20'},{id: '004', name: '温兆伦', sex: '男', age: '21'}],filterPersons: []},method: {},watch: {keyWord: {immediate: true,handler(val) {this.filterPersons = this.persons.filter((p) => {return p.name.indexOf(val) !== -1;})}}},computed: {// filterPersons() {// return this.persons.filter((p) => {// return p.name.indexOf(this.keyWord) !== -1;// })// }}});
</script>
列表排序
<div id="root"><ul><input type="text" placeholder="请输入要查询的数据。。。" v-model="keyWord"/><input type="button" @click="sortType=0" value="原顺序"/><input type="button" @click="sortType=1" value="升序"/><input type="button" @click="sortType=2" value="降序"/><li v-for="(item,index) in filterPersons">姓名：{{item.name}}--性别：{{item.sex}}--年龄：{{item.age}}</li></ul>
</div>
<script>new Vue({el: '#root',data: {keyWord: '',sortType: '',persons: [{id: '001', name: '马冬梅', sex: '女', age: '23'},{id: '002', name: '周冬雨', sex: '女', age: '35'},{id: '003', name: '周杰伦', sex: '男', age: '34'},{id: '004', name: '温兆伦', sex: '男', age: '21'}],// filterPersons: []},method: {},watch: {// keyWord: {// immediate: true,// handler(val) {// this.filterPersons = this.persons.filter((p) => {// return p.name.indexOf(val) !== -1;// }).sort((a, b) => {//// })// }// }},computed: {filterPersons() {const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1;});if (this.sortType !== 0) {arr.sort((o1, o2) => {return this.sortType === 1 ? o1.age - o2.age : o2.age - o1.age;})}return arr;}}});
</script>
vue检测数据的原理
- vue会监视data中所有层次的数据
对象里面的数据改变
通过setter实现监视，且要在new Vue时就传入要检测的数据
对象中后追加的属性，Vue默认不做响应式处理
如果需要后添加的属性为响应式
Vue.set(target,propertyName/index,value) vm.$set(target,propertyName/index,value)
数组里面的数据改变
通过包裹数组更新元素的方法实现
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
修改数组元素
使用push(),shift(),unshift(),splice(),sort(),reverse()
Vue.set(),vm.$set()
Vue.set(),vm.$set() 不能给vm或vm的根数据对象添加属性
收集表单数据
<input type="text"> v-model收集value值<input type="radio"> v-model收集value值<input type="checkbox">
没有配置value属性，收集的就是checked（布尔值）
配置value属性
（1）v-model的初始值是非数组，收集的就是checked（布尔值）
（2）v-model的初始值是数组，收集的就是value组成的数组
修饰符
（1）v-model.lazy 失去焦点再收集数据
（2）v-model.number 输入字符串转化为有效的数字，一般配合type="number"使用
使用type="text"输入12df44，收集12
（3）v-model.trim 去除首尾空格
过滤器❌
Vue教程1 【Vue核心】相关推荐
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
- 【Vue教程】Vue.js推文
为什么前端工程师的需求这么大 我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...
- vue教程 pdf vue权威指南
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html 官方的文档 ...
- 好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
- 第九节：掌握vue的另一个核心：组件
连续几天没空写文章了,最近忙着弄一个小程序,经过几天的coding,终于在今天下午提交审核,等待审核中.... 大家久等了,是时候接着学习我们的vue基础系列教程了,第一节我们就介绍过,vue有两大核 ...
- Vue教程路由以及axios的使用
目录 前言 安装 目录结构 起步 Vue模板语法 Vue条件语句 Vue循环语句 Vue事件处理 Vue表单绑定 Vue组件 Prop Vue自定义事件.指令 **自定义事件** **自定义指令** ...
- 《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
目录: 一.前言 二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造 三.Vue的使用 1.Vue环境搭建 2 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- ChatGPT AI生成的VUE教程博客大纲
以下内容为AI生成 , 仅供参考学习 Vue教程博客的大纲 1. Vue.js 简介:了解 Vue.js 的概念和特点 2. 安装和配置:如何在你的项目中使用 Vue.js 3.Vue 模板语法:学习 ...
- vue教程——13 Vuex
vue教程--13 Vuex 一 什么是Vuex? 二 vuex核心组成模块 三 vuex初体验 四 getter用法----------怎么获取state中的值呢?(B组件怎么获取并监听state的 ...
最新文章
- Leetcode 145. 二叉树的后序遍历 (每日一题 20210930)
- P5367 【模板】康托展开
- IntelliJ IDEA使用（一）：创建maven web项目
- MySQL 中 delete 语句的子查询限制
- 怀旧服服务器怎么调整显卡性能,用顶级配置玩wow怀旧服是怎样的体验？
- c 类别构造函数需要包含所有成员吗_C++默认成员函数解析
- LeetCode 355. 设计推特（哈希map+set）
- 【LeetCode笔记】399. 除法求值（Java、图）
- Nagios 3.x 在线帮助中文版
- 如何写出好的Java代码？
- 判断循环双链表是否对称
- （33）Verilog HDL缩减运算
- linux安全策略查询代码,Linux多安全策略和动态安全策略框架模块代码分析报告(14)...
- 2020年领导最满意的可视化工具！分分钟做好数据报表，吊打python
- php 解析返回的xml,php解析xml的几种方式
- Heritrix 3.1.0 源码解析（二十八）
- C语言：ASCII码对照表
- mysql外键设置sql语句_数据库sql语句如何设置外键
- 计算机考试多少个小时,考驾照科一电脑刷几个小时
- 我的世界电脑正版服务器地址大全,《我的世界》服务器地址大全 各个服务器一览分享...
热门文章
- C语言面向过程与C++面向对象
- 生物信息学就是从统计和CS的community里借鉴合适的方法
- javascript 死循环
- 【多标签文本分类】SGM: Sequence Generation Model for Multi-Label Classification
- 五子棋html游戏代码与算法介绍
- 人脸检测--Grid Loss: Detecting Occluded Faces
- 语义分割DeepLab v2--DeepLab: Semantic Image Segmentation with Deep Convolutional Nets, Atrous Convolut
- 虚拟私有云网络VPC
- php如何查询数据是否存在,PHP判断数据库中的记录是否存在的方法，php数据库_PHP教程...
- Centos7安装Elasticsearch