一、MVVM 模型
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? MVVM是 Model-View-ViewModel 的缩写，它是一种软件架构风格
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Model：模型， 数据对象（data选项当中 的）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?View：视图，模板页面（用于渲染数据）?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ViewModel：视图模型，其实本质上就是 Vue 实例
?
它的哲学思想是：
通过数据驱动视图把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。
声明式编程：按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作Dom元素。
命令式编程：Jquery它就是，需要手动去操作Dom才能实现对应功能。
二、vue的指令
vue除了存在核心功能默认内置的指令(内置指令)，当然Vue 也允许注册自定义指令(自定义指令)。
内置指令：
v-bind:? ? ? 通常是用来绑定Class(类名)和Style(CSS样式)。
Class：表示方法：? v-bind:calss ='表达式'? ?或者? :class='表达式'
字符串? ? ?v-bind:class?(:class)?='activeClass'? ? ?（直接添加类名）
对象? ? ? ?v-bind:class?(:class)?='{active:decide,error:decide}'? ? ? ? ? ?（通过decide的true和false来控制类名的存在） ? ??
数组? ? ? ?v-bind:class?(:class)?='["active","error"]'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (注意?: 数组内部要加上双引号，不然是获取data中的值)
Style：? 表示方法：?v-bind:style=' 表达式 '? ? ?或者? :style='表达式'
对象(通常) v-bind:style :style ="{color:activeColor,fontSize:fontSize+'px'}" (注意?: 数组内部要加上双引号，不然是获取data中的值)?
//Html
<script src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<h3>class 绑定</h3>
<p v-bind:class="aClass">杨帅帅</p>
<p :class="{default:del,size:si}">杨帅帅</p>
<p :class="['default','size']">杨帅帅</p>
<h3>style 绑定</h3>
<p :style="{color:aColor,fontSize:size+'px'}">杨帅帅</p>
<!-- <button @click="[del=!del,si=!si]">button</button>-->
<button v-on:click="add">button1</button>
</div>
//JavaScript
<script>
var vm = new Vue({
el:'#app',
data:{
aClass:'active',
del:true,
si:true,
aColor:'green',
size:30,
},
methods:{
add:function (){
this.del =! this.del;
this.si =! this.si
}
}
})
</script>v-for :??列表渲染指令,通常渲染数组和对象。
? ? ? ? v-for 迭送对象：
????????????????语法： v-for="(arr, index) in array"?
? ? ? ? ? ? ? ? 说明：arr: 数组元素迭代的别名(循环时，array的每个元素都可叫arr)； index : 数组索引值从0开始(可选；通常会在循环时加入，可在某些功能中查找)
//Html和Javascript
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
<h3>遍历数组</h3>
<ul>
<li v-for="(arr,index) in array" :key="index">
编号:{{index}}， 姓名:{{item.name}}， 性别:{{item.gender}};
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
array:[
{name:'aaa',gender:'1'},
{name:'bbb',gender:'0'},
{name:'ccc',gender:"1"}
]
}
})
</script>??v-for? 迭代对象的属性：
? ? ? ? 语法： v-for="(value, key, index) in Object"
//Html和Javascript
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
<h3>遍历对象</h3>
<ul>
<li v-for="(value,key,index) in obj">
第{{index}}个属性，{{key}}={{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
obj:{
name:'ddd',
gender:"0",
age:18
}
}
})
</script>? ? ? ? 说明： value : 每个对象的属性值(循环时可以通过key.value获取到); key : 属性名(可选); index : 索引值(可选) 。
v-on? :? ?处理事件?
? ? ?完整格式：v-on:事件名="函数名"? ?或? ? ?v-on:事件名="函数名(参数...)"
? ? ?缩写： @事件名=”函数名“? ? 或? ?@事件名=”函数名(参数...)“
? ? event：函数中的默认形参，代表原生DOM事件
? ? 当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过$event作为实参传入
? ? ?作用：用于监听DOM事件? ??
????????@click.prevent ：阻止事件默认行为 (超链接标签的跳转之类的)
? ? ? ? @click.once：点击事件将只会触发一次
? ? ? ? 案件修饰符：v-on:keyup按键名 或? ?@keyup按键名? ?(例如?@keyup.enter 当摁下回车时触发该操作)
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
<h3>事件处理 v-on</h3>
<button @click="say">say {{msg}}</button>
<button @click="warn('a',$event)">warn {{msg}}</button>
<h3>事件修饰符</h3>
<div @click="todo">
<button @click="todoCh">button {{msg}}</button>
</div>
<div @click="todo">
<button @click.stop="todoCh">button {{msg}}</button>
</div>
<a href="http://baidu.com" @click.prevent="stop">百度</a><br>
<button @click.once="Num">num:{{num}}</button>
<h3>按键修饰符</h3>
<input type="text" v-on:keyup.esc="keyUp">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0,
msg:'Hi~~~~',
},
methods:{
say(){
console.log(event.target.innerHTML);
},
warn(a){
console.log(a);
console.log(event.target.innerHTML);
},
todo(){
alert('div')
},
todoCh(){
alert('button')
},
stop(){
alert("a 阻止默认行为")
},
Num(){
this.num++
},
keyUp(){
alert('esc')
}
}
})
</script>v-if，v-show? ：? 是否渲染当前元素
v-if：可以与v-else和v-else-if一起用(和if语句有相似之处，可以进行筛选。)
v-if与v-show相同之处：都会进行选择性渲染。
v-if与v-show不同相同之处：v-if 当添加为假，则什么操作也不执行，当为真时，会重新渲染当前元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-show则是无论在什么条件下，元素始终被渲染，只是在进行CSS中dispaly的切换
使用场景选择
? ?v-if有更高的切换开销，
? ?v-show有更高的初始渲染开销。
v-model? ：v-model指令用于表单数据双向绑定
针类型：text 文本； extarea 多行文本 ；radio 单选按钮； checkbox 复选框； select 下拉框
text 文本：
姓名(文本)：<input type="text" v-model="name">extarea 多行文本：
说明(多行文本)：
<textarea cols="30" rows="5" v-model="desc"></textarea> radio 单选按钮：
性别(单选按钮)：
<input name="sex" type="radio" value="1" v-model="sex"/>男
<input name="sex" type="radio" value="0" v-model="sex" />女checkbox 复选框：
技能(多选框)：
<input type="checkbox" name="skills" value="java" v-model="skills">Java开发
<input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
<input type="checkbox" name="skills" value="python" v-model="skills">Python开发select 下拉框：
城市(下拉框)：
<select name="citys" v-model="city">
<option v-for="c in citys" :value="c.code">
{{c.name}}
</option>
</select>上述案例所用的数据
<script>
new Vue({
el:"#demo",
data:{
name:"",
sex:0,
skills:["vue"],//默认选中vue
citys:[
{code:"bj",name:"北京"},
{code:"sh",name:"上海"},
{code:"heb",name:"哈尔滨"}
],
city:"sh",
desc:""
}
})
</script>