VUE
1|0一、Vue 程序初体验
学习源:动力节点老杜课程
1|11.1 下载并安装 vue.js
第一步:打开 Vue2 官网,点击下图所示的“起步”:
第二步:继续点击下图所示的“安装”
第三步:在“安装”页面向下滚动,直到看到下图所示位置:
第五步:安装 Vue: 使用 script 标签引入 vue.js 文件。就像这样:
1|21.2 第一个 Vue 程序
第一个 Vue 程序如下:
效果
对第一个程序进行解释说明:
- 当使用 script 引入 vue.js 之后,Vue 会被注册为一个全局变量。就像引入 jQuery 之后,jQuery 也会被注册为一 个全局变量一样。
- 我们必须 new 一个 Vue 实例,因为通过源码可以看到 this 的存在
- Vue 的构造方法参数是一个 options 配置对象。配置对象中有大量 Vue 预定义的配置。每一个配置项都是 key:value 结构。一个 key:value 就是一个 Vue 的配置项。
- template 配置项:value 是一个模板字符串。在这里编写符合 Vue 语法规则的代码(Vue 有一套自己规定的语 法规则)。写在这里的字符串会被 Vue 编译器进行编译,将其转换成浏览器能够识别的 HTML 代码。template 称之为模板。
- Vue 实例的$mount 方法:这个方法完成挂载动作,将 Vue 实例挂载到指定位置。也就是说将 Vue 编译后的 HTML 代码渲染到页面的指定位置。注意:指定位置的元素被替换。
- ‘#app’的语法类似于 CSS 中的 id 选择器语法。表示将 Vue 实例挂载到 id=’app’的元素位置。当然,如果编写 原生 JS 也是可以的:vm.$mount(document.getElementById(‘app’))
- ‘#app’是 id 选择器,也可以使用其它选择器,例如类选择器:’.app’。类选择器可以匹配多个元素(位置), 这个时候 Vue 只会选择第一个位置进行挂载(从上到下第一个)。
1|31.3 Vue 的 data 配置项
观察第一个 Vue 程序,你会发现要完成这种功能,我们完全没有必要使用 Vue,直接在 body 标签中编写以下代 码即可:
那我们为什么还要使用 Vue 呢?在 Vue 中有一个 data 配置项,它可以帮助我们动态的渲染页面。代码如下:
运行结果如下:
对以上程序进行解释说明:
- data 是 Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
- {{message}}是 Vue 框架自己搞的一个语法,叫做插值语法(或者叫做胡子语法),可以从 data 中根据 key 来 获取 value,并且将 value 插入到对应的位置。
- data 可以是以下几种情况,但不限于这几种情况:
- 以上程序执行原理:Vue 编译器对 template 进行编译,遇到胡子{{}}时从 data 中取数据,然后将取到的数据插 到对应的位置。生成一段 HTML 代码,最终将 HTML 渲染到挂载位置,呈现。
- 当 data 发生改变时,template 模板会被重新编译,重新渲染
1|41.4 Vue 的 template 配置
(1) template 只能有一个根元素。 请看如下代码:
控制台错误信息:组件模板应该只能包括一个根元素。 所以如果使用 template 的话,根元素只能有一个。 代码修改如下:
运行结果如下:
(2) template 编译后进行渲染时会将挂载位置的元素替换。
(3) template 后面的代码如果需要换行的话,建议将代码写到``符号当中,不建议使用 + 进行字符串的拼接。 代码修改如下:
运行结果如下:
(4) template 配置项可以省略,将其直接编写到 HTML 代码当中。 代码如下:
运行结果如下:
需要注意两点:
第一:这种方式不会产生像 template 那种的元素替换。
第二:虽然是直接写到 HTML 代码当中的,但以上程序中第 3~6 行已经不是 HTML 代码了,它是具有 Vue 语法 特色的模板语句。这段内容在 data 发生改变后都是要重新编译的。
(5) 将 Vue 实例挂载时,也可以不用$mount 方法,可以使用 Vue 的 el 配置项。 代码如下:
执行结果如下:
el 是 element 单词的缩写,翻译为“元素”,el 配置项主要是用来指定 Vue 实例关联的容器。也就是说 Vue 所管 理的容器是哪个。
1|51.5解决控制台提示信息
提示当前开发环境:
- 引入文件为开发版js,引入生产版js即可解决
- 或者修改全局配置(有时有用)
Vue.config.produceionTip=false
- 在源码中搜索produceionTip设置为false(彻底解决)
提示404报错
找不到图标错误
提示安装devtools
搜索极简插件 搜索vue devtools安装到浏览器
2|0二、Vue 核心技术
2|12.1 插值语法
2|22.2 指令语法
Vue框架中所有指令的名字都以"v-"开始。
Vue框架中所有的指令都是以HTML标签的属性形式存在的,例如:
注意:虽然指令是写在标签的属性位置上,但是这个指令需要让Vue框架进行编译,编译之后的内容浏览器是可以看懂的。
指令的语法规则:
2.2.1 v-once 指令
作用:只渲染元素一次,随后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过,这可以用于优化更新性能。
2.2.2 v-if 指令
作用:表达式的执行结果需要是一个布尔类型的数据:true或者false
true: 这个指令所在的标签,会被渲染到浏览器当中。
false: 这个指令所在的标签,不会被渲染到浏览器当中。
2.2.3 v-band 指令
作用:可以让HTML标签的某个属性的值产生动态的效果.
语法:
注意两项:
__EOF__
作 者:YXH
出 处:https://www.cnblogs.com/YxinHaaa/p/17447074.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了