首页 > 编程语言 >动力节点老杜Vue框架教程【一】Vue程序初体验

动力节点老杜Vue框架教程【一】Vue程序初体验

时间:2023-04-24 16:35:44浏览次数:56  
标签:初体验 name app Vue template message data 老杜

Vue.js是一个渐进式 MVVM 框架,目前被广泛使用,也成为前端中最火爆的框架

Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能

动力节点老杜的Vue2+3全家桶教程已经上线咯!

学习地址:https://www.bilibili.com/video/BV17h41137i4/

视频将从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。

每一个Vue的知识点讲解的非常通透,不但举例告诉你怎么用,还会告诉你底层实现原理。

1 Vue程序初体验

我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的,这些对我们编写Vue程序起不到太大的作用,更何况现在说了一些特点之后,我们也没有办法彻底理解它,因此我们可以先学会用,使用一段时间之后,我们再回头来熟悉一下Vue框架以及它的特点。现在你只需要知道Vue是一个基于JavaScript(JS)实现的框架。要使用它就需要先拿到Vue的js文件。从Vue官网(https://v2.cn.vuejs.org/)下载vue.js文件。

1.1 下载并安装vue.js

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

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

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

第四步:点击开发版本,并下载,如下图所示:

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

1.2 第一个Vue程序

集成开发环境使用VSCode,没有的可以安装一个:https://code.visualstudio.com/
第一个Vue程序如下:

  1. **
  2. <html lang="en">
  3. **<meta** charset="UTF-8"**>**  
    
  4. **<meta** http-equiv="X-UA-Compatible" content="IE=edge"**>**  
    
  5. **<meta** name="viewport" content="width=device-width, initial-scale=1.0"**>**  
    
  6. **<title>**第一个Vue程序**</title>**  
    
  7. <!-- 安装vue.js -->  
    
  8. **<script** src="../js/vue.js"**></script>**  
    
  9. <!-- 指定挂载位置 -->  
    
  10. **<div** id="app"**></div>**  
    
  11. <!-- vue程序 -->  
    
  12. **<script>**  
    
  13.     // 第一步:创建Vue实例  
    
  14.     const vm = new Vue({  
    
  15.         template : '**<h1>Hello Vue!</h1>**'  
    
  16.     })  
    
  17.     // 第二步:将Vue实例挂载到指定位置  
    
  18.     vm.$mount('#app')  
    
  19. **</script>**  
    

运行效果:

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

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

  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.3 Vue的data配置项

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

  1. **
  2. <html lang="en">
  3. **<meta** charset="UTF-8"**>**  
    
  4. **<title>**没必要使用Vue呀**</title>**  
    
  5. **<h1>Hello Vue!</h1>**  
    

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

  1. **
  2. <html lang="en">
  3. **<meta** charset="UTF-8"**>**  
    
  4. **<meta** http-equiv="X-UA-Compatible" content="IE=edge"**>**  
    
  5. **<meta** name="viewport" content="width=device-width, initial-scale=1.0"**>**  
    
  6. **<title>**Vue选项data**</title>**  
    
  7. <!-- 安装vue -->  
    
  8. **<script** src="../js/vue.js"**></script>**  
    
  9. <!-- 指定挂载位置 -->  
    
  10. **<div** id="app"**></div>**  
    
  11. <!-- vue代码 -->  
    
  12. **<script>**  
    
  13.     new Vue({  
    
  14.         data : {  
    
  15.             message : 'Hello Vue!'  
    
  16.         },  
    
  17.         template : '**<h1>**{{message}}**</h1>**'  
    
  18.     }).$mount('#app')  
    
  19. **</script>**  
    

运行结果如下:

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

  1. data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
  2. {{message}}是Vue框架自己搞的一个语法,叫做插值语法(或者叫做胡子语法),可以从data中根据key来获取value,并且将value插入到对应的位置。
  3. data可以是以下几种情况,但不限于这几种情况:
  4. data : {
  5. name : '老杜',
  6. age : 18
  7. }
  8. //取值:
  9. {{name}}
  10. {{age}}
  11. data : {
  12. user : {
  13. name : '老杜',  
    
  14. age : 18  
    
  15. }
  16. }
  17. //取值:
  18. {{user.name}}
  19. {{user.age}}
  20. data : {
  21. colors : ['红色', '黄色', '蓝色']
  22. }
  23. //取值:
  24. {{colors[0]}}
  25. {{colors[1]}}
  26. {{colors[2]}}
  27. 以上程序执行原理:Vue编译器对template进行编译,遇到胡子{{}}时从data中取数据,然后将取到的数据插到对应的位置。生成一段HTML代码,最终将HTML渲染到挂载位置,呈现。
  28. 当data发生改变时,template模板会被重新编译,重新渲染。

1.4 Vue的template配置项

  1. template只能有一个根元素。

请看如下代码:

  1. **
  2. <html lang="en">
  3. **<meta** charset="UTF-8"**>**  
    
  4. **<meta** http-equiv="X-UA-Compatible" content="IE=edge"**>**  
    
  5. **<meta** name="viewport" content="width=device-width, initial-scale=1.0"**>**  
    
  6. **<title>**Vue选项template**</title>**  
    
  7. <!-- 安装vue -->  
    
  8. **<script** src="../js/vue.js"**></script>**  
    
  9. <!-- 指定挂载位置 -->  
    
  10. **<div** id="app"**></div>**  
    
  11. <!-- vue程序 -->  
    
  12. **<script>**  
    
  13.     new Vue({  
    
  14.         template : '**<h1>**{{message}}**</h1><h1>**{{name}}**</h1>**',  
    
  15.         data : {  
    
  16.             message : 'Hello Vue!',  
    
  17.             name : '动力节点老杜'  
    
  18.         }  
    
  19.     }).$mount('#app')  
    
  20. **</script>**  
    

执行结果如下:

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

  1. new Vue({
  2. template : '<div><h1>{{message}}</h1><h1>{{name}}</h1></div>',  
    
  3. data : {  
    
  4.     message : 'Hello Vue!',  
    
  5.     name : '动力节点老杜'  
    
  6. }  
    
  7. }).$mount('#app')

运行结果如下:

  1. template编译后进行渲染时会将挂载位置的元素替换
  2. template后面的代码如果需要换行的话,建议将代码写到``符号当中,不建议使用 + 进行字符串的拼接。

代码修改如下:

  1. new Vue({
  2. template : `  
    
  3.     <div>  
    
  4.         <h1>{{message}}</h1>  
    
  5.         <h1>{{name}}</h1>  
    
  6.     </div>  
    
  7. `,  
    
  8. data : {  
    
  9.     message : 'Hello Vue!',  
    
  10.     name : '动力节点老杜'  
    
  11. }  
    
  12. }).$mount('#app')

运行结果如下:

  1. template配置项可以省略,将其直接编写到HTML代码当中。

代码如下:

  1. <div id="app">
  2. **<div>**  
    
  3.     **<h1>**{{message}}**</h1>**  
    
  4.     **<h1>**{{name}}**</h1>**  
    
  5. **</div>**  
    

运行结果如下:

需要注意两点:
第一:这种方式不会产生像template那种的元素替换。
第二:虽然是直接写到HTML代码当中的,但以上程序中第3~6行已经不是HTML代码了,它是具有Vue语法特色的模板语句。这段内容在data发生改变后都是要重新编译的。

  1. 将Vue实例挂载时,也可以不用$mount方法,可以使用Vue的el配置项。

代码如下:

  1. <div id="app">
  2. **<div>**  
    
  3.     **<h1>**{{message}}**</h1>**  
    
  4.     **<h1>**{{name}}**</h1>**  
    
  5. **</div>**  
    

执行结果如下:

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

标签:初体验,name,app,Vue,template,message,data,老杜
From: https://www.cnblogs.com/code112233/p/17349962.html

相关文章

  • vue 项目依赖安装失败解决方案
    今天电脑新装了个node.js以及VSCode,找了一个之前的vue项目在上面运行了一下。使用npminstall有一部分依赖一直安装不上,输入npmrunserver一直提示 vue-cli报错,试了下面的方式还是不行。 一、使用淘宝镜像安装依赖:1.安装cnpm   npminstall-gcnpm--registry......
  • 可视化大屏:mapbox+vue全攻略
    如题图,mapbox是一个支持真3D地形展示的webGIS框架,与常用的Leaflet、Cesium和Openlayers并称四大框架,本文将介绍mapbox-gljs在vue中的用法。为什么要用mapbox?各位可以自行搜索上面提到的或者其他的webGIS框架或者集成服务商,可以很轻松的比较出mapbox的优势:支持3D地形......
  • 老杜Vue实战教程完整版笔记(一)Vue程序初体验
    Vue作为国内使用率最高,最火爆的前端框架学习这门技术也越来越重要~动力节点老杜最新版Vue2+3教程已经上线!还是原来的配方,还是熟悉的味道学习地址:https://www.bilibili.com/video/BV17h41137i4/1Vue程序初体验我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vu......
  • vue前端使用nexus配置npm私有仓库
    当我们运行前端项目的时候,常常在解决依赖的时候会加上一个参数npminstall--registry=https://registry.npm.taobao.org将源指定为淘宝的源,以期让速度加快起来,事实上这种的确能够让速度变快,但是长久来看,如果想真正的快速敏捷开发部署,搭建企业内部的私服,则会让速度更上一个台阶。......
  • vue-下载本地项目中的文件
    vue-下载本地项目中的文件文件放在public下新建了一个文件夹staticsimportaxiosfrom'axios'downs(name){axios.get('statics/'+name,{//静态资源文件夹publicresponseType:'blob',}).then(response=>{c......
  • 解决vue移动端 ios页面切换出现闪屏现象(可直接复制张贴)
    在App.vue文件中监听路由//控制左右滑动 watch:{  $route(to,from){   constarr=[    '/warningCenter/warningCenterHome',    '/equInspection/equInspectionHome',    '/ourOrder/ourOrderHome',    '/orderC......
  • Vue2入门之超详细教程七-事件处理
    1、简介事件的基本使用:(1)使用v-on:xxx或者@xxx绑定事件,其中xxx是事件名(2)事件的回调需要配置在methods对象中,最终会在vm上(3)methods中配置的函数,不要用箭头函数!否则this就不是vm了(4)methods中配置的函数,都是被Vue所管理的函数,this指向是Vm或......
  • vue3 自定义组件双向绑定(modelValue)
    参考链接:https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html父组件:<Customabcref="editor"v-model="data.introduction":min-height="400"name="职能"placeholder="请编辑"/>子组件<divclass="tinymc......
  • Vue——eventsMixin【十六】
    前言按着流程接下来就到了eventsMixin,这里面其实主要是$on,$once,$off,$emit的方法定义。内容eventsMixin位于src/core/instance/events.ts下exportfunctioneventsMixin(Vue:typeofComponent){consthookRE=/^hook:///https://v2.cn.vuejs.org/v2/api/#vm-on......
  • vue移动端使用(pdfh5) 组件预览PDF
    1、安装插件npmipdfh52、在页面内引入组件importPdfh5from"pdfh5";import"pdfh5/css/pdfh5.css";3、写一个展示pdf文件的容器  <divid="pdfType"></div>4、封装在事件中 initPdf(){      this.pdfh5=''      this.pdfh......