美文网首页
Vue 一 引入vue

Vue 一 引入vue

作者: 小眼睛的露鹿酱 | 来源:发表于2022-02-20 17:52 被阅读0次

组件库
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 销毁后

相关文章