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. KubeEdge快速上手与社区贡献实践
			
    1.KubeEdge的架构特点与优势 持久化 云端组件,EdgeController,设备抽象API,CSI Driver,Admission WebHook 边缘组件,EdgeHub,MetaMan ...
    
			
    2. 
						
  2. ArcObjects SDK开发 003 宏观角度看ArcObjects SDK
			
    1.为什么要宏观上看ArcObjects SDK ArcObjects SDK库是一个非常庞大复杂COM组件集合,ArcGIS10.0有1000多个枚举.90多个结构体.5000多个接口以及4000多 ...
    
			
    3. 
						
  3. PHP8.1.10手动安装教程及报错解决梳理
			
    安装教程参考一:https://www.cnblogs.com/haw2106/p/9839655.html 安装教程参考二:https://www.cnblogs.com/jiangfeilong/ ...
    
			
    4. 
						
  4. JavaEE Day13 Tomcat和Servlet
			
    之前是web基础,现在是web核心 今日内容: web相关概念的回顾 开源的web服务器软件:Tomcat Servlet:整个web技术的核心[Servlet入门] 一.web相关概念的回顾 1.软 ...
    
			
    5. 
						
  5. python安装包出现的两个问题error: Unable to find vcvarsall.bat、提示No module named Crypto.Cipher
			
    python安装包出现的两个问题 error: Unable to find vcvarsall.bat No module named Crypto.Cipher error: Unable to  ...
    
			
    6. 
						
  6. kestrel网络编程--开发Fiddler
			
    1 文章目的 本文讲解基于kestrel开发类似Fiddler应用的过程,让读者了解kestrel网络编程里面的kestrel中间件和http应用中间件.由于最终目的不是输出完整功能的产品,所以这里只 ...
    
			
    7. 
						
  7. python基础(数据库、可视化软件Navicat、python操作MySQL)
			
    多表查询的两种方法 数据准备: 建表 create table dep( id int primary key auto_increment, name varchar(20) ); create t ...
    
			
    8. 
						
  8. 单例模式及pickle序列化模块
			
    内容回顾 目录 内容回顾 单列模式实现的多种方式 pickle序列化模块 根据类名或对象名如何获取到类的字符串名 选课系统需求分析 功能提炼 选课系统架构设计 选课系统目录搭建 单列模式实现的多种方式 ...
    
			
    9. 
						
  9. JavaScript：是一种什么样的编程语言？
			
    有关JavaScript的发展历程,百度百科上已经说得很清楚了,这里不赘述,只是想谈一下我刚刚接触JS的一些感触. 作为后端java开发者,初次学习JS的时候,真的觉得JS非常的不严谨,很混乱.由于它 ...
    
			
    10. 
						
  10. 【转载】EXCEL VBA 关于范围选择代码集
			
    Range("A1:B2").Select '选中"A1"."A2"."B1"."B2"四个连续的单 ...
    
			
    11.