最易懂的vue入门篇

最易懂的vue入门篇

  • 创建简单的vue
    • vue常用指令(括号表示简写)
    • vue-api
    • 钩子函数(转载)
    • vue组件(转载)
    • vue实例(转载)
    • 生命周期钩子(转载一个写的特别好 )
    • 生命周期八个钩子函数

创建简单的vue

创建vue的四步
最易懂的vue入门篇_第1张图片

<body>
	<div id="app">{{message}}</div>
</body>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript">
	new Vue({
	el:'#app',
	data:{
		message:'hello vue'
	}
	)
</script>

vue常用指令(括号表示简写)

最易懂的vue入门篇_第2张图片

vue-api

最易懂的vue入门篇_第3张图片

钩子函数(转载)

最易懂的vue入门篇_第4张图片
源码如下:
最易懂的vue入门篇_第5张图片

vue组件(转载)

最易懂的vue入门篇_第6张图片

vue实例(转载)

最易懂的vue入门篇_第7张图片
其中directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局

生命周期钩子(转载一个写的特别好 )

最易懂的vue入门篇_第8张图片
结合代码如下
最易懂的vue入门篇_第9张图片

生命周期八个钩子函数

最易懂的vue入门篇_第10张图片
以上内容整理自vue官网,各路大神的博客等

你可能感兴趣的:(前端类)