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. ansible回调插件介绍（待完成）
			
    简介 ansible回调插件(callback plugins)允许为事件添加一些额外响应.这里的事件包括了执行任务(task)的结果,例如(ok.failed.unreachable.skipped ...
    
			
    2. 
						
  2. pytest文档82 - 用例收集钩子  pytest_collect_file  的使用
			
    前言 pytest 提供了一个收集用例的钩子,在用例收集阶段,默认会查找test_*.py 文件或者 *_test.py文件. 如果我们想运行一个非python的文件,比如用yaml 文件写用例,那么 ...
    
			
    3. 
						
  3. API 如何选择 REST，GraphQL还是gRPC
			
    关于API的演进 CORBA RDA XML-RPC SOAP REST JSON-RPC ODATA GraphQL gRPC       gRPC是什么?
    
			
    4. 
						
  4. windows安装wsl，在windows中使用ubuntu
			
    WSL(Windows Subsystem for Linux)即适用于 Linux 的 Windows 子系统,它是随 Windows 操作系统一起提供. WSL是windows操作系统的子系统,算 ...
    
			
    5. 
						
  5. 基于python的数学建模---洛伦兹线与数值解
			
    import numpy as np from scipy.integrate import odeint from mpl_toolkits.mplot3d import Axes3D import ...
    
			
    6. 
						
  6. [排序算法] 堆排序 (C++)
			
    堆排序解释 什么是堆 堆 heap 是一种近似完全二叉树的数据结构,其满足一下两个性质 1. 堆中某个结点的值总是不大于(或不小于)其父结点的值: 2. 堆总是一棵完全二叉树 将根结点最大的堆叫做大根 ...
    
			
    7. 
						
  7. APACHE正向代理配置
			
    Apache快速安装和反向代理配置:https://www.cnblogs.com/brad93/p/16718104.html Apache正向代理配置参考教程:https://www.cnblog ...
    
			
    8. 
						
  8. 4.11：Storm之WordCount
			
    〇.概述 1.拓扑结构 2.目标 使用storm进行计数实验. 一.启动服务   在网页中输入:http://localhost:8081可以查看storm的相关信息. 二.kafka操作 终端中输入 ...
    
			
    9. 
						
  9. RGB以及RGBA
			
    字母含义及取值 R:红色.0~255 整数 G:绿色.0~255 整数 B:蓝色.0~255 整数 A:透明度.0~1.整数或者小数 RGB和RGBA的关系 项目遇见一个需求,后台返回所占比例,前端根 ...
    
			
    10. 
						
  10. md5-有道翻译
			
    网站 aHR0cHMlM0EvL2ZhbnlpLnlvdWRhby5jb20v 测试发现三个值是变化的 一.第一种方法 initiator一步一步找,在t.translate中找到以下内容 这里可以看 ...
    
			
    11.