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. 2022春每日一题：Day 27
			
    题目:友好城市 分析一下可以转化为:选取最多的点对,使得点对之间连线没有交点,没有交点说明什么,假设选定第i组,则对于任意的j,一定满足a[i].l<a[j].l && a[i] ...
    
			
    2. 
						
  2. 我的Python基础（二）
			
    python包含6种内奸的序列:列表.元组.字符串.Unicode字符串.buffer对象和xrange对象 列表和元组的主要区别在于,列表可以修改,元组则不能. 索引: 使用负数索引时,最后一个元素 ...
    
			
    3. 
						
  3. 注册IBMlinuxone并使用xshell登陆
			
    登陆地址:https://linuxone.cloud.marist.edu/#/login 注册地址:https://linuxone.cloud.marist.edu/#/register?fla ...
    
			
    4. 
						
  4. 基于python的数学建模---最小二乘拟合
			
    import numpy as np import matplotlib.pyplot as plt from scipy.optimize import leastsq from matplotli ...
    
			
    5. 
						
  5. 解决win7设置默认程序打开方式失效
			
    问题描述 我在设置一个文件(.ui)的默认程序打开,总是失效.设置不成功. 原因 正常这个程序应该用 designer.exe 打开,但是我之前设置过(.ui)默认程序打开程序为designer.ex ...
    
			
    6. 
						
  6. 【知识体系】Kafka文档汇总、组成及架构，配置，常见名词解释，命令行及api操作，官方文档内容，各部分深入，zookeeper和security，监控和运维
			
    〇.相关资料 1.快速搭建文档: 2.详细讲义 3.在线官方文档:http://kafka.apache.org/documentation/ 4.Kafka知识个人总结 5.KafkaPPT汇报 链 ...
    
			
    7. 
						
  7. 【离线数仓】Day03-系统业务数据仓库：数仓表概念、搭建、数据导入、数据可视化、Azkaban全调度、拉链表的使用
			
    一.电商业务与数据结构简介 1.业务流程 2.常识:SKU/SPU SKU=Stock Keeping Unit(库存量基本单位).现在已经被引申为产品统一编号的简称,每种产品均对应有唯一的SKU号. ...
    
			
    8. 
						
  8. C++日期和时间编程总结
			
    一,概述 二,C-style 日期和时间库 2.1,数据类型 2.2,函数 2.3,数据类型与函数关系梳理 2.4,时间类型 2.4.1,UTC 时间 2.4.2,本地时间 2.4.3,纪元时间 2. ...
    
			
    9. 
						
  9. meta标签补充
			
    shrink-to-fit=no 使用"width=device-width"会导致页面按比例缩小,以适应超出视口边界的内容. 使用将"shrink-to-fit=no& ...
    
			
    10. 
						
  10. SQLMap入门——获取当前网站数据库的用户名称
			
    列出当前网站使用的数据库用户 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 --current-user
    
			
    11.