第一个Vue实例

灰太狼 2022-01-22 22:14 228阅读 0赞

##### Vue #####

是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合

##### 特点 #####

*  易用  
    已经会了HTML,CSS,JavaScript 就可以
 *  灵活  
    简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
 *  性能  
    20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

使用 Vue 开发需要下载 Vue.js ，下载链接 [Vue.js官网下载地址][Vue.js] ，选择要下载的版本，在选项上右击在新标签页中打开链接  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70]  
想直接下载的直接右击链接另存为就可以了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70 1]  
编写一个vue实例

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue实例</title>
    	<script src="D:/vue/vue.js"></script> //引入vue.js
    </head>
    <body>
    
    	<h1 id="app">{
       {msg}}</h1>
    
    	<script type="text/javascript"> var vue = new Vue({ //创建一个vue实例 el:'#app', data:{ msg:"Hello Vue" } }) </script>
    
    </body>
    </html>

el：节点挂载，限定语法的作用范围
    data：渲染的数据，Vue实例的数据对象

网页中显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70 2]

[Vue.js]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70]: /images/20220123/d1ac5c401f7d4034852d7c443de4cf27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70 1]: /images/20220123/1fd0a7f417494f9b9cf16b5c9aebf167.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dvb19ob21l_size_16_color_FFFFFF_t_70 2]: /images/20220123/9befd0c6f8544370bfc4ee2864a2ae9a.png