Vue 环境搭建和 Hello world
文章目录
- vue环境搭建
- 引入vue
- 安装vue开发者工具
- 全局配置
- Hello world
- 404报错处理
- Hello world
- 一些分析
- 总结
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 视频链接
vue环境搭建
引入vue
首先从vue官网下载开发版和生产版的vue.js
也可以通过 cdnjs 这个网站搜索 vue,下载相应版本即可
我先使用 Webstorm 进行开发。新建 vue_learn 项目,在其中新建 js 文件夹,把两个 js 都放进去
新建 index.html,引入 vue.js,然后点击页面的浏览器运行
<script type="text/javascript" src="./js/vue.js"></script>
不要写成<script type="text/javascript" src="./js/vue.js"/>一个标签的闭合形式在某些浏览器不管用
页面上当然什么都没有,我们打开控制台,看到这两个警告就说明引入成功了,当然也可以输入 vue
来验证,会显示这个构造函数
安装vue开发者工具
刚才提到了两个警告,第一个警告在我们安装完vue开发者工具后会消失。我们来安装一下
打开 Chrome 应用商店,搜索 vue,安装即可
如果打不开应用商店,可以下载 这个链接,安装即可
这样第一个就警告就没有了
全局配置
Vue api中全局配置可以搞定第二个警告
<script type="text/javascript">Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
</script>
Hello world
404报错处理
首先先解决一个小问题,我们在 index.html 的 body 中编写以下代码
<div id="root">
<h1>Hello world</h1>
</div>
运行至 chrome,强制刷新后(Shift+F5)浏览器控制台会提示 404
解决这个问题只需要在根目录下放一个 favicon.ico 图标即可
这样再次运行 index.html,就会显示这个图标,而且强刷也不会有提示了
Hello world
接下来我们使用 vue 显示 Hello world
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初识</title><script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root"><h1>Hello {{name}}</h1>
</div>
<script type="text/javascript">Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示//创建vue实例new Vue({//el指定Vue实例为哪个容器服务,通常为css选择器字符串//也可为 document.getElementById('root')//如果为class=root,就写做.rootel:"#root",//data用于存储数据,供el指定的容器使用,值暂时写成一个对象data:{name:"world"}})
</script>
</body>
</html>
我们既然写了 vue 代码,就可以使用刚才下载的 vue 开发者工具了,打开浏览器控制台,选中 vue 选项卡,修改 name 变量的值,然后保存,页面上的值也会改变
一些分析
情况一: 如果页面中的 root 为 class,不是 id,且有两个
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue初识</title><script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="root"><h1>Hello {{name}}</h1>
</div><div class="root"><h1>Hello {{name}}</h1>
</div>
<script type="text/javascript">new Vue({el:".root",data:{name:"world"}})
</script>
</body>
</html>
结果:
情况二:页面两个Vue实例,内容不同
<div id="root"><h1>Hello {{name}}</h1>
</div>
<script type="text/javascript">new Vue({el:"#root",data:{name:"world"}})new Vue({el:"#root",data:{name:"world 123"}})
</script>
结果:
情况三:
我们把代码改为:
<h1>Hello {{name}} {{1+1}} {{Date.now()}}</h1>
结果:
结论:
1、容器和 Vue 实例一 一对应
2、注意区分 js 表达式和 js 代码(语句)
表达式:会产生一个值,可以放在任何一个需要值的地方
① a
② a+b
③ demo(1)
④ x===y?'a':'b'
js 代码(语句)
①if(){}
②for(){}
总结
1、想让 Vue 工作,必须创建一个 Vue 实例,且传入一个配置对象
2、root 容器中的代码依然符合 html 规范,只不过混入了一些特殊的 Vue 语法
3、root 容器中的代码被称为 【Vue模板】
4、Vue 实列和容器是一一对应的
5、真实开发中只有一个 Vue 实例,会配合组件一起使用
6、{{xxx}} 中 xxx 要写 js 表达式,xxx 会自动读取到 data 所有属性
7、一旦 data 中数据发生改变,模板中用到该数据的地方也会自动更新
Vue 环境搭建和 Hello world相关推荐
- VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...
- nodejs + vue环境搭建
nodejs + vue环境搭建 安装nodejs 下载并安装[nodejs] 配置nodejs 安装cnpm(淘宝镜像) 安装vue vue vue-cil 测试,创建新项目 附上vue项目文件夹说 ...
- Django+Vue环境搭建
一.Django环境 1.下载Django pip install django 2.创建Django项目 django-admin startproject server #server 为项目 ...
- Vue环境搭建及入门
初始Vue Vue环境搭建 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 Vue官网:https://cn.vuejs.org 初始Vue ...
- Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
- vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
- VUE环境搭建和项目创建-win平台
今天是2021-04-06,vue3已经发布好久了,所以本文用的都是现在时间最新版的 一.搭建node环境 参考这个: node环境搭建 二.安装vue脚手架 Vue CLI 4.x 需要 Node. ...
- Spring Boot + Vue前后端分离(一)前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率 ...
- Ant Design Vue - 环境搭建(Windows)
前言 官方文档:https://www.antdv.com/docs/vue/introduce-cn/ 首先,您要自己搭建一个 vue 环境,我这里通过 cli 创建一个项目,如下图所示: 一.安装 ...
最新文章
- 18年你需要了解的15个人工智能统计数据
- 关于虚拟空间与物理空间思想的解析
- 深入Java内存模型
- arcgis创建剖面线execl文件
- 各种计算机端口功能,STP各种端口的功能是什么?
- 以太坊开发入门,如何搭建一个区块链DApp投票系统
- 使用python对文件下的文件批量重命名
- android ffmpeg4.0.2编译过程记录
- 用友nc java_用友NC系统使用过程中常见问题和解决方法!收藏!
- 计算机网络第五版思维导图大全集
- 快速排序C语言递归代码实现
- matlab求任意输入响应曲线,3.6 用Matlab进行动态响应分析
- STM32F401RCT6最小系统原理图设计
- XRecyclerView
- Android心率测试
- Java | 实现消息提醒的图标闪烁功能
- 天猫618品牌排名出炉 华为、苹果战况胶着
- 今天的我又来到阳台上的玩耍
- textarea在IE浏览器下只显示一行
- 计算机课程思政目标有哪些,《人工智能导论》教学大纲(含课程思政内容)
热门文章
- mysql btree索引_MySQL优化之BTree索引使用规则
- deepin15.11护眼模式
- 论文复现-2:ConSERT: A Contrastive Framework for Self-Supervised Sentence Representation Transfer
- 基于 HTML5 WebGL 的 3D 网络拓扑结构图
- linux运维可视化工具,试用Grafana:一个自动化运维常用的可视化开源工具
- knn算法实例python_kNN算法及其Python实例
- CMakeLists.txt个人总结(包含对普罗米修斯的部分CMakeLists.txt的分析)
- Linux文本处理—egrep命令
- Xavier (2)——刷机
- 电脑上怎么剪切、合并音乐 1