👀Vue是什么

一套用于构建用户界面的渐进式JavaScript框架
  
  
  
  
  
  
 。

构建用户界面：数据变成界面 渐进式：Vue可以自底向上逐层的应用

👀Vue如何使用

一
  
  
  
  
  
  
 、引入vue.js

<script src="./js/vue.js"></script>

二  
  
  
  
  
  
 、准备一个容器

<div class="box"></div>

三
 


 


 


 


 


 


 
、在script中创建一个Vue实例
  
  
  
  
  
  
 ，且要传入一个配置对象  
  
  
  
  
  
 ，Vue实例和容器一一对应

<script> new Vue({ el: .box, //el用于指定当前Vue实例为哪个容器服务
 


 


 


 


 


 


 
，值通常为选择器字符串  
  
  
  
  
  
 。 data: { //data中用于存储数据
 
 
 
 
 
 
，数据供el所指定的容器去使用
 


 


 


 


 


 


 
。 name: super码力 } }) </script>

四
 
 
 
 
 
 
、通过插值语法把Vue实例中的数据传入html标签中显示

<div class="box"> <!-- 插值语法 --> <!-- 功能：用于解析标签体内容
 
 
 
 
 
 
。写法：{{xxx}}   
   
   
   
   
   
  ，xxx是js表达式
 

 

 

 

 

 

 
，且可以直接读取到data中的所有属性   
   
   
   
   
   
  。 --> <h1>{{name}}</h1> <h3>{{name}}</h3> <h6>{{name}}</h6> </div>

浏览器打开显示效果如下：

 注意：

一旦data中的数据发生改变

 

 

 

 

 

 
，那么页面中用到该数据的地方也会自动更新 容器里的代码依然符合html规范              ，只不过混入了一些特殊的Vue语法

👀Vue使用过程产生的提示

You are running Vue in development mode.

Make sure to turn on production mode when deploying for production.

翻译一下：

您正在开发模式下运行 Vue
 

 

 

 

 

 

 
。 确保在部署生产时打开生产模式

 

 

 

 

 

 
。

解决方法：

在script标签里面Vue实例的外面
 
 

 
 

 
 

 
 

 
 

 
 

 
，输入一行代码就能解决这个问题












，

Vue.config.productionTip = false //阻止vue在启动时生成生产提示              。