![ce9cc077d1eef8dce41f02a3a5c191d5.png](https://i-blog.csdnimg.cn/blog_migrate/74ced1780012fddcaea0557ccf0528ca.jpeg)
vue.js官网:vuejs.org
在使用 Vue 时,推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
如何使用vue.js?
vue.js 有两个版本, 开发版本( 包含完整的警告和调试模式) 和 生产版本( 删除了警告,体积更小)。 建议使用开发版本。
需要下载或直接引入vue.js:
1)下载:
在vue.js官网中,直接下载你所需要的版本。下载完成后,在你的html文件中,引入下载好的vue.js。
2)直接引入:在你的html文件中,直接引入vue.js。
引入开发版本:<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
引入生产版本: <scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
使用JavaScript VS 使用Vue.js:
使用JavaScript 来渲染页面:
<
![195e4bcafa3c1f9cda1de3cdd5959c1f.png](https://i-blog.csdnimg.cn/blog_migrate/0bc1bc026194bfef01c7abb97607354a.png)
使用Vue.js渲染页面:
<!-- 引入vue.js -->
<
![195e4bcafa3c1f9cda1de3cdd5959c1f.png](https://i-blog.csdnimg.cn/blog_migrate/0bc1bc026194bfef01c7abb97607354a.png)
关于vue.js 的介绍
引入
<!-- 引入vue.js -->
引入vue.js后,给我们提供了一个构造函数 Vue,
在js中,new Vue(); 后,会返回一个vue实例对象,
用变量vm接着它,const vm = new Vue();
传递一个配置对象{} 。 -> const vm = new Vue({});
<
Vue实例对象中的配置:
- el
类型: 字符串
全称:element(元素)
作用:配置控制的元素,表示Vue要控制的区域,值为css选择器
<
- data
类型:对象
作用:存放要用到的数据,数据为响应式的
<