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. 【Azure 事件中心】 org.slf4j.Logger 收集 Event Hub SDK(Java) 输出日志并以文件形式保存
			
    问题描述 在使用Azure Event Hub的SDK时候,常规情况下,发现示例代码中并没有SDK内部的日志输出.因为在Java项目中,没有添加 SLF4J 依赖,已致于在启动时候有如下提示: SLF ...
    
			
    2. 
						
  2. 【笔记】区间DP
			
    记录一些基础的区间 \(\text{DP}\) 题. 0x00 AT_dp_n N - Slimes 最板的区间 \(\text{DP}\) . 记 \(f[i][j]\) 表示合并 \(i\sim  ...
    
			
    3. 
						
  3. Ant Design Pro：Layout 组件——嵌套布局
			
    在   BasicLayout.jsx   文件中修改 <ProLayout layout="topmenu" className="chenshuai2144&q ...
    
			
    4. 
						
  4. js 金钱3位格式化
			
    function formatCash(str) { return str.split('').reverse().reduce((prev, next, index) => { return  ...
    
			
    5. 
						
  5. Execute Crond Service on openEuler
			
    一.Execute Crond Service on openEuler 1 crond 概述 crond就是计划任务/定时任务 常见有闹钟.PC端定时关机 shutdown -s -t 200,定时 ...
    
			
    6. 
						
  6. 乐维监控与Zabbix对比分析（一）——架构、性能
			
    近年来,Zabbix凭借其近乎无所不能的监控及优越的性能一路高歌猛进,在开源监控领域独占鳌头:而作为后起的新锐监控平台--乐维监控,则不断吸收Zabbix,Prometheus等优秀开源平台的优点,兼 ...
    
			
    7. 
						
  7. Promise知一二
			
    Promise 1.Promise的前置知识 进程(厂房) 程序的运行环境 线程(工人) 线程是实际进行运算的东西 同步 通常情况代码都是自上向下一行一行执行的 前边的代码不执行后边的代码也不会执行  ...
    
			
    8. 
						
  8. 当我们说大数据Hadoop，究竟在说什么？
			
    前言 提到大数据,大抵逃不过两个问题,一个是海量的数据该如何存储,另外一个就是那么多数据该如何进行查询计算呢.好在这些问题前人都有了解决方案,而Hadoop就是其中的佼佼者,是目前市面上最流行的一个大 ...
    
			
    9. 
						
  9. Mysql安装失败-GPG验证不通过或Failed to start mariadb.service: Unit not fou
			
    1.报错原因 报错原文 Key imported successfully Import of key(s) didn't help, wrong key(s)? Public key for mys ...
    
			
    10. 
						
  10. 接口Interface的作用不止是解耦
			
    简言: 好久没写博客了,今天手痒想写一写.废话少说,我们直入主题,相信大家对接口interface,这个单词一定不陌生.但是要说到它的作用,除了解耦之外,还有什么作用呢?可能大多数人都不是很清楚(大牛 ...
    
			
    11.