目录
2.插值操作{{msg}} 和v-text、v-html,插值操作均为单向绑定：data>>>html
5.双向数据绑定v-model data<<<>>>html
1.Vue.js简介
vue.js是基于数据驱动的，它是响应式的，而非操作DOM，因此我们重点在操作数据，而非视图的渲染。
前端的MVVM模型，指的是M ——VM ——V，模型——视图模型——视图，
这里的模型M一般指的是vm实例中的data数据，视图V指的是html文件，视图模型VM指的是Vue实例
2.Vue.js指令
1.v-cloak：防止闪现
当我们使用插值{{msg}}的时候，如果网络状态不好，html中显示出“{{msg}}”，而非替换为vm实例的data数据msg，因此我们使用这条指令来确保vm实例加载后才进行插值操作。
//style样式，在加载完成前不显示，并提升重要度
<style>
[v-cloak]{
display: none !important;
}
</style>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"message"
}
})
</script>
2.插值操作{{msg}} 和v-text、v-html,插值操作均为单向绑定：data>>>html
<p v-cloak>----{{msg}}-----</p>
<h3 v-text="msg"></h3>
<div v-html="myhtml"></div>
var vm = new Vue({
el: '#app',
data: {
msg:"message",
myhtml:"<h1>这是h1</h1>",
}
}其中{{}}插件会将data值插入合适位置，v-text会覆盖整个标签内容，v-html将data变量值解析html并覆盖插入当前标签内。
3.属性绑定指令:v-bink
将属性值绑定在data数据中，简写为 :属性名称=“data中变量名称”
<button v-bind:type="type" :value="value" />
var vm = new Vue({
el: '#app',
data: {
type:"button",
value:'按钮",
}
}4.事件绑定指令：v-on
将事件绑定在vm中的methods方法中，简写为 @click="btn"
<button v-bind:type="type" :value="value" v-on:click="btn" />
var vm = new Vue({
el: '#app',
data: {
type:"button",
value:'按钮",
},
methods:{ //方法定义
btn(){
alter("事件点击")
}
}
}5.双向数据绑定v-model data<<<>>>html
双向数据绑定，data中的数据发生变化时，html中也会同步更新，html中的数据变化时，data中也会同步更新。
<input type="text" v-model="text" value="value" />
<p v-text="text"></p>
var vm = new Vue({
el: '#app',
data: {
text:'",
},
}
}v-model会忽略控件本身的value等显示属性，v-model只能在表单控件（input\select\radio\checkbox）中使用，非表单使用插件v-text或者{{}}单向绑定
6.循环指令v-for
<p v-for="(v,index) in list1">索引：{{index}}---值：{{v}}</p>
<hr/>
<p v-for="(v,index) in list2">索引：{{index}}---值：>>{{v.id}}--{{v.name}}--{{v.male}}</p>
<hr/>
<p v-for="(v,k,index) in user">索引：{{index}}---键：{{k}}---值：{{v}}</p>
<hr/>
<p v-for="(n,index) in 5">索引：{{index}}---值：{{n}}</p>
data:{
list1:[1,2,3,4,5],
list2:[
{id:1,name:"张三",male:"男"},
{id:2,name:"李四",male:"男"},
{id:3,name:"五五",male:"男"}
],
user:{id:1,name:"赵六",age:20},
},v-for指令用来循环生成一组能复用的组件。v-for=(value,key,index) in xxx ，注意其中的顺序，先值，然后再键，最后再本地索引，本地索引是从0开始，n in num :n是从1开始生成的。
在组件中，key是必须的，key主要是为了跟踪每个节点，从而重排和重用现有的元素，key值唯一性，数字或者字符串。
<div id="app" style="margin-left: 20px;margin-top: 20px">
id:<input type="text" v-model="id"><br/>
name:<input type="text" v-model="name"><br/>
male:<input type="text" v-model="male"><br/>
<input type="button" value="添加" @click="add"><br/>
<p v-for="(v,index) in list" :key="v.id">
<input type="radio" v-model="sel" :value="v.id" >索引：{{index}}---值：>>{{v.id}}--{{v.name}}--{{v.male}}</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
sel:"",
id:"",
name:"",
male:"",
list:[
{id:1,name:"张三",male:"男"},
{id:2,name:"李四",male:"男"},
{id:3,name:"五五",male:"男"}
],
},
methods:{
add(){
this.list.splice(this.sel-1,0,{id:this.id,name:this.name,male:this.male})
}
}
})
</script> 
js中splice函数：index索引是本地索引，下标从0开始
list.splice(index,n,newval)；在 当前索引处后的n个元素替换为新元素
list.splice(index,1,newval)；当前索引处的值替换为新值
list.splice(index,0,newval)；当前索引处增加新值，之后的向下移动
list.splice(0,0,newval)；在头部添加新值
list.splice(index,1)；删除当前索引处的元素
7. v-if和v-show指令
v-if是根据状态来渲染html，有很高的切换消耗，源码中是不会显示出状态为false的标签；
而v-show则是为标签添加了一个css样式 display属性，有很高的初始渲染消耗，源码中，如果状态为false，则为 display:none
如果需要频繁切换使用v-show（div的频繁切换），
如果只是在初始时指定是否显示用v-if（如根据权限显示的菜单列表）
<div id="app" style="margin-left: 20px;margin-top: 20px">
<p v-if="flag">v-if</p>
<p v-show="flag">v-if</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:false
}
})
</script>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
