vue 基础

1. 数据绑定

//方法1
<div id="app">
    {{message}}
</div>
//方法2
<div id="app" v-text="message">
</div>

<div id="app" v-html="message">
</div>

2.模板

<div id="app">

</div>
<script>
var app=new vue({
    el:"#app",
	template:'<h1>{{message}}</h1>',
	    data:{
		    message:'hello vue'
	},
})
</script>

3.事件绑定

<div id="app" v-on:click="change">
{{message}}
</div>
<script>
var app=new vue({
    el:"#app",
    data:{
        message:"hello vue"    
    },
    methods:{
        change:function(){
            this.message="ni hao"
        }
    }
})
</script>

说明:事件绑定可以简写为如下
<div id="app" @click="change">

4.属性绑定 v-bind简写:

属性绑定的关键字 v-bind 简写:
<div id="app" v-bind:title="title"></div>

<script>
var app=new Vue({
    el:"#app",
    data:{
        title:"这是一个属性绑定"
    }
);
</script>

扩展: v-bind 绑定后面是一个表达式

<div id="app" v-bind:title="'this is'title"></div>

<script>
var app=new Vue({
    el:"#app",
    data:{
        title:"这是一个属性绑定"
    }
);
</script>

5.双向绑定 v-model

<div id="app">
	<input type="text" v-model:value="content">
	<div>{{content}}</div>
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			content:"this is body"
		}
	});
</script>

6.计算属性

	<div id="app">
		姓: <input type="text" v-model="firstName"><div>{{firstName}}</div>
		名: <input type="text" v-model="lastName"><div>{{lastName}}</div>
		全名:<div>{{fullName}}</div>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				firstName:"",
				lastName:""
			},
			// vue的计算属性
			computed:{
				fullName:function(){
					return this.firstName+' '+this.lastName
				}
			}
		});
	</script>

7.侦听器

	<div id="app">
		姓: <input type="text" v-model="firstName"><div>{{firstName}}</div>
		名: <input type="text" v-model="lastName"><div>{{lastName}}</div>
		改变次数:<div>{{count}}</div>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				firstName:"",
				lastName:"",
				count:0
			},
			// vue侦听器
			watch:{
				firstName:function(){
					this.count++
				},
				lastName:function(){
					this.count++
				}
			}
		});
	</script>

8.vue语句

v-if 或 v-show

//if语句
    <div id="app">
		<!-- <div v-if="show">切换效果</div> -->
		<div v-show="show">切换效果</div>
		<button @click="toggleF">toggle</button>
	</div>

	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				show:true
			},
			methods:{
				toggleF:function(){
					this.show=!this.show
				}
			}
		});
	</script>

v-for

	<div id="app">
		<ul>
			<!-- 基础写法 -->
			<li v-for="item in arr">{{item}}</li>
		</ul>
	</div>

	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				arr:[1,2,3]
			}
		});
	</script>

	<div id="app">
		<ul>
			<!-- 复杂语法 加key可以加快渲染 -->
			<li v-for="(item,index) in arr" :key="index">{{item}}</li>
		</ul>
	</div>

	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				arr:[1,2,3]
			}
		});
	</script>

9.vue方法

//js部分:   
    methods: {
            fullName: function() {
                return this.firstName + " " + this.lastName;
            }
        }
//调用:
<div>{{fullName()}}</div>