前端学习笔记之-VUE框架学习-Vue核心
2024-05-16 22:26:27
第一章：Vue核心
1.1.Vue简介
官网介绍：https://cn.vuejs.org/v2/guide/
1.2.初识Vue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTG-8" /><title>初始vue</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好 一个容器 --><div id="my"><h1>hello 小付</h1></div><!-- 使用vue动态展示名称 --><div id="my01"><!-- {{}} 是vue的一种语法，后面介绍 --><h1>hello {{name}}</h1><h1>他的年龄是：{{age}} </h1><!-- js代码 --><h1>{{money+12}}</h1></div><script type="text/javascript">// 创建vue实列const x = new Vue({//el:document.getElementById("my");el:'#my01',//el：用于当前vue实列用于那个容器，值通常为css选择器字符串//data 中用于存储数据，用于el指定的容器去使用，值我们暂时先写成一个对象data:{name:'小花',age:18,money:12}});</script><!--
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.my容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.my容器里的代码被称为【Vue模板】;-->
</body>
</html>
总结：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.my容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.my容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’: "b’
2.js代码(语句)
(1).if(){}
(2). for(){}
1.3. 模板语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板语法</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好 一个容器 --><div id="my"><h1>插值语法，用于解析标签体内容</h1><h2>你好：{{name}}</h2><h2>欢迎就读：{{school.name}}</h2><hr/><h1>指令语法，用于解析标签（包括:标签属性、标签体内容、绑定事件.....）</h1><!-- v-bind 可以给标签中的任何属性绑定值 --><a v-bind:href="url">点我百度一下</a><!-- v-bind 简写 --><a :href="url.toUpperCase()">点我百度一下2</a></div><script type="text/javascript">new Vue({el:'#my',data:{name:"小付",url:"https://www.baidu.com/",school:{name:"家里蹲大学"}}});</script><!-- Vue模板语法有2大类:
1.插值语法:功能:用于解析标签体内容。写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....） 。举例: v-bind:href="xxx”或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。-->
</body>
</html>
总结：
Vue模板语法有2大类:
1.插值语法:功能:用于解析标签体内容。写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。2.指令语法:功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....） 。举例: v-bind:href="xxx”或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
1.4.数据绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据绑定</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好 一个容器 --><div id="my"><!-- 单向数据绑定：<input type="text" v-bind:value="name"><hr/>双向数据绑定：<input type="text" v-model:value="age"> --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><hr/>双向数据绑定：<input type="text" v-model="age"><!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上--><h2 v-model:x = "name">你好呀</h2></div>
</body>
<script type="text/javascript">new Vue({el:'#my',data:{name:"小付",age:18}});
</script><!--
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.备注:1.双向绑定一般都应用在表单类元素上（如:input、 select等)2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。-->
</html>
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.备注:1.双向绑定一般都应用在表单类元素上（如:input、 select等)2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
1.4.1 el与data的两种写法(组件的知识提前学习)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>el与data的两种写法 </title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好 一个容器 --><div id="my"><h1>你好：{{name}}</h1></div>
</body>
<script type="text/javascript">// el 的写法
/* const v = new Vue({// el:'#my', 第一种写法data:{name:"小付"}});console.log(v);//等3秒钟在去绑定mysetTimeout(()=>{v.$mount('#my'); //第二种写法，意思就是将当前的vue对象挂载在 my这个容器},3000);*///data 的写法const v = new Vue({el:'#my',// data:{// name:"小付" //第一种写法// }//data 的第二种写法： 函数式//data:function(){//data函数必须是function 不能是=>()函数，否则this就是Windowsdata(){//简写console.log(this);//此处的this是Vue的实列return{name:'小付'}}});</script><!-- data 与el的2种写法
1.el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm. $mount( ' #root ')指定el的值。
2.data有2种写法(1).对象式(2).函数式如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错.
3.一个重要的原则:由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。-->
</html>
data 与el的2种写法
1.el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm. $mount( ' #root ')指定el的值。
2.data有2种写法(1).对象式(2).函数式如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错.
3.一个重要的原则:由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
1.5.MVVM模型
1.M:模型(Model) :对应data中的数据
2.V:视图(View)︰模板
3.VM:视图模型(ViewModel) : Vue实例对象
MVVM模型总结
1.M:模型(Model) : data中的数据
2.V:视图(View) :模板代码
3. VM:视图模型(ViewModel): Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>mvvm</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好 一个容器 --><div id="my01"><!-- {{}} 是vue的一种语法，后面介绍 --><h1>hello {{name}}</h1><h1>他的年龄是：{{age}} </h1><!-- js代码 --><h1>{{money+12}}</h1><!-- vm中的属性 --><h1>vm中的属性:{{$options}}</h1></div><script type="text/javascript">// 创建vue实列const vm = new Vue({el:'#my01',data:{name:'小花',age:18,money:12}});// 打印下vmconsole.log(vm);</script>
</body>
</html>
1.6 数据代理
1.6.1回顾Object.defineProperty方法
<!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>回顾Object.defineProperty方法</title>
</head>
<body><script type="text/javascript">let number = 100;let persion = {name:'张三',sex:'男',} //这样的方式添加的属性不可枚举，就是Object.keys（）获取不到这个age属性，而且不可遍历获取//但是添加 enumerable:true 就可以了Object.defineProperty(persion,'age',{value:18,enumerable:true, //控制属性是否可以枚举，默认值是falsewritable:true, //控制属性是否可以被修改,默认值是falseconfigurable:true,//控制属性是否可以被删除});//当有人读取person的money属性时，get函数(getter)就会被调用，且返回值就是money的值Object.defineProperty(persion,'money',{get:function getMoney(){console.log('getMoney被调用了')return number},//简写
/* get(){console.log('getMoney被调用了')return number} *///当有人修改person的money属性时，get函数(getter)就会被调用，且会收到修改的具体值set(value){console.log('有人修改了money的值，且值是',value)number = value}})console.log(persion)console.log(Object.keys(persion))</script></body>
</html>
1.6.2何为数据代理
<!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>何为数据代理</title>
</head>
<body><!--数据代理:通过一个对象代理对另一个对象中属性的操作（读/写) --><script type="text/javascript">let obj = {x:100}let obj2 = {y:200}//通过obj2来操作xObject.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})</script>
</body>
</html>
1.6.3 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>Document</title><!-- 引入VUE --><script type="text/javascript" src="../vue.js"></script>
</head><body><div id="my"><h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1></div></body>
<script type="text/javascript">const vm = new Vue({el: '#my',data: {name: "家里蹲大学",address:"重庆巴南"}})console.log(vm)
</script></html>
图示数据代理：
总结：
1.Vue中的数据代理;
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
1.6.事件处理
<!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><!-- 引入VUE --><script type="text/javascript" src="../vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="my"><h2>欢迎来找{{name}}玩儿</h2><!-- v-on:绑定事件 --><button v-on:click="show">点我提示信息(不传参)</button><!-- 简写 @--><button @click="show">点我提示信息2（不传参）</button><!-- 调用show3传递参数 --><button @click="show3(66,$event)">点我提示信息3（传参）</button></div></body>
<script type="text/javascript">const vm = new Vue({el: '#my',data: {name: "小付",address: "重庆巴南"},methods: {show(event) {alert('好开心啊')console.log(event.target.innerText)console.log(this === vm) //此处的this就是vm},show3(number, event) {alert('好开心啊3')console.log(event.target.innerText)console.log(number, event)},}})console.log(vm)
</script></html>
总结：
事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm 上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;
1.6.2 事件修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>mvvm</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}#one{height: 50px;background: aquamarine;}#two{height: 50px;background: forestgreen;}.box1{padding: 5px;background: bisque;}.box2{padding: 5px;background: fuchsia;}.list{width: 200px;height: 200px;background: crimson;overflow: auto;}li{height: 100px;}</style>
</head>
<!--
Vue的事件修饰符:
1.prevent: 阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.captnre:使用事什的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件:
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
-->
<body>
<!-- 准备好 一个容器 -->
<div id="my01"><h1>hello {{name}}</h1>
<!-- 1.prevent: 阻止默认事件（常用）; --><a href="https://www.baidu.com/" @click.prevent="show">点我提示信息</a><!-- 2.stop:阻止事件冒泡（常用）;--><div id="one" @click="show"><button @click.stop="show">点我提示信息2</button></div><!-- 3.once:事件只触发一次（常用）;--><button @click.once="show">点我提示信息3</button><!-- 4.captnre:使用事什的捕获模式; --><div class="box1" @click.capture="show2(1)">div1<div class="box2" @click="show2(2)">div2</div></div><!-- 5.self:只有event.target是当前操作的元素时才触发事件:--><div id="two" @click.self="showTwo"><button @click="showTwo">点我提示信息3</button></div><!-- 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
scroll:滚动条滚动事件
wheel：鼠标滚动轮事件
--><ul @scroll="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul><!-- passive 能让滚条本事的事件先执行，后才去执行demo中的事情 --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div><script type="text/javascript">// 创建vue实列const vm = new Vue({el:'#my01',data:{name:'小花'},methods:{show(e){alert('你好呀')},show2(msg){console.log(msg)},showTwo(e){console.log(e.target)},demo(e){console.log('demo')for (let i = 0; i <100000; i++) {console.log("#")}console.log("累坏了")},}});console.log(vm);
</script>
</body>
</html>
总结
Vue的事件修饰符:
1.prevent: 阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.captnre:使用事什的捕获模式;
5.self:只有event.target是当前操作的元素时候才触发事件:
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
1.6.3 键盘事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>mvvm</title><!-- 引入VUE --><script type="text/javascript" src="../js/vue.js"></script>
</head><body>
<!-- 准备好 一个容器 -->
<div id="my01"><h1>hello {{name}}</h1>
<!-- @keyup.enter只有敲回车的时候才触发事件 --><input type="text" placeholder="按下回车提示输入" @keyup.enter="show"><input type="text" placeholder="按下回车提示输入" @keydown.tab="show"></div><script type="text/javascript">// 创建vue实列const vm = new Vue({el:'#my01',data:{name:'小花'},methods: {show(e) {//判断是否按下回车 回车的keycode为13 js编码// if (e.keyCode!==13) returnconsole.log(e.target.value)console.log(e.key,e.keyCode)},}});console.log(vm);
</script>
</body>
</html>
1.Vue中常用的按键别名;
回车 =>enter
删除=>delete(捕获删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab (特殊 必须配合keydown去使用)
上=>up
下=> down
左=> left
右=> right
2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3.系统修饰键（用法特殊): ctr1、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
1.7.计算属性与监视
1.8. class与style绑定
1.9.条件渲染
1.10.列表渲染
1.11.收集表单数据
1.12.Vue实例生命周期
1.13.过渡&动画
1.14.过滤器
1.15.内置指令与自定义指令
1.16.自定义插件
前端学习笔记之-VUE框架学习-Vue核心相关推荐
- Hadoop学习笔记—18.Sqoop框架学习
Hadoop学习笔记-18.Sqoop框架学习 一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据 ...
- Hadoop学习笔记—15.HBase框架学习（基础知识篇）
Hadoop学习笔记-15.HBase框架学习(基础知识篇) HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase ...
- Hadoop学习笔记—16.Pig框架学习
Hadoop学习笔记-16.Pig框架学习 一.关于Pig:别以为猪不能干活 1.1 Pig的简介 Pig是一个基于Hadoop的大规模数据分析平台,它提供的SQL-LIKE语言叫Pig Latin, ...
- 【学习笔记】Mybatis框架学习及个人感悟
文章目录 一.简介 1.1.什么是Mybatis 1.2.持久化 1.3.为什么需要Mybatis 二.第一个Mybatis程序 2.1.搭建环境 2.2.创建一个子模块 2.3.编写代码 2.4.测 ...
- hbase java框架_Hadoop学习笔记—15.HBase框架学习（基础实践篇）
一.HBase的安装配置 1.1 伪分布模式安装 伪分布模式安装即在一台计算机上部署HBase的各个角色,HMaster.HRegionServer以及ZooKeeper都在一台计算机上来模拟. 首先 ...
- 老张 .NetCore与Vue 框架学习
缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
- Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
- Vue框架学习（七）
Vue框架学习07 一.全局配置 1.productionTip 2.silent 3.devtools 二.组件进阶 1.mixins 2.render 3.createElement 一.全局配置 ...
- 前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
- java mvc框架代码_JAVA技术学习笔记：SpringMVC框架（内附入门程序开发代码）
原标题:JAVA技术学习笔记:SpringMVC框架(内附入门程序开发代码) JavaEE体系结构包括四层,从上到下分别是应用层.Web层.业务层.持久层.Struts和SpringMVC是Web层的 ...
最新文章
- js 拖动层示例[转]
- 安卓4安装Linux,如何在 Android 手机上安装 Ubuntu 13.04
- 阅读架构漫谈（三）笔记
- java并发编程学习5--forkJoin
- Ocean的礼物（线段树单点修改）
- 基于VHDL的可变速彩灯控制器的设计
- win7(64位)php5.5-Apache2.4-mysql5.6环境安装
- centos 卸载 jdk
- 发那可g10_fanuc系统中的G10
- Java 使用itextpdf添加图片印章到PDF
- Latex命令、符号、公式、数学符号编辑
- C++ float转换int
- 404报错：The origin server did not find a current representation for the target resource解决的两种办法
- 动手安装centOS6
- 如何购买云服务器----以华为云服务器为例
- 【Educoder】Python学习记录（二）
- 温度测量基于c语言,基于PN结的温度测量系统设计论文（C语言）--189876772.doc
- ipynb 文件转 py
- 在linux安装java过程_挑战Java在Linux上安装过程分享
- python 从4399获取小游戏