1 下载vue.js

　　进入官网　　

下载两个版本的vue.js

开发版本和生成版本的区别

　　开发版本体量更大，包含完整的警告和调试模式

　　生成版本体量更小，删除了警告

2 打开VSCode

　　新建一个空文件夹vuebase，用vscode打开

　　在下面新建两个文件夹，一个用来放代码文件，一个放vue.js文件，如下图

3 新建一个html文件

　　文件名：初识vue.html

3.1 引入vue.js

<!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>


    <!-- 引入开发板vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <script type="text/javascript" >

         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示

    </script>

</script>

</body>

</html>

两个script标签

1）引入vue.js

<script type="text/javascript" src="../js/vue.js"></script>

2) 阻止 vue 在启动时生成生产提示(不重要)

<script type="text/javascript" >

         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示

</script>


如果我们把这个去掉，右键open with live sever从浏览器打开文件




f12进入控制台，发现它有个提示，如下图


意思是说，你用的是开发版本的vue.js，在生产环境中最好要用生产版本的vue.min.js


其实这个提示无所谓，不影响什么，如果看着不爽，那么设置Vue.config.productiontip = false就可去掉这个提示




加上这个设置后，再看控制台，发现这个提示没有了


3.2 写一个容器和一个实例




<body>

    <script type="text/javascript" >

         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示

    </script>

<div id="root">

    <h1>hello {{name}}</h1>

</div>

<script type="text/javascript" >

    //创建vue实例

    new Vue({

        el:'#root',  //用于指定当前vue实例为那个容器服务，值通常为css选择器字符串

        data:{

            name:"china"

        }

    })

</script>

</body>




上面代码中<div id="root"></div>就是一个容器，new Vue({})就是创建了一个vue实例，容器和实例一一对应


看效果




3.2.1 容器


1）id


　　id唯一




<div id="root">

    <h1>hello {{name}}</h1>

</div>





2){{}}数据绑定

　　和vue实例中的data属性对应



3.2.2 实例


　1）el属性，用来对应容器，'#xxx'，表示通过id值来对应,'.xx表示'通过class值来对应


　　通过id




　　通过class


　　


　　2）data属性，用来绑定容器中的{{}}


3.3 关于{{}}说明


　　里面能填入js表达式
　　如果这里填的是变量，那么vue实例data属性中必须有对应的属性，不然会报错


　　示例


　　


效果




4 小结


												


											
Vue05 初识的更多相关文章
	

    
						
  1. Android动画效果之初识Property Animation（属性动画）
		
    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
    
		
    2. 
						
  2. 初识Hadoop
		
    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...
    
		
    3. 
						
  3. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）
		
    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
    
		
    4. 
						
  4. 初识IOS,Label控件的应用。
		
    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...
    
		
    5. 
						
  5. UI篇（初识君面）
		
    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
    
		
    6. 
						
  6. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python
		
    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
    
		
    7. 
						
  7. 初识SpringMvc
		
    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...
    
		
    8. 
						
  8. 初识redis数据类型
		
    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
    
		
    9. 
						
  9. Redis初识、设计思想与一些学习资源推荐
		
    一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...
    
		
    10. 
						
  10. MongoDB【第一篇】MongodDB初识
		
    NoSQL介绍 一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的. 原始的目的是为 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. .NET深入了解哈希表和Dictionary
			
    引子 问题:给定一串数字{1,2,5,7,15,24,33,52},如何在时间复杂度为O(1)下,对数据进行CURD? 数组:我创建一个Length为53的数组,将元素插入相同下标处,是不是就可以实现 ...
    
			
    2. 
						
  2. 基于 Sealos 的镜像构建能力，快速部署自定义 k8s 集群
			
    Sealos 是一个快速构建高可用 k8s 集群的命令行工具,该工具部署时会在第一个 k8s master 节点部署 registry 服务(sealos.hub),该域名通过 hosts 解析到第一 ...
    
			
    3. 
						
  3. 一张VR图像帧的生命周期
			
    "VR 应用程序每帧渲染两张图像,一张用于左眼,一张用于右眼."人们通常这样来解释 VR 渲染,虽然没有错,但可能过于简单化了.对于 Quest 开发人员来说,了解全貌是有益的,这 ...
    
			
    4. 
						
  4. 解决Qt5 mouseMoveEvent事件不能直接触发
			
    问题描述 mouseMoveEvent 需要鼠标点击(左右中),然后在按下的同时移动鼠标才会触发 mouseMoveEvent事件函数. 解决 setMouseTracking(true);
    
			
    5. 
						
  5. vue3 第二天vue响应式原理以及ref和reactive区别
			
    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...
    
			
    6. 
						
  6. 教你用JavaScript实现随机点名
			
    案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript相关知识,做一个随机点名的案例.你可以通过点击开始按钮控制上方名字的闪动,点击停止按钮可以随机选定一个名 ...
    
			
    7. 
						
  7. 【面试题总结】JVM01-组成及垃圾回收
			
    一.概念 1.JVM组成及作用 (1)组成:类加载器.运行时数据区(Java内存模型).执行引擎.本地库接口 (2)作用: 类加载器(ClassLoader)把class文件转换成字节码: 运行时数据 ...
    
			
    8. 
						
  8. MySQL进阶实战7，查询的执行过程
			
    @ 目录 一.拆分查询 二.分解关联查询 三.查询的执行过程 四.优化器的一些优化手段 1.重新定义关联表的顺序 2.将外连接转化为内连接 3.使用增加变换规则 4.优化count().max().m ...
    
			
    9. 
						
  9. 现代 CSS 高阶技巧，不规则边框解决方案
			
    本文是 CSS Houdini 之 CSS Painting API 系列第四篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 现代 CSS  ...
    
			
    10. 
						
  10. .NET周报【12月第3期 2022-12-23】
			
    由于众所周知的原因,大佬们纷纷加入羊群,笔者也未能幸免,体验下来这绝对不是普通感冒的症状,身体不适,熬了几天,所以本周更新比较晚:另外精力有限,对于国际板块只有链接没有简介,十分抱歉! 在这个艰难时刻 ...
    
			
    11.