Vue第二篇
循坏指令
<div id='app'>
<p>
{{ nums[2] }}
</p>
<ul>
<!--只遍历值-->
<li v-for='num in nums'>{{ num }}</li>
</ul>
<ul>
<!--值与索引-->
<li v-for='(num,index) in nums'>{{ num }} {{ index }}</li>
</ul>
<ul>
<!--值，键，索引-->
<li v-for='(v,k,i) in dic'>{{ v }} {{ k }} {{ i }}</li>
</ul>
</div>
评论案例
<style>
span {
marign-left:100px;
cursor:pointer;
color:green;
}
span:hover {
color:red;
}
</style>
<div id='app'>
<p>
<input type='text' v-model='val'>
<button @click='add'>
评论
</button>
</p>
<ul>
<li v-for='(info,i) in infos'>
{{ info }}
<span @click='del(i)'>x</span>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
infos:[], //管理所有留言
val:'' //管理当前留言
}，
methods:{
del:function(i){
//splice:从哪个索引开始 操作的位数 操作的成果(可变长)
this.infos.splice(i,1)
},
add:function(){
let val=this.val;
if(val){
this.infos.splice(0,0,val); //评论
this.val = '' //评论完留言框为空
}
}
}
})
</script>
解决插值表达式符号冲突
<div id="app">
${ msg }
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['${', '}']
})
</script>
实例成员之computed
<script>
new Vue({
el:'#app',
data:{
first_name:'',
last_name:'',
},
computed:{
//1.在computed中定义的变量的值等于绑定的函数的返回值
//2.绑定的函数中出现的所有Vue变量都会被监听
full_name:function(){
return this.first_name+this.last_name
}
}
})
</script>
实例成员之watch
<script>
new Vue({
el:'#app',
data:{
first_name:'',
last_name:'',
full_name:''
},
watch:{
//1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
//2.绑定的函数中出现的所有Vue变量都会被监听
full_name:function(){
let res = this.full_name.split('');
let this.first_name = res[0];
let this.last_name = res[1];
}
}
})
</script>
总结
指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href :href :class='c1' :class='[c1,c2]' :style='s1' (s1={color:"red"})
事件：v-on:click @click
@click='action' @click='action(msg)' @click='action($event)'
表单：v-model
条件：v-show v-if v-else-if v-else
循环：v-for='(value,index) in list'
v-for='(value,key,index) in dict'
成员：
el:挂载点
data:数据
methods:方法
computed:计算(监听方法内所有的变量，返回值给绑定的变量，该变量无需再data中声明)
watch:监听(监听绑定的变量，绑定的变量必须在data中声明)
组件
组件：有html模板，有css样式，有js逻辑的集合体
根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件，全局子组件)
组件里面只能有一个根标签
局部组件
<div id='app'>
<abc></abc>
<abc></abc>
</div>
<script src='js/vue.js'></script>
<script>
//定义局部组件
let localTag = {
//1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
//2.data的值就是一个存放数据的字典
//需要满足1和2，data值为一个可以产出名称空间的函数和返回值，返回值是字典
data:function(){
return {
count:0,
}
},
template:`
<div class="box" style="border: solid; width: 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods:{
action:function(){
this.count++
},
}
};
new Vue({
el:'#app',
data:{
},
//局部组件必须注册
components:{
'abc':localTag
}
})
</script>
全局组件
<div id='app'>
<!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy>
</div>
<script src="js/vue.js"></script>
<script>
//Vue.component(组件,{组件主体})；
Vue.component('oldBoy',{
data:function(){
return {
count:0
}
},
template:`
<div class="box" style="border: solid; width: 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods:{
action:function(){
this.count++
},
}
});
//全局组件无需注册
new Vue({
el:'#app',
data:{
}
})
</script>
组件间的交互
父传子
<div id='app'>
<!--locl-tag就可以理解为自定义标签，使用msg变量值由父组件提供-->
<!--local-tag标签代表的是子组件，lucas为标签的自定义属性-->
<!--在子组件内部能拿到lucas，就可以拿到父组件的信息-->
<local-tag :lucas='msg'></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
//子组件拿自定义属性
props:['lucas'],
template:`
<div>
<h1>信息</h1>
<p>{{ locas}}</p>
</div>
`
};
new Vue({
el:'#app',
data:{
msg:'父级的信息'
},
components:{
localTag //在页面中<local-tag>
}
})
</script>
子传父
<div id='app'>
<h1>
{{ title }}
</h1>
<global-tag @recv='get_title'></global-tag>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag',{
template:`
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data:function(){
return {
msg:''
}
},
methods:{
//action:function(){
//let msg = this.msg;
//this.$emit('recv',msg)
},
watch:{
msg:function(){
//只要msg有变化，就将值同步传给父组件
this.$emit('recv',this.msg)
}
}
}
});
new Vue({
el:'#app',
data:{
title:'父组件定义的标题'
},
methods:{
get_title:function(msg){
this.title = msg
}
}
})
</script>
