引入vue框架
学习之前需要了解Html,Css,Javascript等相关知识
几种引入方式:
script标签引入方式
1.开发环境版本,含有命令及帮助:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. 生产环境版本,优化尺寸及速度:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.node命令行的方式安装:
npm install @vue/cli -g //下载中如果出错,可以清理下缓存(npm cache clean -f),再下载;下载成功后再命令中输入vue -V,如果出现版本号即安装成功
安装成功,在项目中使用
1.在命令行cd到当前的文件夹vue create 项目文件夹名称
2.选择default默认
cd 到创建的项目目录中npm run serve
完成后会生成两个路径,复制路径到浏览器打开,会出现vue的欢迎页面 ,完成
4.vue.js官网直接下载,引入使用;(开发环境下不要使用压缩版本,它不包含错误的相关警告)
使用vue.js 创建一个实例
引入vue的时候要把标签放在头部文件中,能够防止抖屏
简单的案例:
<body>
<div id="root">{{msg}}</div>
</body>
<script>
new Vue({
//创建vue的实例,一般会在对象中传递几个参数
el:"#root",
//这个是让vue去接管页面上的哪一个元素(element);
data:{
//vue中的数据放在data中,在写vue的时候不会有任何dom的操作
msg:"hello world"
}
})
</script>