vue全家桶-vue(一)

这段时间,回忆一下vue全家桶的相关知识,布局也不会放下,争取每天整理几个。

说vue离不开vue的生命周期,不过这一篇里面不写,放在下一篇吧。

首先说说vue是什么,不用想,它是js库,按官网上说的,它是构建用户界面的渐进式框架。它比较简单,容易上手。基本上一两天就可以看完官方文档,能去做点小的实例了。

安装我们就不说了,不会的同学可以去百度一下了。

下面说一下它的基本结构

{{...}}
var vm = new Vue({
			el:"#app",
			data: {}
			//一些选项,如methods、created、computed等
           })

看一下它的语法

v-html:输出html代码,但是v-html不能乱用,只能在确定这个内容十分安全的时候才能使用,随意渲染是会导致XSS攻击。

var vm = new Vue({
	el:"#app",
	data: {
	    demo: '

这是demo

' } })

v-bind,可以缩写为":",如v-bind:href,缩写成 :href

var vm = new Vue({
	el:"#app",
	data: {
		url:'https://baidu.com'
		}
	})

v-on,可以缩写为"@",如 v-on:click,缩写成 @click。

var vm = new Vue({
	el:"#app",
	methods: {
		getname: function(){
			alert('佳小凡')
		}
	}
})

v-for, 在同一节点下执行优于v-if

{{ name.name }}
var vm = new Vue({
	el:"#app",
	data: {
		obj: [
			{ name: 'jiafan' },
			{ name: 'buff' }
		]
		}
	})

v-if、v-else-if、v-else:if和else很好理解,else-if就是如果,那就的意思,和java中 else if{ }功能一样

div id="app">
		
A
B
C
var vm = new Vue({
		el:"#app",
		data: {
			letter : 'B'
		}
	})

v-model:用来创建数据的双向绑定

同步数据:{{ message }}

var vm = new Vue({
	el:"#app",
	data: {
		message: ''
		}
	})

v-once:一次性的插值,不会改变

{{demo}}
var vm = new Vue({
	el:"#app",
	data: {
		demo: 'once-demo'
		}
	})

v-show

Hi
var vm = new Vue({
	el:"#app",
	data: {
		hai: true
	    }
	})

 

你可能感兴趣的:(vue)