关闭页面特效

VUE

1|0一、Vue 程序初体验


学习源:动力节点老杜课程

1|11.1 下载并安装 vue.js


第一步:打开 Vue2 官网,点击下图所示的“起步”:

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

image-20230531090014401

第二步:继续点击下图所示的“安装”

image-20230531090101947

第三步:在“安装”页面向下滚动,直到看到下图所示位置:

image-20230531090139962

第五步:安装 Vue: 使用 script 标签引入 vue.js 文件。就像这样:

1|21.2 第一个 Vue 程序


第一个 Vue 程序如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> var vue1 = new Vue({ template:"<h1>hello Vue</h1>" }) vue1.$mount("#div_1") </script> </body> </html>

效果

image-20230531090700565

对第一个程序进行解释说明:

  1. 当使用 script 引入 vue.js 之后,Vue 会被注册为一个全局变量。就像引入 jQuery 之后,jQuery 也会被注册为一 个全局变量一样。
  2. 我们必须 new 一个 Vue 实例,因为通过源码可以看到 this 的存在

image-20230531090845004

  1. Vue 的构造方法参数是一个 options 配置对象。配置对象中有大量 Vue 预定义的配置。每一个配置项都是 key:value 结构。一个 key:value 就是一个 Vue 的配置项。
  2. template 配置项:value 是一个模板字符串。在这里编写符合 Vue 语法规则的代码(Vue 有一套自己规定的语 法规则)。写在这里的字符串会被 Vue 编译器进行编译,将其转换成浏览器能够识别的 HTML 代码。template 称之为模板。
  3. Vue 实例的$mount 方法:这个方法完成挂载动作,将 Vue 实例挂载到指定位置。也就是说将 Vue 编译后的 HTML 代码渲染到页面的指定位置。注意:指定位置的元素被替换。
  4. ‘#app’的语法类似于 CSS 中的 id 选择器语法。表示将 Vue 实例挂载到 id=’app’的元素位置。当然,如果编写 原生 JS 也是可以的:vm.$mount(document.getElementById(‘app’))
  5. ‘#app’是 id 选择器,也可以使用其它选择器,例如类选择器:’.app’。类选择器可以匹配多个元素(位置), 这个时候 Vue 只会选择第一个位置进行挂载(从上到下第一个)。

1|31.3 Vue 的 data 配置项


观察第一个 Vue 程序,你会发现要完成这种功能,我们完全没有必要使用 Vue,直接在 body 标签中编写以下代 码即可:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>没必要使用 Vue</title> </head> <body> <h1>Hello Vue!</h1> </body> </html>

那我们为什么还要使用 Vue 呢?在 Vue 中有一个 data 配置项,它可以帮助我们动态的渲染页面。代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> /* 模板语句的数据来源: 1.谁可以给模板语句提供数据支持呢? data选项. 2.data选项的类型是什么? object Function(对象或者函数) 3.data配置项的专业叫法: Vue 实例的数据对象。(data实际上是给整个Vue实例提供数据来源的。) 4,如果data是对象的话,对象必须是纯粹的对象 (含有零个或多个的 key/value 对) 5. data数据如何插入到模板语句当中? {{}} 这是Vue框架自己搞的一套语法,别的框架看不懂的,浏览器也是不能够识别的。 Vue框架自己是能够看懂的。这种语法在Vue框架中被称为: 模板语法中的插值语法。(有的人把他叫做胡子语法。) 怎么用? {{data的key}} */ new Vue({ template:"<h1>{{message}}</h1>", data:{ message:'hello Vue!!' } }).$mount("#div_1") </script> </body> </html>

运行结果如下:

image-20230531092035627

对以上程序进行解释说明:

  1. data 是 Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
  2. {{message}}是 Vue 框架自己搞的一个语法,叫做插值语法(或者叫做胡子语法),可以从 data 中根据 key 来 获取 value,并且将 value 插入到对应的位置。
  3. data 可以是以下几种情况,但不限于这几种情况:
data:{ name:'zs', age:28 } //取值: {{name}} {{age}} data:{ user:{ name:'zs', age:22 } } //取值: {{user.name}} {{user.age}} data:{ colors:['red','green','blue'] } //取值: {{colors[0]}} {{colors[1]}} {{colors[2]}}
  1. 以上程序执行原理:Vue 编译器对 template 进行编译,遇到胡子{{}}时从 data 中取数据,然后将取到的数据插 到对应的位置。生成一段 HTML 代码,最终将 HTML 渲染到挂载位置,呈现。
  2. 当 data 发生改变时,template 模板会被重新编译,重新渲染
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> new Vue({ template:`<h1> {{name}}上映时间{{sTime}} 男角:{{lead.name}} 年龄:{{lead.age}} 女角:{{actors[0].name}} 年龄:{{actors[0].age}} 女角:{{actors[1].name}} 年龄:{{actors[1].age}} </h1>`, data:{ name:'狂飙', sTime:'2023年1月1日', lead:{ name:'高启强', age:'33' }, actors:[ { name:'高启兰', age:25 }, { name:'陈淑婷', age:27 } ] } }).$mount("#div_1") </script> </body> </html>

image-20230531100422824

1|41.4 Vue 的 template 配置


(1) template 只能有一个根元素。 请看如下代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> new Vue({ template:`<h1>{{name}}</h1><h1>上映时间<{{sTime}} </h1>`, data:{ name:'狂飙', sTime:'2023年1月1日' } }).$mount("#div_1") </script> </body> </html>

执行结果如下:image-20230531103908644

控制台错误信息:组件模板应该只能包括一个根元素。 所以如果使用 template 的话,根元素只能有一个。 代码修改如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> new Vue({ template:'<div><h1>{{name}}</h1><h1>{{sTime}}</h1></div>', data:{ name:'狂飙', sTime:'2023年1月1日' } }).$mount("#div_1") </script> </body> </html>

运行结果如下:

image-20230531104106384

(2) template 编译后进行渲染时会将挂载位置的元素替换。

(3) template 后面的代码如果需要换行的话,建议将代码写到``符号当中,不建议使用 + 进行字符串的拼接。 代码修改如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"></div> <script> new Vue({ template:`<div><h1>{{name}}</h1> <h1>{{sTime}}</h1></div> `, data:{ name:'狂飙', sTime:'2023年1月1日' } }).$mount("#div_1") </script> </body> </html>

运行结果如下:

image-20230531104321483

(4) template 配置项可以省略,将其直接编写到 HTML 代码当中。 代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"> <div> <h1>{{name}}</h1> <h1>{{sTime}}</h1> </div> </div> <script> new Vue({ data: { name: '狂飙', sTime: '2023年1月1日' } }).$mount("#div_1") </script> </body> </html>

运行结果如下:

image-20230531104501036

需要注意两点:

第一:这种方式不会产生像 template 那种的元素替换。

第二:虽然是直接写到 HTML 代码当中的,但以上程序中第 3~6 行已经不是 HTML 代码了,它是具有 Vue 语法 特色的模板语句。这段内容在 data 发生改变后都是要重新编译的。

(5) 将 Vue 实例挂载时,也可以不用$mount 方法,可以使用 Vue 的 el 配置项。 代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="div_1"> <div> <h1>{{name}}</h1> <h1>{{sTime}}</h1> </div> </div> <script> new Vue({ data: { name: '狂飙', sTime: '2023年1月1日' }, el:"#div_1" }) </script> </body> </html>

执行结果如下:

image-20230531104705007

el 是 element 单词的缩写,翻译为“元素”,el 配置项主要是用来指定 Vue 实例关联的容器。也就是说 Vue 所管 理的容器是哪个。

1|51.5解决控制台提示信息


image-20230531111002418

提示当前开发环境:

  1. 引入文件为开发版js,引入生产版js即可解决
  2. 或者修改全局配置(有时有用)

Vue.config.produceionTip=false

  1. 在源码中搜索produceionTip设置为false(彻底解决)

提示404报错

image-20230531112833158

找不到图标错误

提示安装devtools

搜索极简插件 搜索vue devtools安装到浏览器

image-20230531130303984

2|0二、Vue 核心技术


2|12.1 插值语法


主要研究:{{这里可以写什么}} 1. data中声明的变量、函数等都可以。 2. 常量都可以。 3. 只要是合法的javascript表达式,都可以。 4. 模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math Date 等。 'Infinity,undefined,NaN,isFinite,isNaN,' 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' 'require'
<!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> <!-- 安装Vue --> <script src="js/vue.js"></script> </head> <body> <!-- 准备容器 --> <div id="app"> <!-- 在data中声明的 --> <!-- 这里就可以看做在使用msg变量。 --> <h1>{{msg}}</h1> <h1>{{sayHello()}}</h1> <!-- <h1>{{i}}</h1> --> <!-- <h1>{{sum()}}</h1> --> <!-- 常量 --> <h1>{{100}}</h1> <h1>{{'hello vue!'}}</h1> <h1>{{3.14}}</h1> <!-- javascript表达式 --> <h1>{{1 + 1}}</h1> <h1>{{'hello' + 'vue'}}</h1> <h1>{{msg + 1}}</h1> <h1>{{'msg' + 1}}</h1> <h1>{{gender ? '男' : '女'}}</h1> <h1>{{number + 1}}</h1> <h1>{{'number' + 1}}</h1> <h1>{{msg.split('').reverse().join('')}}</h1> <!-- 错误的:不是表达式,这是语句。 --> <!-- <h1>{{var i = 100}}</h1> --> <!-- 在白名单里面的 --> <h1>{{Date}}</h1> <h1>{{Date.now()}}</h1> <h1>{{Math}}</h1> <h1>{{Math.ceil(3.14)}}</h1> </div> <!-- vue程序 --> <script> // 用户自定义的一个全局变量 var i = 100 // 用户自定义的一个全局函数 function sum(){ console.log('sum.....'); } new Vue({ el : '#app', data : { number : 1, gender : true, msg : 'abcdef', // 为了方便沟通,以后我们把msg叫做变量。(这行代码就可以看做是变量的声明。) sayHello : function(){ console.log('hello vue!'); } } }) </script> </body> </html>

2|22.2 指令语法


Vue框架中所有指令的名字都以"v-"开始。

Vue框架中所有的指令都是以HTML标签的属性形式存在的,例如:

<span 指令是写在这里的></span>

注意:虽然指令是写在标签的属性位置上,但是这个指令需要让Vue框架进行编译,编译之后的内容浏览器是可以看懂的。

指令的语法规则:

<HTML标签 v-指令名:参数="表达式"></HTML标签> 表达式:之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么。(可以访问data中的变量) 不是所有的指令都需要参数和表达式,例如:v-once 有的指令,不需要参数,需要表达式,例如:v-if="表达式" 有的指令,需要参数,需要表达式,例如:v-bind:参数="表达式"

2.2.1 v-once 指令

作用:只渲染元素一次,随后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过,这可以用于优化更新性能。

2.2.2 v-if 指令

作用:表达式的执行结果需要是一个布尔类型的数据:true或者false

true: 这个指令所在的标签,会被渲染到浏览器当中。
false: 这个指令所在的标签,不会被渲染到浏览器当中。

2.2.3 v-band 指令

作用:可以让HTML标签的某个属性的值产生动态的效果.

语法:

<HTML标签 v-bind:参数="表达式"></HTML标签>
编译前:<HTML标签 v-bind:参数="表达式"></HTML标签> 编译后:<HTML标签 参数="表达式的执行结果"></HTML标签>

注意两项:

第一 :在编译的时候v-bind后面的"参数名"会被编译为HTML标签的"属性名" 第二 :表达式会关联data,当data发生改变之后,表达式的执行结果就会发生变化。

__EOF__

作  者YXH
出  处https://www.cnblogs.com/YxinHaaa/p/17447074.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

posted @   YxinHaaa  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
0
0
关注
跳至底部
点击右上角即可分享
微信分享提示