第一个vue程序
时间：2020-05-26 22:36:45
收藏：0
阅读：52
第一个vue程序
本内容为系列内容，全部内容请看我的vue教程分类
首先是常见的使用方式
- 直接引入，就是我们常规的通过
script标签引入完整版vue文件 - webpack自定义打包，这个打包的意思就好比是你家里买了很多家具，你直接全部乱放也能正常使用，但是肯定不科学，所以要放置到指定的位置，这个过程就相当于是打包，后面会详细讲到
- vue-cli脚手架，这个也是通过
webpack进行打包，不过打包的规则都是它定义好了，我们直接用就可以了非常方便
首先浏览器安装dev-tools插件
初始化程序
基础部分我们会使用直接引入的方式使用vuejs，
如果你使用的是hbuilder工具的话可以直接创建vue程序，它会自动引入vue文件
如果你使用的是其他工具的话，可以下载vue完整文件然后手动引入
或者使用cdn的方式引入
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
这里我们新建一个index.html页面文件，引入vuejs文件
首先在body中添加一个盒子，作为挂载点（容器），意思就是把vue程序挂载在这个地方，比如前面我们提到的家具放到房子里面，这个房子就是挂载点
<body>
<div id="app"></div>
</body>
然后实例化一个vue，传入一个对象
<script>
let vm = new Vue({
//挂载到刚刚我们准备的容器上面 这里等同于el: document.getElementById(‘app‘),
//其实就是一个dom选择
el:‘#app‘,
//el: document.getElementById(‘app‘),
//生命周期 类似于 jquery 的$.ready()
created() {
console.log(‘hello world‘);
},
})
</script>
现在我们可以直接在浏览器中打开项目了，但是还记得刚刚我们安装的 dev-tools吗，如果直接运行时无法触发它的，
当前情况下（未使用webpack打包）我们有两种方式触发它
- 使用
hbuilder运行到浏览器
-
使用
vscode就需要安装插件live server
然后点击 open with live server
这样的话就能触发刚刚的插件了，我们来到浏览器，按f12首先看控制台，这里执行了刚刚的打印方法，并且这个 vue-devtools 也开启了；
然后我们点击这个控制台的 vue 选项，这就打开了插件界面，具体怎么使用，后面再讲
到这里你就完成了第一个vue程序的开发
原文：https://www.cnblogs.com/lookroot/p/12968736.html
评论（0）