组件库
ElementUI https://element.eleme.io
BootstrapVue https://bootstrap-vue.io
Vuetify https://vuetifyjs.com/zh-Hans 谷歌提供 推荐
1. Vue 安装
方式一：下载vue.js 文件 引入使用
链接：https://cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5
下载保存
方式二：npm安装 前提是你先下载好node 保证你支持npm
2. Vue引入使用
安装一个工具 https://code.visualstudio.com/
开源的可以直接使用哦
安装完成直接打开进入某一个文件夹，注意把下载好的vue.js 放入这个文件
图片.png
3. 使用vue 创建挂载元素
创建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo2</title>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello word"
}
})
</script>
</body>
</html>
图片.png
可以看出 先确定id 在确定里面的data 还有methods
钩子函数
beforeCreate 创建vue前
created 页面vue后
methods:{
add(){
this.count++
},
showText(){
console.log(this.text)
}
},
created(){ //与methods同级 不要写到methods里面
console.log("created成功")
},
刷新页面显示
图片.png
beforeMount 加载dom前
moundted dom创建后
beforeUpdate 更新前
updated 更新后
beforeDestroy vue销毁前
destroyed 销毁后
网友评论