初识vue

96 阅读1分钟

首先要你必须要去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>