Vue2+Vue3学习笔记

Vue基础介绍

下载并安装vue.js

https://v2.cn.vuejs.org/https://v2.cn.vuejs.org/

https://v3.cn.vuejs.org/ 会重定向到Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

从v2过渡到v3

在F盘创建v2+v3学习笔记

并用VSCODE打开

第一个VUE程序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue程序</title><!-- 引入Vue.js 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 --><script src="../js/vue.js"></script>
</head><body><div id="app"></div><script>// 创建一个简单的 Vue 实例/*第一步：创建Vue实例1. 为什么要用 new Vue()，直接调用 Vue() 函数不行吗？不行，因为直接调用 Vue() 函数，不创建实例的话，会出现以下错误：Vue is a constructor and should be called with the `new` keyword2. 关于 Vue 构造函数的参数：options？options 翻译为选项。options 翻译为多个选项。Vue框架要求这个 options 参数必须是一个纯粹的 JS 对象：{}在 {} 对象中可以编写大量的 key:value 对。一个 key:value 对就是一个配置项。主要是通过 options 这个参数来给 Vue 实例指定多个配置项。3. 关于 template 配置项：template 翻译为：模板。template 配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。什么是模板语句？ 模板语句里可以有{{}}Vue 框架自己制定了一些具有特殊含义的特殊符号。Vue 的模板语句是 Vue 框架自己搞的一套语法规则。我们写 Vue 模板语句的时候，不能乱写，要遵守 Vue 框架的模板语法规则。模板语句可以是一个纯粹的 HTML 代码，也可以是 Vue 中的特殊规则。也可以是 HTML 代码 + Vue 的特殊规则。*/var app = new Vue({template: '<h1>hhhh</h1>'})//  第二步：$mount方法 将vue实例 挂载 到指定的元素上app.$mount('#app')</script>
</body></html>

直接点的写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue程序</title><!-- 引入Vue.js 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 --><script src="../js/vue.js"></script>
</head><body><div id="app">{{message}}</div><script>var app = new Vue({el:'#app',data:{message:'Hello Vue'}    })</script>
</body></html>

第二个Vue程序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><!-- 指定挂载位置 --><div id="app"></div><!-- Vue程序 --><script>/*关于template配置项：1. template后面指定的是模板结构，但是模板结构的行为只有留一个替补位。2. 只要data中的数据发生变化，模板中的{{}}一定会重新赋值。（只要data变，template就会重新解析，重新渲染）3. 使用template配置项目,指定挂载单位的元素会被替换,且template中的内容只能有一个根元素。*/new Vue({// 传统的// template: '<h1>{{msg}}</h1><h1>动力节点老杜</h1>',template: `<div><h1>{{msg}}</h1><h1>{{name}}</h1></div>`,data: {msg: 'Hello Vue!!',name: '动力节点老杜！！'}}).$mount("#app")</script>
</body></html>

第三个Vue程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../js/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><script>/*不适用template,效果是一样的*/var app=new Vue({el:  '#app',data:{msg:'Hello Vue!'},})</script></body>
</html>

解决控制台提示问题

就是说你在开发模式下

第一种方式引入生产环境的js即可

第二种方式使用Vue全局配置

偶尔会失效

Vue Devtools插件安装

可视化地查看 Vue 应用内部的结构

然后把版本7的插件关闭或者移除

简单使用Vue devtools

暗的时候,说明前端不是Vue写的亮的时候就是Vue写的

F12可以看到多了Vue选项卡

一个app下可能有多个组件 Root是根组件注意有时候数据含有中文时候第三个数据有可能显示不出来,可能插件对于中文不是很友好

Vue实例和容器的关系:1V1

容器，指的是 HTML 页面中，Vue 要控制的那个元素。

上面的例子中

<div id="app"></div>

这里的 <div id="app"></div> 就是Vue实例的容器。
Vue 程序启动后，会接管这个 div，然后在这个范围内操作页面、渲染数据、绑定事件。

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例和容器关系:一夫一妻制</title><script src="../js/vue.js"></script>
</head><body><div id="app"></div><div id="app2"></div><script>var app = new Vue({el: '#app',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})var app2 = new Vue({el: '#app2',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})</script></body></html>

Vue核心技术

模板语法之插值表达式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板语法之插值语法{{}}</title><script src="../js/vue.js"></script>
</head><body><div id="app"><h1>{{ name }}</h1><h2>{{ age }}</h2></div><script>/*在 Vue 中，data里的每一个属性（比如 name 和 age）都会被单独跟踪（响应式）。当你修改 age 时，Vue 只会重新渲染那些用了 {{age}} 的地方的DOM节点。用到 {{name}} 的部分，因为 name 没有变化，Vue 就不会重新渲染这部分 DOM。*/var app = new Vue({el: '#app',data: {name: '张三',age: 18}})</script>
</body></html>

模板语法之指令 v-xxx

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02.模板语法之指令V-XXX</title><script src="../js/vue.js"></script>
</head><body><!--指令	功能简述v-text	设置文本内容v-html	设置 HTML 内容v-show	控制元素显示/隐藏（通过 display）v-if / v-else-if / v-else	条件判断渲染v-for	遍历数组或对象v-on	绑定事件监听，比如点击v-bind	动态绑定属性（如 src、href）v-model	双向数据绑定（表单控件）v-slot	插槽（子组件插入内容）v-pre	跳过编译，直接原样输出v-cloak	避免 Vue 未编译时闪烁v-once	只渲染一次，之后数据改变也不更新--><!-- 准备容器 --><div id="app"><!-- v-text：设置文本内容 --><h2 v-text="textMsg"></h2><!-- v-html：设置 HTML 内容 --><div v-html="htmlMsg"></div><!-- v-show：通过 display 显示/隐藏元素 --><p v-show="isShow">v-show 显示的内容</p><!-- v-if / v-else-if / v-else：条件渲染 --><div v-if="score >= 90">优秀</div><div v-else-if="score >= 60">及格</div><div v-else>不及格</div><!-- v-for：遍历列表 --><ul><li v-for="(item, index) in list" :key="index">{{ item }} &nbsp {{index}}</li></ul><!-- v-on：绑定事件 --><button v-on:click="clickMe">点击按钮</button><hr>hr是分割线<hr><br>br是换行<br><!-- v-bind：动态绑定属性 --><img v-bind:src="imgUrl" alt="图片示例" width="200"><br><!-- _self	默认值，在当前窗口/标签页打开链接	本页面跳转_blank	在新窗口/新标签页打开链接	新页面打开，不影响当前页面_parent	在父框架（iframe 父窗口）打开链接	少用，主要用于嵌套页面_top	在最顶层框架打开链接（跳出所有 iframe）	少用，跳出多层嵌套其他自定义名字（如 frameName）	打开到指定的 <iframe> 窗口	用于多窗口控制（高            级用法）--><a v-bind:href="url" target="_blank">点击跳转到百度</a><!-- v-model：表单双向绑定 --><input type="text" v-model="inputValue"><p>你输入了：{{ inputValue }}</p><!-- v-slot：插槽 (基础用法) --><child-component><template v-slot:default><p>我是插入到子组件里的内容</p></template></child-component><!-- v-pre：跳过编译 --><h1>下面的{{}}表达式不会被解析</h1><div v-pre>{{ textMsg }}</div><!-- v-cloak：防止闪现未编译的 Mustache 标签 --><div v-cloak>{{ cloakedText }}</div><!-- v-once：只渲染一次 --><h2 v-once>{{ onceText }}</h2></div><script>Vue.component('child-component', {template: '<div><slot></slot></div>'});new Vue({el: '#app',data: {textMsg: 'Hello v-text',htmlMsg: '<strong style="color: red;">Hello v-html</strong>',isShow: true,url: 'https://www.baidu.com',score: 75,list: ['苹果', '香蕉', '橘子'],imgUrl: 'https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg',inputValue: '',cloakedText: '这段文字被 v-cloak 控制',onceText: '只渲染一次的内容'},methods: {clickMe() {alert('按钮被点击了！');}}});</script></body></html>

v-bind说明

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="app"><!-- v-bind 指令后面的参数属性可以随便写(语法是通过的,但是该标签里有没有该属性,是否被浏览器识别就是问题了) 页面上不会展示任何内容虽然可以随便写,但是浏览器识别不了,就没有意义--><span v-bind:xyz="msg"></span><span xyz="msg"></span></div><script>/*v-bind 指令详解1. 这个指令是干啥的？它可以让 HTML 标签的某个属性的值产生动态的效果。2. v-bind 指令的语法格式：<HTML 标签 v-bind:参数 = "表达式"></HTML 标签>3. v-bind 指令的编译原理？编译前：<HTML 标签 v-bind:参数 = "表达式"></HTML 标签>编译后：<HTML 标签 参数 = "表达式的执行结果"></HTML 标签>注意两项：第一：在编译的时候 v-bind 后面的 “参数名” 会被编译为 HTML 标签的 “属性名”第二：表达式会关联 data，当 data 发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。*/new Vue({el: '#app',data: {msg: 'Hello Vue!'}})</script>
</body></html>

v-model说明

v-bind 和 v-model 的区别和联系
1. v-bind单向绑定,v-model双向绑定
2. v-model只能使用在
<input>
<select>
<textarea>
components

<!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>v-model指令详解</title><!-- 安装 Vue --><script src="../js/vue.js"></script>
</head><body><!-- v-bind 和 v-model 的区别和联系1. v-bind单向绑定,v-model双向绑定2. v-model只能使用在<input>  <select><textarea>components--><!-- 准备一个容器 --><div id="app"><!-- v-bind 指令 --><input type="text" v-bind:value="name1"><br><!-- v-model 指令 --><input type="text" v-model:value="name2"><br><!-- v-model 指令 --><input type="text" v-model="name3"></div><!-- vue 程序 --><script>new Vue({el: '#app',data: {name1: 'zhangsan',name2: 'wangwu',name3: 'lisi'}})</script></body></html>

简述前端MVVM分层思想

<!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>初识MVVM分层思想</title><script src="../js/vue.js"></script>
</head><body><!-- V --><div id="app">{{message}}</div><!-- 1. MVVM 是什么？M：Model（模型/数据）V：View（视图）VM：ViewModel（视图模型），VM 是 MVVM 中的核心部分。（它起到一个核心的非常重要的作用。）MVVM 是目前前端开发领域当中非常流行的开发思想。（一种架构模式。）目前前端的大部分主流框架都实现了这个 MVVM 思想，例如 Vue、React 等。2. Vue 框架遵循 MVVM 吗？虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。Vue 框架本身也是符合 MVVM 思想的。3. MVVM 模型当中倡导了 Model 和 View 进行分离，为什么要分离？假如 Model 和 View 不分离，使用最原始的原生的 JavaScript 代码写项目：如果要数据发生任意的改变，接下来我们需要编写大量繁琐的操作 DOM 元素的 JS 代码。将 Model 和 View 分离之后，出现了一个核心 VM，这个 VM 把所有的脏活累活给做了。也就是说：当 Model 发生改变之后，VM 自动去更新 View。当 View 发生改动之后，VM 自动去更新 Model。我们再也不需要编写操作 DOM 的 JS 代码了。
--><script>//vue实例VMvar app = new Vue({el: '#app',//Mdata: {message: 'Hello Vue!'}})</script>
</body></html>

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>Vue实例的属性</title><script src="../js/vue.js"></script>
</head><body><!-- 1. 通过 Vue 实例都可以访问哪些属性？(通过 app 都可以 app.什么)Vue 实例中的属性很多，有的是以 $ 开头，有的是以 _ 开头。所有以 $ 开头的属性：可以看做是公开的属性，这些属性是供程序员使用的。所有以 _ 开头的属性：可以看做是私有的属性，这些属性是 Vue 框架底层使用的。一般我们程序员很少使用。通过 app 也可以访问 Vue 实例对象的原型对象上的属性，例如：app.$delete ...2. app指的是Vue的引用,可以是任何名字  随便自己定义,不一定要用app, vm  xxx都可以--><div id="app"><h1>{{ msg }}</h1></div><script>let dataObj = {msg: 'Hello Vue!'}const app = new Vue({el: '#app',data: dataObj})// 按说 msg 是 dataObj 对象的属性console.log('dataObj 的 msg:', dataObj.msg);// 为什么 msg 属性可以通过 vm 来访问呢？// 这是因为 Vue 框架底层使用了 “数据代理机制”// 要想搞明白数据代理机制,必须有一个基础知识点学会:Object.defineProperty()console.log('app 的 msg:', app.msg);</script></body></html>