首先要你必须要去VUE官网上下载vue.js,然后才能继续下面的步骤
如果你不想下载的话,在有网络环境的情况下,也可以选择绝对路径的vue.js。
如果你想学习如何搭建脚手架,那么请直接滑动到安装vue-cli
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
当然,和vue的官网一样,不推荐新手直接安装vue-cli
因为那样很容易把你绕晕。当然,如果你对node.js的构建工具比较熟悉的话,也可以直接安装vue-cli
下面正式进入vue的学习:
首先你引入了vue.js
<script src="./vue.js"></script>
然后你需要在html里面写一个大的盒子用来写你的整个vue的项目。
<div id="app"></div>
然后和vue建立关联
<script>
new Vue({
//用来挂载数据 ,提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
el : '#app',
data(){
return {
msg:'aaa'
}
},
methods:{//methods 存放fn的地方;
run(){
alert('run')
},
hover(){
alert('hover')
}
},
mounted(){//相当于js里的window.onload,实例被挂载后调用,这时 `el` 被新创建的 `vm.$el` 替换了。如果根实例挂载到了一个文档内的元素上,当 `mounted` 被调用时 `vm.$el` 也在文档内。
this.run();//直接调用run函数;
console.log(this)
}
});
</script>