Vue是一个 MVVM 的框架，数据驱动和 组件化是Vue的核心思想。
简单的讲MVVM框架就是：我们只需要在数据层做数据操作，显示层会检测到我们每次的数据变化，然后做出相应的改变，监测数据这个工作就是中间的ViewModel。通
过这种模式，我们就可以不用再直接操作DOM节点来进行数据的改变。
插值
在模板里可以实现data数据的展示，如果data数据改变，展示的数据也会响应式的改变。响应式的改变意味着我们不需要强制刷新页面就可以实现数据的变化。这种语法为请输入代码Mustache语法
<template>
<div class="main">
<h3>这里是title的值：{{title}}</h3>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
title:'testTitle'
}
}
}
v-html
v-html可以将一段HTML的代码字符串输出成HTML片段而不是普通的文本
<template>
<div class="main">
<p >这里是<span v-html='html'></span></p>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
html:'<span style="color:blue;font-size:23px;">v-if</span>'
}
}
}
方法事件
v-bind 在事件里绑定方法
Mustache·语法不能用于HTML上，所以我们需要绑定一些属之类的需要使用v-bind。v-bind就是将data里面的数据绑定到HTML上面，从而实现属性的变化。
"v-bind:" 缩写--> ":"
<template>
<div class="main">
<img :src="imgUrl" />
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
imgUrl:"../../static/img/KFC.e66b2f8e.png"
}
}
}
v-model
v-model是用于表单输入的数据双向绑定。所谓双向绑定就是视图层的数据变化会引起数据层数据的改变，相反的，数据层的变化也会导致视图层展示数据的变化。
<template>
<div class="main">
<input type="text" v-model="name">
{{name}}
<button @click='changeName'>改变名字</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:'小明'
}
},
methods:{
changeName(){
this.name = "小花";
}
}
}
v-on
v-on 用于监听DOM事件，如按钮的点击事件、双击事件等。v-on 的简写为 @,如下面的 @click 就等价为 v-on:click。
<template>
<div class="main">
<button @click='yes'>你敢点我吗？</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:''
}
},
methods:{
yes(){
alert("我有啥不敢的！！！"); // alert 是弹出的小窗口
}
}
}
事件修饰符
<template>
<div id="app">
<form action="" @submit.prevent='yzbd'>
<input type="text" name='name' v-model='user'>
<input type="password" name='pwd' v-model='pwd'>
<button>登录</button>
</form>
</div>
</template>
<script>
var vm =new Vue({
el:"#app",
data:{
user:'',
pwd:''
},
methods: {
yzbd:function(){
if(this.user==''){
alert('你不要拿空的表单来骗人，不输用户不叫你进来');
}else{
if(this.user=='zhangsan' && this.pwd=='12345'){
alert('欢迎你回来，zhangsan')
}else{
alert('请输入正确的用户名或密码');
}
}
}
},
})
</script>
其他事件修饰符举例
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键码
<body>
<div id="app">
<form action="" @submit.prevent='yzbd'>
<input type="text" v-on:keyup.enter='yzbd'>
</form>
</div>
</body>
<script>
var vm =new Vue({
el:"#app",
data:{
user:'',
pwd:''
},
methods: {
yzbd:function(){
alert('你按回车了');
}
},
})
</script>
其它按键码：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
v-if 条件渲染
v-if用于做条件化的渲染，当组件的判断条件发生改变，这个组件会被销毁并重建。
<template>
<div class="main">
<span v-if="display">我叫001</span>
<span v-if="!display">我叫002</span>
<button @click="changeShow">切换</button>
</div>
</template>
javascript
data(){
return{
display:true
}
},
methods:{
changeShow(){
this.display = !this.display;
},
}
v-if v-else
<template>
<body>
<div id="app">
<div v-if='Math.random()>0.5'>
you can see me!
</div>
<div v-else>
now,you can't see me!
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
ok:true
},
});
</script>
v-if v-else-if v-else
<template>
<body>
<div id="app">
<div v-if='name=="陈皮"'>
陈皮
</div>
<div v-else-if='name=="陈卓"'>
陈卓
</div>
<div v-else-if='name=="张汇森"'>
张汇森
</div>
<div v-else>
木有！！！
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'张汇森'
},
});
</script>
v-show
<template>
<head>
<style>
.tabcss {
width: 100%;
}
.tabstyle {
display: inline-block;
width: 100px;
}
.cur {
background: cornsilk;
}
</style>
</head>
<body>
<div id="app">
<div class='tabcss'>
<div id="tab1" @click='tabid=0' class='tabstyle' v-bind:class="{'cur':tabid==0}">标签1</div>
<div id="tab2"@click='tabid=1' class='tabstyle' v-bind:class="{'cur':tabid==1}">标签2</div>
</div>
<div class='box'>
<div v-show='tabid==0'>
标签1里的内容
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt eius quo ab, quasi, dolorem asperiores ratione odit placeat iusto nostrum deleniti non. Quis, tenetur! Quam nisi voluptatum ipsa. Dolor, qui!
</div>
<div v-show="tabid==1">
标签2里的内容
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eligendi dolorum cum sapiente sed quae accusamus odit! Deleniti ducimus perferendis temporibus sint, consequatur ipsa commodi! Possimus, nobis. Cumque, unde placeat?
</div>
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
tabid:0,
ok:true,
name:'张汇森'
},
});
</script>
