vue基础

 

目录

1、初始化vue

2、声明式渲染

3、v-text和v-html

 4、v-if和v-show

5、v-for遍历

 6、属性绑定v-bind

 7、表单绑定v-model

 8、事件绑定v-on

---

1、初始化vue

<!-- 创建容器 -->
<div id="app">{{str}}</div>

<!-- 引入vue -->
<script src="../js/vue.js"></script>
<script>
	new Vue({
		el: "#app",
		data: {
			str: '你好，Vue'
		},
	})
</script>

  效果图：

 

2、声明式渲染

<!-- 创建容器 -->
<div id="app">
	<p>{{str}}</p>
	<p>{{str.length}}</p>
	<p>{{str.split("")}}</p>
	<p>{{str.split("").reverse()}}</p>
	<p>{{str.split("").reverse().join("")}}</p>
</div>

<!-- 引入vue -->
<script src="../js/vue.js"></script>
<script>
	new Vue({
		el: "#app",
		data: {
			str: '你好Vue'
		},
	})
</script>

效果图： 

 

3、v-text和v-html

 v-text不能解析标签，v-html可以

<div id="app">
	<p>{{str}}</p>
	<p v-text='str'></p>
	<p v-html='msg'></p>
</div>

<script>
	new Vue({
		el:'#app',
		data:{
			str:'你好Vue',
			msg:'<strong>你好Vue</strong>'
		}
	})
</script>

 效果图：

 4、v-if和v-show

<div id="app">
	<p v-if='status'>v-if依赖于节点的添加删除</v-if></p>
	<p v-show='status'>v-show依赖于display实现隐藏，频繁切换适用于v-show</p>
</div>

<script>
	new Vue({
		el:'#app',
		data:{
			status:true,
		}
	})
</script>

5、v-for遍历

<!-- v-for遍历 数组对象 -->
<li v-for="(obj,index) in arrobj">
	{{index+1}} ==> {{obj.name}} ==> {{obj.sex}} ==> {{obj.age}}
</li>

new Vue({
	el: '#app',
	data: {
		arrobj: [{
			name: '敏敏',
			sex: '女',
			age: 18
		}, {
			name: '娜扎',
			sex: '女',
			age: 22
		},]
	}
})

 效果图：

 6、属性绑定v-bind

绑定属性：    v-bind:属性名:'属性值'
简写：    :属性名:'属性值'
v-bind数据流向:  data ===》bind  单向绑定

<div id="app">
	<p v-bind:title='tit'>绑定title属性</p>
	<p :title='tit'>绑定title属性</p>
	<p :id='nextId'>绑定id属性</p>
</div>

#active{
	background-color:  yellow;
}

new Vue({
	el: "#app",
	data: {
		tit:'vue',
		nextId:'active',
	},
})

 效果图：

 7、表单绑定v-model

绑定表单：v-model:value='值'
简写：v-model='值'
v-model数据流向: data 《== ==》 model  双向绑定

<div id="app">
	<!-- 绑定表单 -->
	<input type="text" v-model:value='str' />
	<p v-text='str'></p>
	<input type="checkbox" v-model:value="status" />
	<button v-bind:disabled='!status'>登录</button>
</div>

new Vue({
	el: "#app",
	data: {
		str:'你好Vue',
		status:false
	},
})

效果图：

 

 8、事件绑定v-on

v-on:事件名='函数名/js代码'
简写：    @事件名='函数名/js代码'

<div id="app">
	<button v-on:click='num++'>点击加1</button>
	<button @click='num+=2'>点击加1</button>
	<p>{{num}}</p>
</div>

new Vue({
	el: "#app",
	data: {
		num:1,
	},
})